ionic3热更新

目录

前言

步骤

1.热更新插件

2.安装Cordova Hot Code Push 命令行客户端

3.在目录下手动创建 cordova-hcp.json

4.config.xml中添加以下标签

5.至此，自动更新已经完成，如果需要提示手动更新，请继续以下操作

5.1 安装hot-code-push插件

5.2 app.component.ts文件修改

6.至此，更新配置已完成，下面就是使用重点了

7.将www文件夹发到服务器上（重点：服务器一定要可以访问到，其实这步就是cordova-hcp serve）

8.打包APP进行测试，不截图了

总结

环境配置

打包流程

热更新服务器配置

---

 

---

前言

ionic3热更新，虽然网上有很多例子，都是可以实现，但问题描述不详尽，导致按照方法却无法实现，又找不到原因，刚好以前的项目需要添加热更新功能，所以记录下来步骤和注意事项

---

 

步骤

1.热更新插件

ionic cordova plugin add cordova-hot-code-push-plugin

网上还有说需要安装ionic cordova plugin add cordova-hot-code-push-local-dev-addon，但实际上并不需要安装

2.安装Cordova Hot Code Push 命令行客户端

全局安装命令cnpm install -g cordova-hot-code-push-cli这个主要是生成chcp.json和chcp.manifest 作为热更新时的对比文件

3.在目录下手动创建 cordova-hcp.json

{

  "name": "gjmes",

  "autogenerated": true,

  "ios_identifier": "",

  "android_identifier": "",

  "update": "now",

  "min_native_interface": 1,

  "content_url": "http://10.68.100.124:8080/www/"

} 

update是更新类型，有三种取值，分别为start，now，resume

app每次启动会去服务器判断有无更新，有更新则下载更新内容

start:下载完更新，app下次启动的时候才会更新内容；

now:下载完更新，立即刷新页面应用更新；

resume:下载完更新，当app从后台切换到前台时应用更新

http://10.68.100.124:8080 服务器地址  www文件夹是ionic编译后产生的（下面遇到的地址都是这个意思）

4.config.xml中添加以下标签

 <chcp>

        <auto-download enabled="true" />

        <auto-install enabled="true" />

        <native-interface version="1" />

        <config-file url="http://10.68.100.124:8080/www/chcp.json" />

        <local-development enabled="true" />

    </chcp>

下面图片是提示手动更新（不提示直接更新请复制上面的代码）：

5.至此，自动更新已经完成，如果需要提示手动更新，请继续以下操作

5.1 安装hot-code-push插件

 npm install hot-code-push -save

5.2 app.component.ts文件修改

引入：

import {  AlertController, LoadingController } from 'ionic-angular';

import { SplashScreen } from '@ionic-native/splash-screen';

 

添加以下2个方法：

import { TabsPage } from '../pages/tabs/tabs';

import { LoginPage } from '../pages/login/login';

import { HotCodePush } from '@ionic-native/hot-code-push';

fetchUpdate() {

//服务器上的地址

const options = {

      'config-file': 'http://10.68.100.124:8080/www/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();

  }

调用：

6.至此，更新配置已完成，下面就是使用重点了

网上说的cordova-hcp serve 不用管他  这个只是启动一个服务而已，报错就不要管 毫无用处

步骤：首先运行一遍 生产编译的www文件夹  ionic serve 或者ionic build

然后再 cordova-hcp build(重点：该语句只能在低一点版本的node执行，最新node执行会报错)，执行成功后，会在www文件夹下生成这2个文件

7.将www文件夹发到服务器上（重点：服务器一定要可以访问到，其实这步就是cordova-hcp serve）

http://10.68.100.124:8080/www 可以访问到APP首页，这里不截图了

http://10.68.100.124:8080/www/chcp.json 可以访问到配置的文件

8.打包APP进行测试，不截图了

---

总结

环境配置

推荐环境

1. nvm node切换工具
2. 推荐node版本 v12.16.1(开发) 、v8.12.0(热更新配置生成)
3. sdk 28
4. cordova 10.0.0
5. npm 6.13.4

打包流程

全局安装 cnpm install -g cordova-hot-code-push-cli

1. nvm use v12.16.1
2. ionic cordova platform add android
3. ionic build
4. nvm use v8.12.0
5. cordova-hcp build
6. nvm use v12.16.1
7. cordova build android

热更新服务器配置

url='服务器地址+端口号'

1. config.xml

<chcp>
        <auto-download enabled="false" />
        <auto-install enabled="false" />
        <native-interface version="1" />
        <config-file url="url/www/chcp.json" />  
        <local-development enabled="true" />
</chcp>

1. cordova-hcp.json

"content_url": "url/www/"

1. app.component.ts

'config-file': 'url/www/chcp.json'