ionic3从入门到精通(内含BUG修复)我的 ionic

ionic热更新

2017-02-23  本文已影响1709人  cl9000

简介

关于Cordova的热更新问题，国内的资料比较少，许多博客上都是胡乱的抄袭，准确性极低，无任何实用性，并且步骤不够完整，在此亲手测试了一下，并整理详细的步骤以供备忘和参考。

热更新的好处

通常ionic源码可包括（HTML，JavaScript，CSS文件和其他资源），
通过cordova热更新插件cordova-hot-code-push-plugin来是实现客户端的代码热更新。
避免了之前更改代码后重新打版再提交至应用商店审核的流程，实现后台动态更新代码
热更新原理图（扒来的。。。图不孬，有助理解）


内壳更新

基本的配置步骤

5、 配置config.xml文件
在config.xml文件中添加以下代码:
<chcp> <native-interface version="1" /> <config-file url="http://192.168.1.101:9999/www/chcp.json" /> </chcp>
&注意：url为你服务器中更新文件的地址/ chcp.json
&注意：内壳更新 要把cordova-hcp.json和config.xml中的 版本号设置为一样的

6、完成以上准备，开始测试 热更新(html、css或js等资源的动态更新，即内壳更新）
执行下面：

在此，随便改下就可以

这是我的我的临时搭建Python地址 ：http://192.168.1.101:9999


热更新完成后日志如下:


到此内壳更新就结束了，在这总结下可能会遇到的问题:
一、chcp.json和config.xml中的服务器的地址不要写错,chcp.json中的地址：服务器上更新文件的地址；config.xml中的地址：服务器上更新文件的地址+chcp.json
二、首次要先在服务器上打个初始版本，流程如下：

即生成平台-->模板生成chcp文件-->编译到各个平台-->上传www到服务器-->运行应用--->修改内容--> 模板重新生成chcp文件-->上传www文件覆盖旧的--->运行应用--->查看更新

三、服务器保证通的通的、、、
四、再不中看这 -坑眼-https://github.com/nordnet/cordova-hot-code-push/issues/223

外壳更新

描述

这个外壳更新有点强制化，比如你在使用应用时，突然弹出个pop,提示你有新的版本更新了，人性化点的还有个取消按钮；强制性的就确定后直接跳转到AppStore了。这在你自己怎么设置了。
像原生的版本更新就没有强制；如你打版提交审核上架了，客户端也就仅在appStore商店有个更新提醒，更不更在客户了。

外壳更新配置

上面的内壳更新整好后，这就比较简单了，因该配的已配置好，只在这改改某些属性就可以

通过min_native_interface监控app是否提示更新

所需最小的外壳app版本. 这是app的build版本号，是个整型数字, 不是应用商店中看到的形如”1.0.0”字符串。

在 config.xml中，这样指定build版本号，例如：app外壳里的config.xml是这样的：

    <chcp>
        <native-interface version="1" />
        <config-file url="http://192.168.191.2:9999/www/chcp.json" />
    </chcp>

与www目录下的cordova-hcp.json/chcp.json里面的min_native_interface数值相对应，

若服务器里的min_native_interface也对应是1，就不会出现提示用户升级版本的状态（即外壳更新），正常修改www目录的内容通过更新release值，和客户端进行对比，可实现热更新（即内壳更新）。

{
  "autogenerated": true,
  "name": "bankapp",
  "min_native_interface": 1, //最小内核版本号
  "content_url": "http://192.168.191.2:9999/www",
  "ios_identifier": "https://itues.apple.com/cn/***", //打版提交App Store下载的地址
  "update": "now",
  "release": "2017.02.23-12.53.32"
}

假设你的外壳app加了个新的插件或文件，应该会更新外壳app。为了防止用户通过热更新下载了不适合他现有外壳app的web内容，应该设置下 min_native_interface 的值
下面我们将 min_native_interface 的值改为 2

{
  "autogenerated": true,
  "name": "bankapp",
  "min_native_interface": 2, //最小支持的外壳app版本
  "content_url": "http://192.168.191.2:9999/www",
  "ios_identifier": "https://itues.apple.com/cn/***", //打版提交App Store下载的地址
  "update": "now",
  "release": "2017.02.23-12.53.32"
}

热更新插件加载到这段json的时候, 发现 min_native_interface 比当前外壳app的build号要大，便不会下载web内容。而是触发一个chcp_updateLoadFailed 错误通知, 告诉用户需要升级外壳app版本了。

此属性将与config.xml中的native-interface进行对比，如果发现两者不同时，将会触发相应的事件，比如，手机端app中config.xml的native-interface值比服务器上的chcp.json文件中的min_native_interface值小时，将会触发’chcp_updateLoadFailed’事件，同时，错误代码为：
chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW 通过这个错误码调用js端监听相应事件通过弹窗提示用户去升级，跳转到AppStore或下载新安装包。

具体步骤

1、导入插件。外壳（版本号）的更新需要导入另外3个插件
cordova-plugin-file、cordova-plugin-file-transfer、cordova-plugin-file-opener2

导入命令：```
$ cordova plugin add cordova-plugin-file
$ cordova plugin add cordova-plugin-file-transfer
$ cordova plugin add cordova-plugin-file-opener2

> 2、添加代码-弹框-跳转至商店更新 **& ios_identifier为要跳转的地址**
> 将下面的代码放到 .run function中启动时就调用（看自己怎么封装的，我封到router中了）如图:
> ![](http://upload-images.jianshu.io/upload_images/4665802-c8d20aa8c0413f8c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
 `min_native-interface`将与config.xml中的`native-interface`进行对比、如果两者不同、将会触发`'chcp_updateLoadFailed'`事件。同时、错误代码为：
`chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW`，返回值为-2，那么就会执行下面的代码，弹框提示更新了。

>  ```
var appUpdate = {
        // Application Constructor
        initialize: function() {
            this.bindEvents();
        },
        // Bind any events that are required.
        // Usually you should subscribe on 'deviceready' event to know, when you can start calling cordova modules
        bindEvents: function() {
            document.addEventListener('deviceready', this.onDeviceReady, false);
            document.addEventListener('chcp_updateLoadFailed', this.onUpdateLoadError, false);
        },
        // deviceready Event Handler
        onDeviceReady: function() {
        },
        onUpdateLoadError: function(eventData) {
            var error = eventData.detail.error;
            
            // 当检测出外核版本有更新，// 针对不同平台进行相应更新操作
            if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
                var dialogMessage = '有新的版本,请下载更新';
                
                // iOS端 直接弹窗提示升级，点击ok后自动跳转
                if(ionic.Platform.isIOS()){
                    chcp.requestApplicationUpdate(dialogMessage, this.userWentToStoreCallback, this.userDeclinedRedirectCallback);
                //Android端 提示升级下载最新APK文件 
                } else if(ionic.Platform.isAndroid()){
                    //这儿放Android端更新代码...，在下面👇
                }
            }
        },
        userWentToStoreCallback: function() {
            // user went to the store from the dialog
        },
        userDeclinedRedirectCallback: function() {
            // User didn't want to leave the app.
            // Maybe he will update later.
        }
    };
    appUpdate.initialize();

