cordova热更新插件的使用

  • 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.manifestchcp.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 ,让你的思维流动起来 !

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值