黑马程序员技术交流社区

标题: 【上海校区】java-js知识库之六——cordova热更新配置 [打印本页]

---

作者: 不二晨    时间: 2019-1-4 09:42
标题: 【上海校区】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

2
3
4
5
6
或者命令行输入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
1
2
3
出现以上信息则表示安装成功。

二、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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
命令行输入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"
1
2
3
4
5
6
三、构建远程服务热更新

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

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

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

{
  "update": "start",
  "content_url": "http://yktzs.top/cordova/"
}
1
2
3
4


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
1
2
3
4
5
6
在www文件夹下会生成chcp.json和chcp.manifest两个文件。

chcp.json文件内容：

{
  "update": "start",
  "content_url": "http://yktzs.top/cordova/",
  "release": "2018.12.31-11.20.03"
}
1
2
3
4
5
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"
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
这个文件记录着文件的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>
1
2
3
4
5
第一个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>
1


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
1
2
3
4
5
6
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,否则只需将改动的代码发布到远程服务器即可。

---------------------
转载，仅作分享，侵删
作者：这是个什么
原文：https://blog.csdn.net/qq_37926711/article/details/85456904

---

作者: 不二晨    时间: 2019-1-10 10:28
奈斯，加油

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2