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配置文件中加入下面节点

                    默认是true，自动下载        默认是true，下载完成以后自动安装，        当前版本号

注：这里将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/hot-code-push@4.18.0 --save

npm i cordova-hot-code-push-plugin@1.5.3 --save

更多相关文章

随机推荐