ionic3 热更新
前提：在ionc3 app项目的基础上
1.设置Android平台
ionic cordova platform add android
修改 platforms/android/project.properties 和platforms/android/CordovaLib/project.properties 中的 target = "你的sdk版本"
2.安装热更新插件
cordova plugin add cordova-hot-code-push-plugin
ionic cordova plugin add cordova-hot-code-push-local-dev-addon //正式环境不用安装
npm install -g cordova-hot-code-push-cli (建议用管理员身份运行,我没有用管理员身份运行的时候报错)
3. 在config.xml配置文件中加入下面节点
注：这里将auto-download和auto-install 设置为false，是为了在代码中实现，手动控制热更新。即给用户提供一个确认对话框，用户通过点击确认更新才会更新版本。
4.重新开一个终端执行下面命令
cordova-hcp server
正常运行结果类似：
Running server
Checking: F:\xxx\Running server
Checking: F:\xxx\xxx-xxx\xxx\xxx\xxx\xxx\xxx\app\www
local_url http://localhost:31284
Config { name: 'xxx',
ios_identifier: '',
android_identifier: '',
update: 'now',
content_url: '发布项目服务器地址/www/',
forceUpdate: false,
version: '0.0.1',
release: '2019.06.12-10.38.35' }
Build 2019.06.12-10.38.35 created in F:\xxx\xxx-xxx\xxx\xxx\xxx\xxx\xxx\app\www
检查项目的www 路径下 有chcp.json和chcp.manifest表示热更新服务启动正常
5.在项目根目录下新建模板 cordova-hcp.json
{
"name": "app名称",
"ios_identifier": "",
"android_identifier": "",
"update": "now", //更新方式，默认是start
"content_url": "http://服务器地址/www/", //服务器地址
"forceUpdate": false,
"version": "0.0.1"
}
6.生成apk
ionic cordova build android
此时热更新服务不能停止（第4步打开的服务），一个终端执保持热更新服务，另一个终端执行其它命令
cordova-hcp build (复制模板文件)
每次更改文件执行完本命令，都会更新hash字符串
检查浏览器是否可以访问chcp.json
在手机上安装此apk
一定要先生成apk(ionic cordova build android) 在复制模板文件(cordova-hcp build ) 否则build之后模板文件可能会恢复默认值
7. 对项目界面或者功能进行修改
然后对配置文件config.xml的chcp节点的版本号进行修改
重新生成apk
ionic cordova build android
执行 cordova-hcp build
将项目上传到服务器
手动下载的代码：
1. app.module.ts中 ；
import { HotCodePush } from '@ionic-native/hot-code-push';
providers: [HotCodePush]2. app.component.ts中
import { Component } from '@angular/core';
import { Platform, ToastController, AlertController, LoadingController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { LoginPage,WorkCenterPage } from '../pages/pages';
import { HotCodePush } from '@ionic-native/hot-code-push';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
rootPage: any = LoginPage;
constructor(platform: Platform, statusBar: StatusBar,
private chcp: HotCodePush,
public toastCtrl: ToastController,
private alertCtrl: AlertController,
public loadingCtrl: LoadingController,
splashScreen: SplashScreen) {
platform.ready().then(() => {
this.fetchUpdate();
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();
});
}
fetchUpdate() {
const options = {
'config-file': 'http://服务器地址/chcp.json'
};
this.chcp.fetchUpdate(options).then(data => {
this.showConfirm();
}, error => {
})
}
showConfirm(){
let alert = this.alertCtrl.create({
title: '更新确认',
message: '系统检测到新版本，是否更新？',
buttons: [
{
text: '下次再说',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
},
{
text: '立即更新',
handler: () => {
let loading = this.loadingCtrl.create({
spinner: 'hide',
content: '新版本安装成功'
});
loading.present();
setTimeout(()=>{
this.chcp.installUpdate().then(data => {
console.log(data)
loading.dismiss();
}, error => {
loading.dismiss();
})
},1000)
}
}
]
});
alert.present();
}
}.
配置热更新过程中遇到的问题:
问题一：
问题一:[14:18:21] typescript: F:/node_modules/@ionic-native/hot-code-push/index.d.ts, line: 2
Cannot find module 'rxjs/Observable'.
L1: import { IonicNativePlugin } from '@ionic-native/core';
L2: import { Observable } from 'rxjs/Observable';
L3: export interface HotCodePushVersion {
解决方案：插件版本问题
npm i @ionic-native/[email protected] --save
npm i [email protected] --save