java-js知识库之六——cordova热更新配置

本篇将记录cordova的热更新配置

一、安装热更新客户端

命令行输入npm install -g cordova-hot-code-push-cli，本人已安装，不做截图，安装完成后命令行输入npm list -g --dept 0查看npm全局安装的插件。

C:\Users\Administrator>npm list -g --dept 0
C:\Users\Administrator\AppData\Roaming\npm
+-- cnpm@6.0.0
+-- cordova@7.0.1
+-- cordova-hot-code-push-cli@1.1.1
`-- http-server@0.11.1

或者命令行输入npm ls cordova-hot-code-push-cli -g查看插件信息。

C:\Users\Administrator>npm ls cordova-hot-code-push-cli -g
C:\Users\Administrator\AppData\Roaming\npm
`-- cordova-hot-code-push-cli@1.1.1

出现以上信息则表示安装成功。

二、cordova项目添加热更新插件

进入cordova项目，命令行输入cordova plugin add cordova-hot-code-push-plugin。

D:\>cd java/android/test

D:\java\android\test>cordova plugin add cordova-hot-code-push-plugin
Installing "cordova-hot-code-push-plugin" for android
Installing dependency packages:
{
  "xml2js": "^0.4"
}
Checking cordova-hcp CLI client...
---------CHCP-------------
To make the development process easier for you - we developed a CLI client for our plugin.
To install it, please, use command:
npm install -g cordova-hot-code-push-cli
For more information please visit https://github.com/nordnet/cordova-hot-code-push-cli
--------------------------
Android Studio project detected
Subproject Path: CordovaLib
Subproject Path: app
Adding cordova-hot-code-push-plugin to package.json
Saved plugin info for "cordova-hot-code-push-plugin" to config.xml

命令行输入cordova plugin ls查看项目中安装的插件。

D:\java\android\test>cordova plugin ls
cordova-hot-code-push-plugin 1.5.3 "Hot Code Push Plugin"
cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-geolocation 4.0.1 "Geolocation"
cordova-plugin-whitelist 1.3.3 "Whitelist"

三、构建远程服务热更新

本地热更新不作赘述，直接搭建远程服务热更新。

3.1 远程热更新json文件模板配置

在项目下创建cordova-hcp.json文件，该文件为热更新客户端生成chcp.json文件的模板，指向远程服务器路径，热更新的大致流程在最后会重新梳理一遍：

{
  "update": "start",
  "content_url": "http://yktzs.top/cordova/"
}

3.2 使用热更新客户端生成文件

项目下命令行输入cordova-hcp build

D:\java\android\test>cordova-hcp build
Running build
Config { update: 'start',
  content_url: 'http://yktzs.top/cordova/',
  release: '2018.12.31-11.20.03' }
Build 2018.12.31-11.20.03 created in D:\java\android\test\www

在www文件夹下会生成chcp.json和chcp.manifest两个文件。

chcp.json文件内容：

{
  "update": "start",
  "content_url": "http://yktzs.top/cordova/",
  "release": "2018.12.31-11.20.03"
}

chcp.manifest文件内容：

[
  {
    "file": "css/index.css",
    "hash": "e46d9a1c456a9c913ca10f3c16d50000"
  },
  {
    "file": "img/logo.png",
    "hash": "7e34c95ac701f8cd9f793586b9df2156"
  },
  {
    "file": "index.html",
    "hash": "7d4be3f13816fa94380017117d8af22f"
  },
  {
    "file": "js/index.js",
    "hash": "f82b8d9ef708afe9bfb0a9a204414478"
  }
]

这个文件记录着文件的hash值，这两个文件是在项目中，打包放入apk中，后续会在远程服务器创建chcp.json文件，app每次启动时会比较文件中的时间戳，若不相同，app则会找到chcp.manifest文件，自动更新。

3.3 修改config.xml

在配置文件中添加：

<chcp>
        <auto-download enabled="true" />
        <auto-install enabled="true" />
        <config-file url="http://yktzs.top/cordova/chcp.json" />
    </chcp>

第一个true表示自动下载，第二个true表示自动安装更新，第三个路径表示从哪里下载，json文件稍后会说，先来张截图：

3.4 远程服务器文件配置

将www文件夹下的所有文件放入http://yktzs.top/cordova/目录下

3.5 打包apk

命令行输入 cordova build android 打包apk,打开app,界面如下：

3.6 修改页面

在www文件夹下修改index.html。

<p style="font-size:30px;">CORDOVA热更新</p>

3.7 测试热更新

现在只需重复3.2和3.4即可，

3.7.1 项目下命令行输入cordova-hcp build

D:\java\android\test>cordova-hcp build
Running build
Config { update: 'start',
  content_url: 'http://yktzs.top/cordova/',
  release: '2018.12.31-11.44.41' }
Build 2018.12.31-11.44.41 created in D:\java\android\test\www

3.7.2 将生成的文件放入远程服务器。

3.7.3 重新打开app

我的服务器比较渣，更新很慢，如果出现页面没有更新，就退出app重新打开，多等待一段时间，再重新打开。如果服务器很好，是不会出现这种情况的。
最后，再将cordova热更新的流程梳理一遍吧。
每次打开app时，app会找到config.xml文件中config-file标签的url路径(即远程服务器的chcp.json)，如果apk内部的chcp.json中的时间戳(release)与远程服务器中的chcp.json时间戳(release)不同，就会触发热更新，app会自动下载远程服务器的内容实现热更新。
语言功底不行，但大致就是这么个意思吧，现在大部分混合开发都使用了热更新，非常方便，除非是必须给壳增加插件才要重新打包apk,否则只需将改动的代码发布到远程服务器即可。
本篇到此结束，这篇写了一个多小时，也重新将热更新做了一遍，待会记录一篇关于oracle数据库优化的，只有一点东西，怕以后忘记，发了再说，下午还会记录一篇关于cordova本地推送的插件。