Android端添加代码👆 提示升级下载最新APK文件

var confirmPopup = $ionicPopup.confirm({
  template: '有新的版本,请下载更新',
  cssClass: 'popup',
  cancelText:'取消',
  okText:'升级'
});
confirmPopup.then(function (res) {
  if (res) {
    $ionicLoading.show({
      template: "已经下载：0%"
    });
    window.resolveLocalFileSystemURL(cordova.file.externalRootDirectory, function(fileEntry) {
      fileEntry.getDirectory("***(app名称)", { create: true, exclusive: false }, function (fileEntry) {
        //下载代码
        var fileTransfer = new FileTransfer();
        fileTransfer.download("app下载地址", fileEntry.toInternalURL()+"***(app名称).apk", function(entry) {
          // 打开下载下来的APP
          cordova.plugins.fileOpener2.open(
            entry.toInternalURL(),//下载文件保存地址
            'application/vnd.android.package-archive', {//以APK文件方式打开
              error: function(err) {
              },
              success: function() {}
            });
        }, function(err) {
        },true);
        fileTransfer.onprogress = function(progressEvent) {
          $timeout(function () {
            var downloadProgress = (progressEvent.loaded / progressEvent.total) * 100;
            $ionicLoading.show({
              template: "已经下载：" + Math.floor(downloadProgress) + "%"
            });
            if (downloadProgress > 99) {
              $ionicLoading.hide();
            }
          });
        };
      },function(err){alert("创建失败")});
    });
  }
});
chcp.json中update字段含义

指定了什么时候安装web内容更新，支持的值有：

start - app启动时安装更新，默认值
resume - app从后台切换过来的时候安装更新
now - web内容下载完毕即安装更新

好了，先总结这么多，可能会有些细节落下，望大家参考时，给我提下，我在继续补充。

上一篇 下一篇

猜你喜欢

热点阅读