研究Cordova一段时间了,其中酷毙(苦逼)的学习真实无fuck说,官方文档,中文,各种度娘,各种验证,没办法学习就是积累的过程鉴于学习过程的艰辛,想想还有更多的Cordova学习者的困扰,便开始写文章,希望能给一些人的帮助。由于本人是Android开发的,研究混合开发,必然要着重几个点
一、cordova环境配置
二、cordova组件开发(自定义组件)
三、打包
四、热更新
五、javascript的基本学习
今天主要记录cordova热更新插件的学习
![](https://i-blog.csdnimg.cn/blog_migrate/0e1ba5fbff5ba858d0d576068aea6a5a.png)
1、创建项目
cordova create CordovaHotCode
![](https://i-blog.csdnimg.cn/blog_migrate/eb20a21a04d88bda5b7c79d0c192a4c4.png)
2、添加android平台(要在创建项目的根目录下否则会报错)
cordova platform add android
cordova platform add ios
![](https://i-blog.csdnimg.cn/blog_migrate/34f07bd5d94469d78548cdba1df6746e.png)
![](https://i-blog.csdnimg.cn/blog_migrate/1cf248f38f1311e0c4da28608bc1bf48.png)
添加后会在项目根目录下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 警告可以忽略
![](https://i-blog.csdnimg.cn/blog_migrate/9b95d2ed8f768c0f8ba9823db8773d61.png)
5.配置config.xml(注意是项目根目录下的config.xml)
在没有配置之前我们执行一下 cordova build 命令
![](https://i-blog.csdnimg.cn/blog_migrate/a9fb21fe727964b75cf297e0edc7f997.png)
会提示 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
会显示如下结果:
![](https://i-blog.csdnimg.cn/blog_migrate/46771604b6a2cf04e6b871fa9a76b07f.png)
接下来生成本地的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 文件)
在研究过程中这个卡了好久,这个本地服务非常重要,执行后结果
![](https://i-blog.csdnimg.cn/blog_migrate/29eaf6bfd09693a2d5a66acf4c50663f.png)
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"
}
![](https://i-blog.csdnimg.cn/blog_migrate/dc28a4b47fe3788351794c51d3d77331.png)
chcp.manifest
开始测试
![](https://i-blog.csdnimg.cn/blog_migrate/f9abbb3460a27b9c193916c8d86853fc.png)
![](https://i-blog.csdnimg.cn/blog_migrate/5b5ea4b81b2709f33fad5d5a80030481.png)
cordova run 安装apk
安装后效果
![](https://i-blog.csdnimg.cn/blog_migrate/633d3c5c47ed7517f521cbca686d195e.png)
开始更改inidex.xml 文件
注意根目录下文件的时间变化
更改前:
![](https://i-blog.csdnimg.cn/blog_migrate/a58b84388d4d70c0dff9d2233aacb476.png)
更改后:
![](https://i-blog.csdnimg.cn/blog_migrate/b08a2b7c40d8682a85b3f5312fb614e7.png)
修改www下的文件 ,chcp.json 和chcp.mainifest文件随之更新
打开chcp.json 发现content_url被重写,我们要更改回来
![](https://i-blog.csdnimg.cn/blog_migrate/0ad757b623cf682f5cef0d0afd53c1c3.png)
![](https://i-blog.csdnimg.cn/blog_migrate/84248dc8820d9db6f2a2738b0af6dff1.png)
然后重新打开应用结果更新为:
![](https://i-blog.csdnimg.cn/blog_migrate/fd7b835ad540ce1655ef681869377f95.png)
重要的事情强调三遍
注意修改 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文件
![](https://i-blog.csdnimg.cn/blog_migrate/b352fd33ed94427fbbefa351dc646943.png)
最后总结:步骤
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.重启应用即可发现更新我们修改后的效果
最后感谢那些无私的分享者,第一次写博客如有什么不妥地方望指教。
参考文章:
待研读