Cordova vue 搭建app混合开发环境 - cordova 热更新 - 《app 开发》

添加插件到项目中
- cordova-hot-code-push-cli">2、下载插件的命令行工具 cordova-hot-code-push-cli
- 3、添加cordova-hcp.json文件
  - 执行时将要求您从命令行中填写一些项目首选项：
- 4、在www文件下生成chcp.json 和 chcp.manifest文件
5. 修改config.xml
更新App
- 1、config.xml 配置中定义native side 版本号
- 2、添加JS代码

添加插件到项目中

1、下载插件
要求 Cordova 版本 5.0+

cordova plugin add cordova-hot-code-push-plugin --save

2、下载插件的命令行工具 cordova-hot-code-push-cli

npm install -g cordova-hot-code-push-cli

该命令行工具可帮助我们自动生成配置文件 chcp.json 和 chcp.manifest，同时还提供了一些其他功能，详细可参考其 README。
如果安装失败请使用下面命令重新安装

sudo npm install -g cordova-hot-code-push-cli --unsafe-perm=true --allow-root

3、添加cordova-hcp.json文件

此文件是用于方便生成www文件下chcp.json文件的内容。
执行命令（必须在项目根目录执行更新工具的命令）

cordova-hcp init

生成的默认应用程序配置文件(cordova-hcp.json)在项目根文件夹中。

执行时将要求您从命令行中填写一些项目首选项：

Project name: 你现在的项目名称所需.
Amazon S3 Bucket name:亚马逊上的S3桶的名字。可以跳过。
Amazon S3 region: 亚马逊S3地区。可以跳过。
iOS app identifier: 应用程序商店的应用程序ID。App升级是跳转应用商店进行升级。
Android app identifier: 可以App在应用商城的地址，或者是apk的下载地址。
Update method: 何时执行更新。
- start: 在启动应用程序时安装更新。
- resume: 在恢复应用程序(从背景移动到前景状态)或启动时，安装更新；默认使用。
- now: 从服务器加载更新后立即安装。

cordova-hcp.json文件内容：

{
  "name": "",//可为空
  "autogenerated": true,//如果不添加，热更新会不能使用
  "ios_identifier": "id123456789",//应用在App store id(可为空)
  "android_identifier": "",//应用在应用商城上的地址或者App的下载地址(可为空)
  "update": "start",//在应用启动时安装
  "min_native_interface": 1,//可用以做App升级（可以不填)
  "content_url":
  "http://************/cordova/www"//www文件在服务器上的地址
}

通过在根目录执行 cordova-hcp build 在 www 根目录自动生成 chcp.manifest 文件和chcp.json

4、在www文件下生成chcp.json 和 chcp.manifest文件

chcp.json: 包含发布相关信息：热更新代码版本号，应用 native side 版本号等等
chcp.manifest: 包含项目热更新代码(静态)文件信息：文件名和文件哈希值

执行命令

cordova-hcp build

执行此命令会在chcp.json文件中增加"release":"当前时间"字段。（默认使用时间戳，格式为：yyyy.MM.dd-HH.mm.ss），插件将版本号进行字符串相等比较来判断是否存在新版本。

"release": "2017.06.07-16.30.20",//唯一web项目版本号,用与热更新web内容的更新。（必需）

5. 修改config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.zhuke_merchant" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    增加下面的代码
    <chcp>
        <auto-download enabled="true" />
        <auto-install enabled="true" />
        <native-interface version="1" />
        <config-file url="http://zhuke-api.card.nmgjoin.com/download/merchant_app/latest/www/chcp.json" />
    </chcp>
</widget>

更新App

其实完成上面步骤，就可以实现热更新功能了。但是当我们增加了cordova插件或者原生中添加了第三方库等，需要对App升级。那么这个时候就要去对应的商城下载apk（苹果去app store升级）因此还需要下面的配置。

1、config.xml 配置中定义native side 版本号

<chcp>
    <native-interface version="5" />
</chcp>

此配置会与服务器上配置文件 chcp.json 中的 min_native_interface 值作比较。

两个值相同，不提示升级，但是网页内容可以更新。
如果大于服务器上的值，不会提醒更新，但是网页内容可以更新。
小于服务上的值，提示应用需要更新升级，那么热更新将无法正常进行。
2、添加JS代码

document.addEventListener('deviceready', () => {
    let chcp = window.chcp;
    // 检测更新
    chcp.fetchUpdate((error, data) => {
      if (error) {
        console.log('--更新版本异常，或其他错误--', error.code, error.description);
        if (error.code === -2) {
          var dialogMessage = '有新的版本是否下载';
          //调用升级提示框 点击确认会跳转对应商店升级
          chcp.requestApplicationUpdate(dialogMessage, null, null);
        }
      }
      // 服务器版本信息
      // console.log('--更新的版本信息--', data.config);
      // 版本信息
      chcp.getVersionInfo((err, data) => {
        console.log('服务器应用时间版本: ' + data.readyToInstallWebVersion);
        console.log('当前应用时间版本： ' + data.currentWebVersion);
        console.log('当前应用version name: ' + data.appVersion);
      });
    });
  });

如果当前APP中的<native-interface version="1"/>低于服器上chcp.json中min_native_interface的值，那么执行热更新就会提示错误：chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW，返回的异常码为-2。这个时候我们应当提示用户前往应用商店对APP进行升级。

需要注意的是，如果弹出的升级提示框点击确认的跳转对应平台升级app的地址，是我们在cordova-hcp.json中填写的地址；如果点击了取消，那么就不会升级，并且网页的热更新功能也将失效，除非升级为最新的apk。

cordova 热更新