研究Cordova一段时间了,其中酷毙(苦逼)的学习真实无fuck说,官方文档,中文,各种度娘,各种验证,没办法学习就是积累的过程鉴于学习过程的艰辛,想想还有更多的Cordova学习者的困扰,便开始写文章,希望能给一些人的帮助。由于本人是Android开发的,研究混合开发,必然要着重几个点
一、cordova环境配置
二、cordova组件开发(自定义组件)
三、打包
四、热更新
五、javascript的基本学习
今天主要记录cordova热更新插件的学习
Cordova 热更新(Android)
1、创建项目
cordova create CordovaHotCode
Cordova 热更新(Android)

2、添加android平台(要在创建项目的根目录下否则会报错)
cordova platform add android
cordova platform add ios
Cordova 热更新(Android)Cordova 热更新(Android)
添加后会在项目根目录下platforms出现android平台

Cordova 热更新(Android)

3、添加自动更新插件
cordova plugin add cordova-hot-code-push-plugin

Cordova 热更新(Android)

4、添加cordova hot code push客户端,用于生成www目录下文件的hash码,更新的时候对比使用。
npm install -g cordova-hot-code-push-cli
添加成功 有WARN 警告可以忽略
Cordova 热更新(Android)
5.配置config.xml(注意是项目根目录下的config.xml)
在没有配置之前我们执行一下 cordova build 命令
Cordova 热更新(Android)

会提示 CHCP plugiin after perpare hook:congfig-file preference is not set
个人理解:其实热更新的原理就是通过本地文件与服务器文件做对比 发现新的版本然后到服务器指定位置(项目/www)下载新的文件实现个更新,因此必须打包的配置中要找到这个对比文件,相信大家有所领悟配置文件全局的部分平台那就是根目录下的config.xml中
以上步骤可以随意百度到,或者到github 上查看

<chcp>
<auto-download enabled="true" />
<auto-install enabled="true" />
<config-file url="http://192.168.1.68:8020/Hot/www/chcp.json" />
</chcp>
<config-file url="http://192.168.1.68:8020/Hot/www/chcp.json" />
这个就是服务端对比文件的地址
配置config.xml完后执行cordova build
会显示如下结果:
Cordova 热更新(Android)

接下来生成本地的chcp.json 文件
5和6的顺序不能颠倒 否则chcp.json 文件不会生成content-url,和 update 参数
{
"autogenerated": true,
"release": "2017.12.06-22.46.15"
}
6.开启本地服务
重新打开一个命令行窗口
cordova-hcp server(执行命令要在项目的根目录下进行否则不能文件改动不能正常生成chcp.json 和chcp.manifest 文件)
在研究过程中这个卡了好久,这个本地服务非常重要,执行后结果
Cordova 热更新(Android)
Running server 启动服务
Checking: E:\CordovaProject\CordovaHotCode\www 检验项目目录下的www 文件
local_url http://localhost:31284 本地加载的地址
build 后生成的文件在www目录下
上面这个地址非常重要 public server availalbe 这个就是服务器地址,客户端会到这个地址查找对比文件 这个地址我们要替换成自己的地址
在chcp.json 中替换成我们自己的地址

Cordova 热更新(Android)

注意每次 www中文件变化 后content_url 会被覆盖,要在复制www文件到服务端前修改content_url

执行完cordova-hcp server 项目\www 目录下成功chcp.json 和chcp.manifest 文件
chcp.json 文件如下,
release 是文件更新时间,移动端会根据这个时间进行比较
"content_url": "https://c94aeec5.ngrok.io", 如果有更新则到服务端该地址下载www 文件夹的所有文件
"update": "now" now 更新类型,立即更新
{
"autogenerated": true,
"release": "2017.12.06-19.55.29",
"content_url": "https://c94aeec5.ngrok.io",
"update": "now"
}
Cordova 热更新(Android)
chcp.manifest




开始测试
Cordova 热更新(Android)
Cordova 热更新(Android)
cordova run 安装apk
安装后效果
Cordova 热更新(Android)
开始更改inidex.xml 文件

Cordova 热更新(Android)

注意根目录下文件的时间变化
更改前:
Cordova 热更新(Android)
更改后:
Cordova 热更新(Android)

修改www下的文件 ,chcp.json 和chcp.mainifest文件随之更新
打开chcp.json 发现content_url被重写,我们要更改回来
Cordova 热更新(Android)
Cordova 热更新(Android)
然后重新打开应用结果更新为:
Cordova 热更新(Android)

重要的事情强调三遍

注意修改 chcp.json 文件下的content_url
注意修改 chcp.json 文件下的content_url
注意修改 chcp.json 文件下的content_url

在 执行 cordova build 命令前保证 cordova-hcp server 运行,否则无法生成
chcp.json 和chcpmainifest.json 文件


后来发现原因是执行了cordova-hcp build 后会重置chcp.json文件,为了不让content-url 每次执行cordova-hcp build 后被覆盖,方便以后操作我们在根目录下创建cordova-hcp.json文件
Cordova 热更新(Android)

最后总结:步骤
1.创建cordova项目 cordova create CordovaHotCode
2.在创建的项目下添加androd 平台 cordova platform add android
3.添加自动更新插件 cordova plugin add cordova-hot-code-push-plugin
4.添加cordova hot code push客户端,npm install -g cordova-hot-code-push-cli
用于生成www目录下文件的hash码,更新的时候对比使用。
5.配置config.xml(注意是项目根目录下的config.xml)
<chcp>
<auto-download enabled="true" />
<auto-install enabled="true" />
<config-file url="http://192.168.1.68:8020/Hot/www/chcp.json" />
</chcp>
6.开启本地服务 重新打开一个命令行窗口 cordova-hcp server
(执行命令要在项目的根目录下进行否则不能文件改动不能正常生成chcp.json 和chcp.manifest 文件)
7.chcp.json 文件下的content_url
{
"autogenerated": true,
"release": "2017.12.06-22.07.23",
"content_url": "http://192.168.1.68:8020/Hot/www",
"update": "now"
}
8.cordova build 生成apk
9.cordova run 安装apk
10.修改根目录下www 中的index.xml
<div class="app">
<h1>Apache Cordova Success</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
11.重新检查chcp.json 文件发现content_url 地址发生变化,修改成我们的服务器地址,每次修改很麻烦所以
(在项目根目录下创建cordova-hcp.json 修改www文件后要 执行 cordova-hcp build,原因我们修改文件后,cordova server 会自动执行初始化我们的配置,我们需要执行cordova-hcp build会将我们的配置再次更新到cordova-hcp.json中)
12.将项目根目录www 文件拷贝覆盖到我们服务器工程下www
13.重启应用即可发现更新我们修改后的效果
最后感谢那些无私的分享者,第一次写博客如有什么不妥地方望指教。
参考文章:
待研读

相关文章: