Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

续:ionic中使用热更新插件cordova-hot-code-push

Posted on 2017年7月3日2017年7月3日 by king2088

我在之前的文章ionic中使用热更新插件cordova-hot-code-push说过了在app中实现内壳热更新的方案与方法。但是没有说过外壳的热更新,因为外壳更新我们无法通过向内壳一样的热更新去实现,我们仅能通过“min_native_interface”里的版本号去判断服务器上的版本号是否大于本地app的版本号,如果大于则引导用户跳转到app store进行下载新版app。
也就是说,我们无法再通过服务器直接更新app的外壳,外壳的更新必须要用户手动进行升级。cordova-hot-code-push的目的就是引导用户到app store下载最新版的app程序。
1、重新设置你的cordova-hcp.json模板(这里仅多增加了一个参数而已)

{
"autogenerated": true,
"name": "tabs",
"min_native_interface": 3,
"content_url": "http://192.168.22.62/tabs",
"ios_identifier": "https://itunes.apple.com/us/app/facebook/id284882215?mt=8",
"android_identifier": "https://play.google.com/store/apps/details?id=com.facebook.katana",
"update": "now"
}

就增加了一个android_identifier,这就是google play的app下载地址。
假如你的app支持安卓和ios那么,你就两个都填写上,如果你的app仅支持其中一个系统平台,那么就只保留你需要的那个平台,删除另一个平台即可。
记得使用下面的代码重新生成一次:
cordova-hcp build
2、编写实现的代码
下面的代码我都是根据cordova-hot-code-push官方获得的,如果你的英文够好,或者你愿意主动阅读英文,那么我建议你到官方好好看看文档,因为官方的文档中说的非常清楚。官方地址:https://github.com/nordnet/cordova-hot-code-push/wiki
以下代码如果在纯phonegap的js应用中使用应该不会有问题,但是在ionic中,是会发生错误的,之后我会提到
var app = {

initialize: function() {
this.bindEvents();
},

bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
document.addEventListener('chcp_updateLoadFailed', this.onUpdateLoadError, false);
},

onDeviceReady: function() {
},

onUpdateLoadError: function(eventData) {
var error = eventData.detail.error;
if (error && error.code == chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW) {
console.log('Native side update required');
var dialogMessage = '发现新版本,即刻下载安装.';
chcp.requestApplicationUpdate(dialogMessage, this.userWentToStoreCallback, this.userDeclinedRedirectCallback);
}
},

userWentToStoreCallback: function() {
console.log('谢谢更新');
},

userDeclinedRedirectCallback: function() {
console.log('你确定不更新吗?')
}
};

app.initialize();
3、ionic2+版本中无法找到chcp
应该说一遇到这样的情况,我们的第一反应是是否插件的js为调用,第二反应是这个是一个第三方插件,第三反应就是解决这个问题,必须先想到如何引入第三方插件!我之前写过一篇文章ionic2中引入自定义js文件或者引入第三方js文件
其中提到了declare,使用declare就可以设置第三方插件,不过这一次我们得先定义一个window的全局变量,然后再通过这个window去调用chcp这个对象。
因此在第二步骤中的代码中chcp对象,就必须要修改为window.chcp,这样才可以正确的运行。下面直接看ionic2中的代码,此处我直接截图,就不贴代码了!
请先在import后,export前加入下面代码:
declare var window;
做如下代码修改即可

ionic2 热更新
ionic2 热更新

4、测试是否生效
这里我依然使用的是xcode的ios模拟器,修改好了以后,直接运行ionic run ios的命令,然后运行在ios模拟器中。接着我们需要随便修改下tabs.html中的文字,修改了以后,我们再次运行
cordova-hcp build
紧接着,我们将项目目录下的www目录下的文件拷贝到服务器tabs目录下。
然后在ios模拟器中,按住shift+command,再次双击h键,然后kill当前的app,再次进行启动。你就可以看到提示升级的信息了,当你点击ok的时候,则跳转到了你自己设置的苹果 app store的软件地址。
如图:
app store update
app store update

app store update
app store update

2 thoughts on “续:ionic中使用热更新插件cordova-hot-code-push”

  1. 李升说道:
    2018年8月13日 上午12:43

    “以下代码如果在纯phonegap的js应用中使用应该不会有问题,但是在ionic中,是会发生错误的,之后我会提到”

    请问在哪提到了?我刚好卡在这里了。谢谢

    回复
    1. king2088说道:
      2018年9月19日 下午10:06

      就是要以第三方插件导入,否则就是直接报错

      回复

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme