Cordova 热更新(Android)

研究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.重启应用即可发现更新我们修改后的效果
最后感谢那些无私的分享者,第一次写博客如有什么不妥地方望指教。
参考文章:
待研读

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
第一步、将 myApp 目录下 config.xml <chcp> <auto-download enabled="true" /> <auto-install enabled="true" /> <config-file url="http://192.168.1.34:8080/myApp/www/chcp.json" /> <local-development enabled="true" /> </chcp> 地址改为自己的地址。 第二步、将myApp\platforms\android\app\src\main\res\xml目录下 config.xml <chcp> <auto-download enabled="true" /> <auto-install enabled="true" /> <config-file url="http://192.168.1.34:8080/myApp/www/chcp.json" /> <local-development enabled="true" /> </chcp> 第三步、myApp\platforms\android\app\src\main\assets 目录下 .chcpenv { "content_url": "http://192.168.1.34:8080/myApp/www/", "config_url": "http://192.168.1.34:8080/myApp/www/chcp.json" } cordova-hcp.json { "autogenerated": true, "update": "start", "content_url": "http://192.168.1.34:8080/myApp/www/" } 的 地址改为自己的 地址 第四步、将android项目导入Android Studio 第五步、 myApp\platforms\android\app\src\main\assets 目录下 执行 cordova-hcp build 命令后将www 目录下的所有文件拷贝到你自己的 文件服务器上。 第六步、启动服务器 第七步、发布安装app程序。 第八步、修改www目录下的文件信息,重新执行第五步。 第七步、再次打开app程序("update": "start",需两次)。 cordova-hcp.json { "autogenerated": true, "update": "start", "content_url": "http://192.168.1.34:8080/myApp/www/" } start - app启动时安装更新. 默认值. resume - app从后台切换过来的时候安装更新. now - web内容下载完毕即安装更新. 注意:网站的路径
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值