Skip to content

小小前端

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

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

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

Posted on 2017年6月30日2017年7月5日 by king2088

网上有很多关于这方面的资料和说明,但是我并没有找到一个真正能够搭建成功的案例。因此为了让大家别再走弯路,在此我研究了一个上午搭建成功,以此来提高大家的工作效率。
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
cd tab
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地址
Mac下查看ip地址

windows下的朋友可以使用ipconfig命令进行查看,或者在网络共享中心查看本机IP地址
得到了Ip地址,那就直接使用ip地址访问下本地的服务器,看看能否正常访问,在浏览器中敲入http://192.168.22.62/访问看看,我的结果是这样的
xampp本地搭建服务器
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”: “2017.06.30-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": "2017.06.30-15.27.25"
}

其实就是个时间
chcp.manifest则是每一个文件变动后的hash值,cordova-hot-code-push会去检测这个值,如果这个值发生了变动则从服务器下载相关文件进行更新。
到此,我们的模板完成了。

6、修改根目录config.xml

在中加入如下代码:




config.xml文件
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项目
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、外壳热更新(待续…)

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

  1. zzj说道:
    2017年11月13日 下午8:17

    请问下,使用了这个插件,每次app启动,有没有更新都会有10几秒的白屏,这是为什么?怎么解决?

    回复
    1. king2088说道:
      2017年11月14日 上午10:29

      白屏问题请安装cordova plugin add cordova-plugin-splashscreen,config.xml添加如下代码:
      [cc lang=”xml”] [/cc]
      app.ts文件中增加如下代码
      [cc lang=”javascript”]import { Splashscreen } from ‘ionic-native’;
      …….
      setTimeout(function () { Splashscreen.hide(); }, 1000);
      …….[/cc]

      回复
      1. 浪子说道:
        2019年8月23日 下午5:21

        为什么我运行npm install -g cordova-hot-code-push-cli这句代码就报错呢

        D:\ionic3\myApp>npm i -g cordova-hot-code-push-cli
        npm WARN deprecated crypto@0.0.3: This package is no longer supported. It’s now a built-in Node module. If you’ve depended on crypto, you should switch to the one that’s built-in.
        npm ERR! code Z_BUF_ERROR
        npm ERR! errno -5
        npm ERR! zlib: unexpected end of file

        npm ERR! A complete log of this run can be found in:
        npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2019-08-23T08_47_01_483Z-debug.log

        回复
        1. king2088说道:
          2020年12月3日 上午9:24

          此框架已经不再维护了,建议换其他的框架吧!或者直接放弃ionic3吧,建议采用flutter

          回复
  2. virgil说道:
    2018年9月19日 上午8:59

    第一次启动,界面正常显示。
    但是第二次启动APP,一直显示白屏,这个怎么解决?

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

      你可以打印一下cordova-hot-code-push的error code看一下是否已经发生了错误

      回复
    2. lulanyin说道:
      2018年12月18日 下午11:28

      请问,您解决了吗?我上一个APP还能用,现在新的APP 一直无法使用了,全都是IOS第二次启动白屏,用调试,地址打开是错误的,安卓的也无法使用,更新后是新版,但第二次启动,依旧是旧版。

      回复
      1. king2088说道:
        2018年12月27日 上午8:35

        这个插件已经不再进行维护了,主要原因可能是由于iOS平台禁止进行相应的热更新操作,因此可能在iOS10以上版本中,此插件无法正常工作,建议直接使用查找版本号的方法进行下载apk或者跳转到app store下载更新

        回复
        1. zxdeer说道:
          2019年1月3日 上午10:04

          是的,在Android机器上就第一次更新,更新后再打开依然是旧的数据

          回复

发表评论 取消回复

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

分类

近期文章

  • 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年 12月
一 二 三 四 五 六 日
 123
45678910
11121314151617
18192021222324
25262728293031
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme