研究Cordova一段时间了,其中酷毙(苦逼)的学习真实无fuck说,官方文档,中文,各种度娘,各种验证,没办法学习就是积累的过程鉴于学习过程的艰辛,想想还有更多的Cordova学习者的困扰,便开始写文章,希望能给一些人的帮助。由于本人是Android开发的,研究混合开发,必然要着重几个点
一、cordova环境配置
二、cordova组件开发(自定义组件)
三、打包
四、热更新
五、javascript的基本学习
今天主要记录cordova热更新插件的学习
1、创建项目
cordova create CordovaHotCode
2、添加android平台(要在创建项目的根目录下否则会报错)
cordova platform add android
cordova platform add ios
添加后会在项目根目录下platforms出现android平台
3、添加自动更新插件
cordova plugin add cordova-hot-code-push-plugin
4、添加cordova hot code push客户端,用于生成www目录下文件的hash码,更新的时候对比使用。
npm install -g cordova-hot-code-push-cli
添加成功 有WARN 警告可以忽略
5.配置config.xml(注意是项目根目录下的config.xml)
在没有配置之前我们执行一下 cordova build 命令
会提示 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
会显示如下结果:
接下来生成本地的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 文件)
在研究过程中这个卡了好久,这个本地服务非常重要,执行后结果
Running server
启动服务
Checking: E:\CordovaProject\CordovaHotCode\www
检验项目目录下的www 文件
local_url http://localhost:31284
本地加载的地址
build 后生成的文件在www目录下
上面这个地址非常重要 public server availalbe 这个就是服务器地址,客户端会到这个地址查找对比文件 这个地址我们要替换成自己的地址
在chcp.json 中替换成我们自己的地址
注意每次 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"
}
chcp.manifest
开始测试
cordova run 安装apk
安装后效果
开始更改inidex.xml 文件
注意根目录下文件的时间变化
更改前:
更改后:
修改www下的文件 ,chcp.json 和chcp.mainifest文件随之更新
打开chcp.json 发现content_url被重写,我们要更改回来
然后重新打开应用结果更新为:
重要的事情强调三遍
注意修改 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文件
最后总结:步骤
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.重启应用即可发现更新我们修改后的效果
最后感谢那些无私的分享者,第一次写博客如有什么不妥地方望指教。
参考文章:
待研读