博主最新文章
博主热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Cordova应用的热更新 - 简书
Cordova应用的热更新
这里我只做简单记述我的整个过程防止以后忘记，择日记录到自己的网站上面。如果看不懂不要紧，过几天我会详细写完放在自己网站上。
先附一个兄弟写的连接:
好，进入主题：
npm install -g cordova-hot-code-push-cli 安装命令
ionic plugin add cordova-hot-code-push-plugin 我们的热更新插件
ionic plugin add cordova-hot-code-push-local-dev-addon 热更新辅助插件
第二步骤:准备图片做的东西
F0EB3E0A-7A7D-446A-8B4C-ED84DF93A943.png
7C9C1797-9EEA-478D-B867-799CED4831FC.png
A8B277FA-5959-4AAB-8570-ACD08D7848EF.png
第三步骤:打包页面的东西打上时间戳
1.这里我会执行ionic build serve(或者ionic serve)这样www文件下就有我们打包的文件了
DD7D8DED-F0A1-40BB-AC7A-36D51E7D3BC7.png
2.在www/目录下生成chcp.json 和 chcpmanifest.json
DFF6-4ABC-A55E-3E333D4296DC.png
37A5D6CD-FDB4-B-B0DC304B3A29.png
第四步骤:替换服务器上面的文件
这里我们只做了一个本地服务器，供我们测试使用，大家随意
5B0520BA-2CF0-41E4-B9D1-1CE6E1F96669.png
第五步骤:服务器完成后就剩下手机的
这里执行ionic platform add android ,再执行ionic build android，
这个时候在androidstudio上面运行application，如果用ionic run android，会无法得到更新消息，具体原因我也在看。
做完的效果图就是:
147FFB8D-FB90--3F455C9676ED.png
注意:这里我们每次 更新serve下的文件时候，必须要把本地的Code build serve一下再cordova-hcp build 重新打时间戳一下，再替换才起作用，这里可能我写的不够细致，还有Demo没有分享，搞玩自己的ghost博客会一并详细的写上并且附上。 这里只是防止我自己忘记。
更新代码(TS):
import { Injectable } from '@angular/core';
import { File, FileOpener } from 'ionic-native';
import { AlertController, LoadingController } from 'ionic-angular';
declare var FileTransfer:
declare var cordova:
declare var chcp:
@Injectable()
export class AppUpdate {
constructor(private alertCtrl:AlertController,public loadingCtrl:LoadingController) {
this.bindEvents();
bindEvents() {
var that =
document.addEventListener('deviceready', function() {
console.log('onDeviceReady');
}, false);
document.addEventListener('chcp_updateLoadFailed', function(eventData:any){
console.log('chcp_updateLoadFailed');
var error = eventData.detail.
console.log('123' + error.code + ',' + chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW);
// 当检测出内核版本过小
if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
var dialogMessage = '有新的版本,请下载更新';
let alert = that.alertCtrl.create({
title: dialogMessage,
message: '是否需要更新App',
buttons: [
text: '取消',
role: 'cancel',
handler: () =& {
console.log('Cancel clicked');
text: '更新',
handler: () =& {
console.log('Update App');
that.presentLoadingDefault();
alert.present();
}, false);
document.addEventListener('chcp_nothingToUpdate', function(eventData){
console.log('chcp_nothingToUpdate');
alert('chcp_nothingToUpdate');
}, false);
document.addEventListener('chcp_beforeAssetsInstalledOnExternalStorage', function(eventData){
console.log('chcp_beforeAssetsInstalledOnExternalStorage');
alert('chcp_beforeAssetsInstalledOnExternalStorage');
}, false);
document.addEventListener('chcp_assetsInstallationError', function(eventData){
console.log('chcp_assetsInstallationError');
alert('chcp_assetsInstallationError');
}, false);
document.addEventListener('chcp_assetsInstalledOnExternalStorage', function(eventData){
console.log('chcp_assetsInstalledOnExternalStorage');
alert('chcp_assetsInstalledOnExternalStorage');
}, false);
document.addEventListener('chcp_updateIsReadyToInstall', function(eventData){
console.log('chcp_updateIsReadyToInstall');
alert('chcp_updateIsReadyToInstall');
}, false);
document.addEventListener('chcp_beforeInstall', function(eventData){
console.log('chcp_beforeInstall');
alert('chcp_beforeInstall');
}, false);
document.addEventListener('chcp_updateInstallFailed', function(eventData){
console.log('chcp_updateInstallFailed');
alert('chcp_updateInstallFailed');
}, false);
document.addEventListener('chcp_updateInstalled', function(eventData){
console.log('chcp_updateInstalled');
alert('chcp_updateInstalled');
}, false);
document.addEventListener('chcp_nothingToInstall', function(eventData){
console.log('chcp_nothingToInstall');
alert('chcp_nothingToInstall');
}, false);
userWentToStoreCallback() {
//user went to the store from the dialog
userDeclinedRedirectCallback() {
// User didn't want to leave the app.
// Maybe he will update later.
downloadfile(loading) {
console.log('downloadfile');
//下载代码
var fileTransfer = new FileTransfer();
const fs:string = cordova.file.externalRootD
File.createDir(fs,'updatetest',true).then((dir:any) =&{
console.log('create dir success'+JSON.stringify(dir));
fileTransfer.download("http://140.206.46.76/AppFile/obd_latest.apk",dir.nativeURL+'test.apk', function(entry) {
// 打开下载下来的APP
FileOpener.open(
dir.nativeURL+'test.apk',//下载文件保存地址
'application/vnd.android.package-archive').then((data:any) =& {
console.log('open file success');
}).catch(err =&{
console.log('open file error');
}, function(err) {
console.log('下载失败'+JSON.stringify(err));
}).catch(err =&{
console.log('create dir err'+err);
fileTransfer.onprogress = function(progressEvent) {
var downloadProgress = (progressEvent.loaded / progressEvent.total) * 100;
console.log('已经下载:' + downloadProgress);
loading.setContent(downloadProgress);
if (downloadProgress & 99) {
loading.dismiss();
presentLoadingDefault() {
let loading = this.loadingCtrl.create({
content: '已经下载：0%'
loading.present();
this.downloadfile(loading);
// setTimeout(() =& {
loading.dismiss();
// }, 5000);
职业搬砖，也与编程。
Action 13:28:27: INSTALL. 1: MySQL Notifier 1.1.7 2: {724CDD73-430E-47DA-8F4E-7DF} Action 13:28:27: FindRelatedProducts. Searchi...
目录 问题描述 1 可能引发该问题的X因子集合 2 使用f方法针对X因子进行测试验证2.1 验证cordova-plugin-splashscreen插件是否是关键因子2.2 验证Cordova桥android端源码是否是关键因子2.3 验证AngularJS3.2.0是否...
Node.js是目前非常火热的技术，但是它的诞生经历却很奇特。 众所周知，在Netscape设计出JavaScript后的短短几个月，JavaScript事实上已经是前端开发的唯一标准。 后来，微软通过IE击败了Netscape后一统桌面，结果几年时间，浏览器毫无进步。（2...
github地址，欢迎大家提交更新。 express() express()用来创建一个Express的程序。express()方法是express模块导出的顶层方法。 varexpress=require('express'); varapp=express(); Met...
Address:https://www.zybuluo.com/XiangZhou/note/208532 Express 4.x APIexpress翻译api文档中文 -- github地址，欢迎大家提交更新。 express()express()用来创建一个Expre...
最近看到不少教师罢课的报道，作为一名即将走上教师一线的师范毕业生，我感到不寒而栗。 早就知道教师工资低，待遇差，但从小就有的教师梦还是支持我坚持下来，读了师范院校，致力于成为一名优秀的人民教师！但看到那些无助的教师为了自己的基本权利而无奈的罢课，看到他们寒风中瑟瑟的静坐，看...
在我家人的地里有一块儿约20平方米的空地，有一位“榕树爷爷”在那儿看守着。
老榕树真茂盛啊！ 他想四面伸展，繁多的枝叶，差不多可以遮盖住整个跷跷板娱乐区了。
榕树的叶子很细小，为橄榄型...
看完林语堂的《京华烟云》迎头赶上路遥的《平凡的世界》，先前的有莫言的《红高粱》，张小娴的《永不永不说再见》等等作品。 观多了书中剧中的人生，我逐渐感受到自己呼吸的厚重，虽然它们给我空泛的经历并无任何辅祐，我没能亲历的，依然太多，但我着实是多了些向往的，它们至少将我拖离了无知...
去西藏拉萨旅游布达拉宫是必须要去的地方。但是拉萨布达拉宫在藏人中有很高的地位，具有很浓重的藏传佛教色彩，前往布达拉宫旅游就有很多需要注意的地方，以免触犯禁忌。 藏族人除了上了年纪的老人，其他藏人几乎都可以听得懂汉语，交流起来完全没有问题，所以不必担心语言不通的问题。 每年从...
随着“互联网+”战略的实施，“供给侧结构性改革”号召的推进以及“一带一路”建设的不断发展，我们迎来了实现中华民族伟大复兴的历史转折，加快了实现“中国梦”的步伐，改革开放发展展现新格局。纵观经济发展宏伟蓝图，实体经济是经济发展的战略支撑，是社会赖以生存和发展的基础，但...网上有很多关于这方面的资料和说明，但是我并没有找到一个真正能够搭建成功的案例。因此为了让大家别再走弯路，在此我研究了一个上午搭建成功，以此来提高大家的工作效率。
cordova-hot-code-push是一款专门为混合cordova应用开发的一个热更新插件，那么什么是热更新？热更新顾名思义就是，在混合app代码（html、js、css）发生改变的时候，我们不需要重新对app打包再次进行发布，而仅需要通知cordova-hot-code-push插件，代码已经发生了改变，然后cordova-hot-code-push插件就会根据我们指定的代码服务器进行更新相关的代码。这样的好处在于，客户再也不用再到相关的app store去下载新版本的app了，只要客户联网打开了app，app就会自动更新相关代码。这仅仅是用于代码更新上。如果我们所改变的不是代码，而是改变了webview或者说升级了ionic2到了ionic3，那么cordova-hot-code-push还会自动更新吗？毫无疑问cordova-hot-code-push已经无法再次进行自动更新了，但是它可以向客户端推送新的app，并强迫用户下载升级！好了，下面我就用ionic2的项目来说说怎么搭建cordova-hot-code-push和使用。
本次搭建在OS系统中，服务端使用xampp本地搭建而成，当然windows用户也不用紧张，因为操作步骤都是一样的，在windows上你可以使用android模拟器进行测试。
1、首先建立一个ionic项目
当然你得确保你已经安装了nodejs
安装ionic和cordova
npm install -g cordova ionic
我根据官方教程，创建一个tabs项目，输入如下命令
ionic start tab tabs
npm install
ionic serve
这样就建立好了ionic项目了。
2、安装cordova-hot-code-push插件（使用全局安装）
npm install -g cordova-hot-code-push-cli
接着在项目根目录安装cordova-hot-code-push-plugin插件
cordova plugin add cordova-hot-code-push-plugin
3、确定本地服务器ip地址
比如我安装的是xampp服务器软件，我通过http://localhost可以直接访问到服务器根目录文件，但是如果我们在模拟器中使用http://localhost和127.0.0.1就无法访问到服务器了。因此我们得获得到本机的ip地址
mac下在终端（命令行）输入ifconfig即可看到如下画面，找到你的ip地址：
Mac下查看ip地址
windows下的朋友可以使用ipconfig命令进行查看，或者在网络共享中心查看本机IP地址
得到了Ip地址，那就直接使用ip地址访问下本地的服务器，看看能否正常访问，在浏览器中敲入http://192.168.22.62/访问看看，我的结果是这样的
xampp本地搭建服务器
如果你使用的是其他服务器，请自行进行检测。
4、创建cordova-hcp.json模板
cordova-hcp.json主要是为了方便我们以后的操作，不用再去修改www目录下的chcp.json文件，因此这样做主要是为了提高工作效率项目目录结构
在tab项目根目录下新建一个cordova-hcp.json文件，输入如下内容
& & &autogenerated&: true,
& & &name&: &tabs&,
& & &min_native_interface&: 1,
& & &content_url&: &http://192.168.22.62/tabs&,
& & &ios_identifier&:&https://itues.apple.com/cn/***&,
& & &update&: &now&
autogenerated
默认为true，自动升级的意思
name app的名称
min_native_interface 原生壳（可以理解为原生webview版本），此版本由你自己定义版本号
content_url 更新文件所在服务器的目录地址
ios_identifie 这个是ios app store的地址，作为测试，可以忽略，这个地址是打包后提交的地址
update 更新的情况，now|web内容下载完毕即安装更新；resume|app从后台切换过来的时候安装更新；start|app启动时安装更新（默认值）.
5、测试模板生成的www/chcp.json文件是否正确
cd 到项目根目录，执行下面语句
cordova-hcp build
执行后，就可以到www目录下找到chcp.json文件，查看信息，发现多了一行代码："release": "-15.27.25"，并且也多了一个chcp.manifest的文件
& &autogenerated&: true,
& &name&: &tabs&,
& &min_native_interface&: 1,
& &content_url&: &http://192.168.22.62/tabs&,
& &ios_identifier&: &https://itues.apple.com/cn/***&,
& &update&: &now&,
& &release&: &-15.27.25&
其实就是个时间
chcp.manifest则是每一个文件变动后的hash值，cordova-hot-code-push会去检测这个值，如果这个值发生了变动则从服务器下载相关文件进行更新。
到此，我们的模板完成了。
6、修改根目录config.xml
在中加入如下代码：
& & &native-interface version=&1& /&
& & &config-file url=&http://192.168.22.62/tabs/chcp.json& /&
config.xml文件
native-interface version="1"，这里的1必须和chcp.json中"min_native_interface": 1 是一样的，这个1代表了外壳（webview版本）版本。做外壳更新用到此参数。
7、在xcode或安卓虚拟机上运行项目
mac上，输入如下命令
ionic platform add ios
ionic cordova run ios（旧版本的ionic请运行ionic run ios）
windows上由于实现ios环境难，因此就使用android
ionic platform add android
ionic cordova run android（旧版本的ionic请运行ionic run android）
我运行的结果如下（我之前修改过默认项目的文件）：
ios下运行ionic项目
8、内壳（html、js、css）热更新
首先我们修改项目下page/about.html页面，更它增加一些文字，我这里增加的是“this is about page”。
运行命令cordova-hcp build重新生成相关的文件
我们在xampp/htdocs目录下新建一个文件夹名称为tabs，接着我们将ionic根目录下的www内的所有文件拷贝到xampp/htdocs目录下。
在xcode或者安卓虚拟机中将我们的ionic app kill掉，也就是强制退出。
再次打开我们的app，你会看到about页面已经发生了变化，刚才我们添加的文字出现了。
真是屡试不爽啊，热更新真的太方便了。不过这种更新仅仅只是内壳的热更新。
9、外壳热更新（待续...）
您可能还会对这些文章感兴趣！
CopyRight&copy
. Template '' design bycordova热更新插件问题
[问题点数：100分]
cordova热更新插件问题
[问题点数：100分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
匿名用户不能发表回复！|6被浏览2,378分享邀请回答1添加评论分享收藏感谢收起