续:ionic中使用热更新插件cordova-hot-code-push

2017/07/03ionic 标签:2

我在之前的文章ionic中使用热更新插件cordova-hot-code-push说过了在app中实现内壳热更新的方案与方法。但是没有说过外壳的热更新,因为外壳更新我们无法通过向内壳一样的热更新去实现,我们仅能通过“min_native_interface”里的版本号去判断服务器上的版本号是否大于本地app的版本号,如果大于则引导用户跳转到app store进行下载新版app。
也就是说,我们无法再通过服务器直接更新app的外壳,外壳的更新必须要用户手动进行升级。cordova-hot-code-push的目的就是引导用户到app store下载最新版的app程序。
1、重新设置你的cordova-hcp.json模板(这里仅多增加了一个参数而已)

{
"autogenerated": true,
"name": "tabs",
"min_native_interface": 3,
"content_url": "http://192.168.22.62/tabs",
"ios_identifier": "https://itunes.apple.com/us/app/facebook/id284882215?mt=8",
"android_identifier": "https://play.google.com/store/apps/details?id=com.facebook.katana",
"update": "now"
}

就增加了一个android_identifier,这就是google play的app下载地址。
假如你的app支持安卓和ios那么,你就两个都填写上,如果你的app仅支持其中一个系统平台,那么就只保留你需要的那个平台,删除另一个平台即可。
记得使用下面的代码重新生成一次:

cordova-hcp build

2、编写实现的代码
下面的代码我都是根据cordova-hot-code-push官方获得的,如果你的英文够好,或者你愿意主动阅读英文,那么我建议你到官方好好看看文档,因为官方的文档中说的非常清楚。官方地址:https://github.com/nordnet/cordova-hot-code-push/wiki
以下代码如果在纯phonegap的js应用中使用应该不会有问题,但是在ionic中,是会发生错误的,之后我会提到

var app = {

        initialize: function() {
          this.bindEvents();
        },

        bindEvents: function() {
          document.addEventListener('deviceready', this.onDeviceReady, false);
          document.addEventListener('chcp_updateLoadFailed', this.onUpdateLoadError, false);
        },

        onDeviceReady: function() {
        },

        onUpdateLoadError: function(eventData) {
          var error = eventData.detail.error;
          if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
              console.log('Native side update required');
              var dialogMessage = '发现新版本,即刻下载安装.';
              chcp.requestApplicationUpdate(dialogMessage, this.userWentToStoreCallback, this.userDeclinedRedirectCallback);
          }
        },

        userWentToStoreCallback: function() {
          console.log('谢谢更新');
        },

        userDeclinedRedirectCallback: function() {
          console.log('你确定不更新吗?')
        }
      };

      app.initialize();

3、ionic2+版本中无法找到chcp
应该说一遇到这样的情况,我们的第一反应是是否插件的js为调用,第二反应是这个是一个第三方插件,第三反应就是解决这个问题,必须先想到如何引入第三方插件!我之前写过一篇文章ionic2中引入自定义js文件或者引入第三方js文件
其中提到了declare,使用declare就可以设置第三方插件,不过这一次我们得先定义一个window的全局变量,然后再通过这个window去调用chcp这个对象。
因此在第二步骤中的代码中chcp对象,就必须要修改为window.chcp,这样才可以正确的运行。下面直接看ionic2中的代码,此处我直接截图,就不贴代码了!
请先在import后,export前加入下面代码:
declare var window;
做如下代码修改即可

ionic2 热更新

ionic2 热更新


4、测试是否生效
这里我依然使用的是xcode的ios模拟器,修改好了以后,直接运行ionic run ios的命令,然后运行在ios模拟器中。接着我们需要随便修改下tabs.html中的文字,修改了以后,我们再次运行

cordova-hcp build

紧接着,我们将项目目录下的www目录下的文件拷贝到服务器tabs目录下。
然后在ios模拟器中,按住shift+command,再次双击h键,然后kill当前的app,再次进行启动。你就可以看到提示升级的信息了,当你点击ok的时候,则跳转到了你自己设置的苹果 app store的软件地址。
如图:

app store update

app store update

app store update

app store update

2个 评论 关于 续:ionic中使用热更新插件cordova-hot-code-push

  1. 李升 says:

    “以下代码如果在纯phonegap的js应用中使用应该不会有问题,但是在ionic中,是会发生错误的,之后我会提到”

    请问在哪提到了?我刚好卡在这里了。谢谢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

88 + 5 = ?