内容简介:公司的cordova项目前段时间增加了热更新功能,自己第一次做的时候在网上查找了很多资料,有的资料写的并不全面遇到了很多坑。因此总结一些在开发过程中遇到了问题和解决办法。cordova项目热更新分为两个部分,网页内容(web content)更新和Cordova插件(native side)更新。前者是网页内容,后者是 cordova 插件。web content 的运行是基于 native side。如:登录页面的微信登录,需要在项目中集成微信的插件才能实现登录。此更新方式,只需要更新web前段代码,不需
公司的cordova项目前段时间增加了热更新功能,自己第一次做的时候在网上查找了很多资料,有的资料写的并不全面遇到了很多坑。因此总结一些在开发过程中遇到了问题和解决办法。
cordova项目热更新分为两个部分,网页内容(web content)更新和Cordova插件(native side)更新。前者是网页内容,后者是 cordova 插件。web content 的运行是基于 native side。如:登录页面的微信登录,需要在项目中集成微信的插件才能实现登录。
web代码的更新
此更新方式,只需要更新web前段代码,不需要更新android的原生代码。只是对js、html等的更新。
1、添加插件 Cordova Hot Code Push
cordova plugin add cordova-hot-code-push-plugin 复制代码
2、添加热更新工具 cordova-hot-code-push-cli
npm install -g cordova-hot-code-push-cli 复制代码
3、添加cordova-hcp.json文件
此文件是用于方便生成www文件下chcp.json文件的内容。
执行命令(必须在项目根目录执行更新 工具 的命令)
cordova-hcp init 复制代码
生成的默认应用程序配置文件(cordova-hcp.json)在项目根文件夹中。
执行时将要求您从命令行中填写一些项目首选项:
- Project name: 你现在的项目名称所需.
- Amazon S3 Bucket name:亚马逊上的S3桶的名字。可以跳过。
- Amazon S3 region: 亚马逊S3地区。可以跳过。
- iOS app identifier: 应用程序商店的应用程序ID。App升级是跳转应用商店进行升级。
- Android app identifier: 可以App在应用商城的地址,或者是apk的下载地址。
-
Update method: 何时执行更新。
- start: 在启动应用程序时安装更新。
- resume: 在恢复应用程序(从背景移动到前景状态)或启动时,安装更新;默认使用。
- now: 从服务器加载更新后立即安装。
cordova-hcp.json文件内容:
{ "name": "",//可为空 "autogenerated": true,//如果不添加,热更新会不能使用 "ios_identifier": "id123456789",//应用在App store id(可为空) "android_identifier": "",//应用在应用商城上的地址或者App的下载地址(可为空) "update": "start",//在应用启动时安装 "min_native_interface": 1,//可用以做App升级(可以不填) "content_url": "http://************/cordova/www"//www文件在服务器上的地址 } 复制代码
"autogenerated": true这个值执行命令后是没有的需要自己手动添加,如果不添加网页内容更新将会无效。
4、在www文件下生成chcp.json 和 chcp.manifest文件
- chcp.json: 包含发布相关信息:热更新代码版本号,应用 native side 版本号等等
- chcp.manifest: 包含项目热更新代码(静态)文件信息:文件名和文件哈希值
执行命令
cordova-hcp build 复制代码
执行此命令会在chcp.json文件中增加 "release":"当前时间"
字段。(默认使用时间戳,格式为:yyyy.MM.dd-HH.mm.ss),插件将版本号进行字符串相等比较来判断是否存在新版本。
"release": "2017.06.07-16.30.20",//唯一web项目版本号,用与热更新web内容的更新。(必需) 复制代码
5、config.xml 配置
最好写在底部方便以后配置修改
<chcp> <auto-download enabled="true" /> <auto-install enabled="true" /> <native-interface version="1" /> <config-file url="https://************/cordova/www/chcp.json" /> </chcp> 复制代码
- config-file:配置文件 chcp.json 从服务器上加载的路径(必须的配置项)
- auto-download:是否自动下载热更新代码,默认是 true
- auto-install:是否自动安装热更新代码,默认是 true
- native-interface:当前 native side 的版本号
6、将www文件放到服务器
这一步我是直接将项目的www文件夹放到服务器上,然后重启app,就可实现App的web内容代码的热更新了。需要注意的是www文件在服务地地址一定要与 "content_url":"http://************/cordova/www"
和config.xml中 <config-file url="https://************/cordova/www/chcp.json" />
填写的地址一致。
更新App
其实完成上面步骤,就可以实现热更新功能了。但是当我们增加了cordova插件或者原生中添加了第三方库等,需要对App升级。那么这个时候就要去对应的商城下载apk(苹果去app store升级)因此还需要下面的配置。
1、config.xml 配置中定义native side 版本号
<chcp> <native-interface version="5" /> </chcp> 复制代码
此配置会与服务器上配置文件 chcp.json 中的 min_native_interface 值作比较 。
-
两个值相同 ,不提示升级,但是网页内容可以更新。
-
如果大于服务器上的值,不会提醒更新,但是网页内容可以更新。
-
小于服务上的值,提示应用需要更新升级,那么热更新将无法正常进行。
2、添加JS代码 Wiki文档
document.addEventListener('deviceready', () => { let chcp = window.chcp; // 检测更新 chcp.fetchUpdate((error, data) => { if (error) { console.log('--更新版本异常,或其他错误--', error.code, error.description); if (error.code === -2) { var dialogMessage = '有新的版本是否下载'; //调用升级提示框 点击确认会跳转对应商店升级 chcp.requestApplicationUpdate(dialogMessage, null, null); } } // 服务器版本信息 // console.log('--更新的版本信息--', data.config); // 版本信息 chcp.getVersionInfo((err, data) => { console.log('服务器应用时间版本: ' + data.readyToInstallWebVersion); console.log('当前应用时间版本: ' + data.currentWebVersion); console.log('当前应用version name: ' + data.appVersion); }); }); }); 复制代码
如果当前APP中的 <native-interface version="1"/>
低于服器上chcp.json中 min_native_interface
的值,那么执行热更新就会提示错误: chcp.error.APPLICATION_BUILD_VERSION_TOO_LOW
,返回的异常码为 -2
。这个时候我们应当提示用户前往应用商店对APP进行升级。
需要注意的是,如果弹出的升级提示框点击确认的跳转对应平台升级app的地址,是我们在cordova-hcp.json中填写的地址;如果点击了取消,那么就不会升级,并且网页的热更新功能也将失效,除非升级为最新的apk。
总结:
热更新分为网页内容的跟新和cordova插件的更新,前者更新不需要升级App,后者需要升级App,在使用热更新功能是最好是两个功能都要实现。
补充:
- cordova如果网页内容和App升级两个都要实现,请将config.xml配置选项
<auto-download enabled="true" /> <auto-install enabled="true" /> 复制代码
- cordova热更新弹出框很难看,android测试为黑色背景绿色文字。网上找了很多的资料,也没能找到解决cordova自带对话框样式的方法。如果有解决的方法请留意一下,谢谢!
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- ShowDoc 更新:新增一键自动安装/升级脚本
- ShowDoc 更新:新增一键自动安装/升级脚本
- Kubernetes更新补丁 修复重要权限升级缺陷
- Android应用程序的自动更新升级
- WGCLOUD 监控系统更新,公众看板服务模块升级
- GitLab 安全更新,Knative 升级到 v0.5
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
MacTalk 人生元编程
池建强 / 人民邮电出版社 / 2014-2-1 / 45
《MacTalk·人生元编程》是一本随笔文集,主要内容来自作者的微信公众平台“MacTalk By 池建强”。本书撰写于2013年,书中时间线却不止于此。作者以一个70 后程序员的笔触,立于Mac 之上,讲述技术与人文的故事,有历史,有明天,有技术,有人生。70 多篇文章划分为六大主题:Mac、程序员与编程、科技与人文、人物、工具、职场。篇篇独立成文,可拆可合,随时阅读。 此外,作者还对原来......一起来看看 《MacTalk 人生元编程》 这本书的介绍吧!