[Android教程] Cordova开发App入门(二)使用热更新插件
前言
不知各位遇没遇到过,刚刚发布的应用,突然发现了一个隐藏极深的“碧油鸡(BUG)”,肿么办!肿么办!肿么办!如果被老板发现,一定会让程序员哥哥去“吃鸡”。但是想要修复这个“碧油鸡”,就必须要重新打包、重新测试、重新部署等等。重点是在这个重新打包、测试、部署的时候,可能已经有用户发现了这个“碧油鸡”,接下来就是承受用户的投诉、举报 + 漫骂。如果这仅仅只是一个无关痛痒的“碧油鸡”,那还到无可厚非。怕就怕这是一个非常严重的错误,比如会泄露用户隐私等。这时候就不单单是被请“吃鸡”了,还有可能被请“吃鱼”。(ps:反正受伤的总是程序员~~~)
那么如果我们的应用能够实现“热更新”的话,那就能很轻松+easy的修复“碧油鸡”了。
热更新
有同学就问了:什么是“热更新”?
其实“热更新”说简单点就是不关软件直接更新,更新期间软件的使用不受影响,现在大部分软件是冷更新,要退出才能更新。在举个简单的例子就是:手机SD卡,可以直接在开机状态下插入或拔出,无须关机后再插拔。
又有同学问了:怎么才能实现“热更新”?
这就是接下来要说的内容。
实践
上一篇介绍了>>如何使用Cordova创建Android项目<< ,这一篇文章主要记录:如何使用Cordova实现App的热更新
该篇文章需要用到静态文件服务器,博主使用的nginx搭建的,具体搭建方式可参考:使用nginx搭建文件服务器。
添加chcp客户端
# 用于编译项目文件,生成对应的hash码
npm install -g cordova-hot-code-push-cli
复制代码
添加chcp自动更新的插件
D:\zhyd-project\app\cordova-study\platforms\android>cordova plugin add cordova-hot-code-push-plugin
Installing "cordova-hot-code-push-plugin" for android
Installing dependency packages:
{
"xml2js": "^0.4"
}
Checking cordova-hcp CLI client...
---------CHCP-------------
To make the development process easier for you - we developed a CLI client for our plugin.
To install it, please, use command:
npm install -g cordova-hot-code-push-cli
For more information please visit https://github.com/nordnet/cordova-hot-code-push-cli
--------------------------
Android Studio project detected
Subproject Path: CordovaLib
Subproject Path: app
Adding cordova-hot-code-push-plugin to package.json
Saved plugin info for "cordova-hot-code-push-plugin" to config.xml
复制代码
插件安装完成后,会自动配置到app>src>main>res>xml>config.xml文件中。当前项目的config.xml如下
cordova-study
A sample Apache Cordova application that responds to the deviceready event.
Apache Cordova Team
复制代码
config.xml配置文件各节点介绍:
widget:根节点。四个必填配置属性:id(创建项目时默认指定包名)、version(版本号-主.次.补丁)、xmlns、xmlns:cdv
name:项目名
descriptin:项目介绍
author:项目作者(项目如果发布到应用商店后,可能会使用该联系信息)
content*:项目启动首页(重要,如果项目的首页不是index.html,则必须要要在config.xml文件中修改成对应的文件)
access:跨域访问设置,“*”表示允许所有
allow-intent:白名单。控制哪些url可以让应用程序打开。默认情况下,不允许使用外部url。
preference:项目偏好设置。sdk、日志等等
feature:cordova插件,安装插件时自动配置
修改config.xml
在config.xml中添加如下配置
复制代码
注:该配置和feature节点是同级的,即:都是widget的子级节点。修改后的config文件如下:
...省略
...省略
复制代码
注:【1】为静态服务器的地址(下同),需要提前配置好,如果使用nginx的话可以参考>使用nginx搭建文件服务器
该链接指向的json文件为热更新的配置文件,具体生成方式见下一步
此时,项目的文件目录结构如图
通过Terminal或者cmd,cd到app>src>main>assets目录下,执行cordova-hcp build
该命令执行完毕后,会在assets>www目录下生成两个文件:chcp.json(热更新配置文件)和chcp.manifest(www目录下的所有文件的hash码清单)
chcp.json文件内容
{
"autogenerated": true,
"release": "2018.04.16-11.32.11"
}
复制代码
注:如果使用cordova-hcp build命令初始化项目,则生成的chcp.json中缺少content_url(用于指向服务器端app源码)和update(app更新方式)属性。当然,可以手动添加o(╯╰)o。
# update可选值
start : app启动时安装更新. 默认值.
resume : app从后台切换过来的时候安装更新.
now : web内容下载完毕即安装更新.
复制代码
本地测试可以使用cordova-hcp server命令创建一个服务端,该命令生成的chcp.json文件中会有content_url和update参数。因本文主要涉及服务端的热更新,所以本地测试的具体方式不做赘述。
虽然对cordova-hcp server命令不做过多介绍,但为了更方便的生成chcp.json文件,我们可以在asstes目录下创建一个corova-hcp.json模板文件,内容如下
{
"autogenerated": true,
"update": "start",
"content_url": "http://【1】/hot-update-app/zyd-test"
}
复制代码
再次执行cordova-hcp build命令
可以看到chcp.json中的内容已被cordova-hcp.json文件替换掉了。
服务端配置
每次修改完代码文件后,先执行cordova-hcp build 然后将www目录中的所有文件copy到服务器上对应的目录中(本文对应/hot-update-app/zyd-test目录下)
Javascript调用插件
var zyd = window.zyd || {
// ...
}
zyd.bindUpdate = {
init : function () {
$(".update").click(function(){
//说明:这里的使用了Framework7
chcp.fetchUpdate(function(error, data) {
if(!error) {
alert("有更新");
chcp.installUpdate(function(error) {
alert("更新完成");
})
} else {
alert("当前是最新版本");
}
})
});
}
}
复制代码
手动更新APP
复制代码
打包测试
总结
Cordova实现热更新,必须要注意的几点:
①安装插件
②修改config.xml
③添加cordova-hcp.json模板
④cordova-hcp build
文中的热更新为手动触发,源代码中还有定时自动更新的js实现。另外还可以集合特定程序通过后台进行控制,当然这些扩展性的实现功能,只能各位看官自己去实现了。
源码地址
1.我的github
2.我的码云
欢迎关注,欢迎Star。当然,如果你直接下载了源码并不star,我也没办法(手动滑稽o(╯╰)o)。
[Android教程] Cordova开发App入门(二)使用热更新插件的更多相关文章
- [Android教程] Cordova开发App入门(一)创建android项目
前言 Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的A ...
- Cordova开发App入门之创建android项目
Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑 ...
- Cordova开发App使用USB进行真机调试
在使用cordova开发app时,不像浏览器中可以直接使用浏览器的开发者工具进行调试.为了看到app的显示效果, 一种是使用模拟器进行展示,一种是使用真机进行展示. 模拟器:可以使用Android s ...
- 【Android】快速开发偷懒必备(二) 支持DataBinding啦~爽炸,一行实现花式列表[申明:来源于网络]
[Android]快速开发偷懒必备(二) 支持DataBinding啦~爽炸,一行实现花式列表[申明:来源于网络] 地址:http://blog.csdn.net/zxt0601/article/de ...
- Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接
Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=158 ...
- Vue+cordova开发App
Vue+cordova开发App https://www.imooc.com/article/70062
- Cordova - XCode10编译热更新插件错误解决方法!
操作系统:OSX10.14 XCode:10.1 热更新插件:https://github.com/nordnet/cordova-hot-code-push 这个热更新插件,在安卓下编译,没有问题, ...
- Cordova 开发 App
Cordova 是一个开源的移动开发框架.允许你用标准的 Web 技术——HTML5,CSS3 和 JavaScript 做跨平台开发.应用在每个平台的具体执行被封装了起来,并依靠符合标准的 API ...
- Android教程2020 - RecyclerView使用入门
本文介绍RecyclerView的使用入门.这里给出一种比较常见的使用方式. Android教程2020 - 系列总览 本文链接 想必读者朋友对列表的表现形式已经不再陌生.手机上有联系人列表,文件列表 ...
随机推荐
- 《Convolutional Neural Network Architectures for Matching Natural Language Sentences》句子匹配
模型结构与原理 1. 基于CNN的句子建模 这篇论文主要针对的是句子匹配(Sentence Matching)的问题,但是基础问题仍然是句子建模.首先,文中提出了一种基于CNN的句子建模网络,如下图: ...
- java 事件通告写法
使用场景: 自己模块发生变化后可能引起其他模块变化的部分,需要添加事件通告,通知其他模块. 使用模式: 观察者模式 (以User类为例)写法: 1.创建接口: public interface IUs ...
- 【译】在Asp.Net中操作PDF - iTextSharp - 利用列进行排版(转)
[译]在Asp.Net中操作PDF - iTextSharp - 利用列进行排版 在使用iTextSharp通过ASP.Net生成PDF的系列文章中,前面的文章已经讲述了iTextSharp所涵盖 ...
- JS重要的内置对象
Array对象: 属性: .length 获得数组的长度: 方法: .concat() 连接内容或者数组,组成新的数组: .join(n) 用n连接数组的每一项组成字符串,可以是空字符串: ...
- centos 网卡配置
地址:/etc/sysconfig/network-scripts vi /etc/sysconfig/network-scripts/ifcfg-eth0 1.固定ip配置 DEVICE=eth0 ...
- redis 主从同步搭建
redis 一主二从 1.redis 安装 安装教程:https://www.cnblogs.com/zwcry/p/9505949.html 2.redis主从 1)创建主从目录 mkdir /us ...
- 使用Astah画UML类图经验总结
从学习需求工程与UML开始,就开始接触到Astah这款软件,但是当时完全是为了对UML各种图的了解加深才使用了这款软件.当时画图,都是完全凭借自己想,并没有考虑实际情况,而且画的图都是很简单的,甚至有 ...
- 基于qml创建最简单的android机图像采集程序
前提是在已经搭建为android编写程序的qt平台上面,我们只需要简单几部就可以搭建最简单的android机图像采集程序 1.生成新的ququick app 2.在配置中添加 multimedia,因 ...
- noip2008 真题练习 2017.2.25
不是有很多可以说的,记住不能边算边取min Code #include<iostream> #include<fstream> #include<sstream> ...
- Bootstrap 使用教程 与jQuery的Ajax方法
jQuery.ajax(url,[settings]) 更加详细的内容参考 jQuery API 中文在线手册 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单 ...