cordova热更新插件的使用

最新推荐文章于 2024-08-10 07:25:35 发布

_朱志强

最新推荐文章于 2024-08-10 07:25:35 发布

阅读量1.5w

点赞数

分类专栏：前端文章标签： cordova

本文链接：https://blog.csdn.net/zhuzhiqiang_zhu/article/details/53608398

版权

前端专栏收录该内容

43 篇文章 0 订阅

订阅专栏

cordova常用命令
cordova plugin add plugin_name --save
cordova plugin rm plugin_id --save
cordova platform add android|ios|windows --save
cordova platform rm android|ios|windows --save

##添加插件
说明：在这个步骤里面，以下的命令需要在项目根目录下执行

新建Cordova项目
cordova create project_name package_id
cordova create CordovaHotCode com.ezample.hotcode
添加android平台
- cordova platform add android --save
添加iOS平台
cordova platform add ios --save
添加自动更新插件
cordova plugin add cordova-hot-code-push-plugin --save
添加cordova hot code push客户端，用于生成www目录下文件的hash码，更新的时候对比使用。(注意：安装过就不用在安装了)
npm install -g cordova-hot-code-push-cli
使用方法，在项目根目录下面执行cordova-hcp build,这个工具会把根据根目录下的 www 目录内容生成 chcp.manifest 和 chcp.json 2个文件，chcp.json 这个文件里面包含了更新方式、内容地址、release版本等内容，chcp.manifest 文件是记录了每个文件对应的hash码，用于比对，实现增量更新

##配置插件：
修改config.xml

修改内容如图：
这里写图片描述

//代码为
<chcp>
     <auto-download enabled="true" />
     <auto-install enabled="true" />      
     <config-file url="http://172.16.1.245:8080/cordova-hot-update/cordova/www/chcp.json" />
</chcp>

auto-download：自动下载
auto-install：下载完成后自动安装,就是下载完成之后立即重新加载页面
config-file：chcp.json在服务器的地址

说明：
一般情况下，auto-download 和 auto-install是设成false的，然后通过代码的方式调用，比如在设置功能中的检查更新，或者在应用启动后，如果有新的版本，给用户一个提示，是否安装新的更新(这个时候已经把改变的文件下载到本地了，插件会复制一份当前使用的 www 文件，然后把下载的增量文件复制到 www 中，然后把 webview 的地址指向这个新的)

##正式开始：
要按照下面的顺序做

1.在项目的根目录下新建一个文件，cordova-hcp.json

{ 
  "update": "start", 
  "content_url": "http://192.168.40.203:8080/cordova/www" 
}

2.执行 cordova-hcp build，生成比对文件

3.执行 cordova prepare

这句话的作用是把项目根目录下的www文件的内容复制到android下的assets目录，或者 iOS项目下的 www 目录

上面执行完之后，可以将项目导入到android studio中或者直接在根目录执行cordova build,然后在CordovaHotCode\platforms\android\build\outputs\apk这个目录下生成了apk文件，直接安装就行。

4.将项目根目录下的 www 文件上传到服务器，这一步如果不做的话，应用启动后就崩溃了。www目录上传的地址是 http://192.168.40.203:8080/cordova/(本例子中的地址，实际情况要根据你自己应用配置)

##代码调用插件方法

//说明：这里的使用了Framework7
chcp.fetchUpdate(function(error, data) {
		if(!error) {
			myApp.modal({
				title: "提示",
				text: "有更新，确定更新吗?",
				buttons: [{
					text: '不更新'
				}, {
					text: "立即更新",
					onClick: function() {
						 myApp.showPreloader('正在升级，升级完毕应用将自动重启...');
						chcp.installUpdate(function(error) {
							myApp.alert("更新完成", ["提示"]);
						})
					}
				}]
			})
		} else {
			myApp.alert("你当前是最新版本", ["提示"]);
		}
	})

欢迎大家关注 AngularFlow ，让你的思维流动起来！