ionic4.0 详细热更新 自动模式以及手动模式--秒杀网上一切热更新因为网上没有手动更新的详细代码 测试无误上线发布了的东西.

ionic4.0 详细热更新 自动模式以及手动模式(全)–纯手打,独一无二,绝对好用.

网上一大堆ionic 热更新,但是都是说的最基本的自动更新操作,安装几个插件,改几个配置文件,就草草了事,让我真的很烦躁,通过自己不断的查找,终于守得云开见月明,找到了手动热更新操作,以及通过点击事件触发,或者监听事件触发更新的方法…关键时刻还是要看官方文档,以及github网站.话不多说,接下来就上热更新操作
**

自动以及手动模式步骤

**

**

热更新插件

热更新前准备工作:当然是安装插件了哟.
**
1.热更新插件安装

ionic2.0安装方式:(已安装),我的是ionic

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

ionic 4.0安装方式,看自己版本

ionic cordova plugin add cordova-hot-code-push

ionic info 查看自己的环境配置

热更新步骤

1.cordova plugin add cordova-hot-code-push-plugin
2.cordova  plugin add cordova-hot-code-push-local-dev-addon
3.npm install -g cordova-hot-code-push-cli

上面三个,网上有的人说第二个不用安装,我还是安了,因为不知道,所以大不了安装了再卸载就是,
https://beta.ionicframework.com/docs/native/hot-code-push ionic 4.0官方插件安装文档
npm install –save @ionic-native/hot-code-push这个我没有安装,不过也没报错,也不知道有什么用,估计是在本地热导入了热更新插件吧,哈哈哈,反正我没有用

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

constructor(private hotCodePush: HotCodePush) { }

...

hotCodePush.fetchUpdate(options).then(data => { console.log('Update available'); })

本地服务器启动参考
https://blog.csdn.net/tyro_java/article/details/74937392

在项目根目录下执行 $cordova-hcp server , 然后ctrl / command + z 结束服务器，我们不使用它的服务器来测试。只为了使用它生成的一个配置文件，名为：.chcpenv

.chcpenv{
“content_url”: “http://192.168.131.2:1111/hot“,
“config_url”: “http://192.168.131.2:1111/hot/chcp.json
}
我们在项目APP根目录下新建一个cordova-hcp.json文件，这个文件是生成配置文件的模板，编辑如下
{
“autogenerated”: true,
“name”: “com.cqzuxia.zuxiaoa”,
“min_native_interface”: 1,
“content_url”: “http://192.168.131.2:1111/hot“,
“update”: “start”
}
在项目APP根目录执行cordova-hcp build, 这样就会按照上一步的cordova-hcp.json文件为模板在www目录中生成两个文件，chcp.json 和 chcp.manifest 两个文件。chcp.json 文件内容

——————————–chcp.json配置————————————-

{
  "autogenerated": true,
  "name": "com.cqzuxia.zuxiaoa",
  "min_native_interface": 1,
  "content_url": "http://192.168.131.2:31284",
  "update": "now",
  "release": "2018.09.04-16.27.07"
}
.chcpenv{
  "content_url": "http://192.168.131.2:1111/hot",
  "config_url": "http://192.168.131.2:1111/hot/chcp.json
  }

---

——————————–.chcpenv配置————————————-

.chcpenv{
  "content_url": "http://192.168.131.2:1111/hot",
  "config_url": "http://192.168.131.2:1111/hot/chcp.json
  }

chcp.manifest 文件内容是存的www文件的hash值,以后就会根据这个值比较是否改变来确定是否更新.当然还有看chcp.json中的时间戳 release.

自建的本地服务器

我们现在可以开启一个本地服务器，随便找一个地方新建一个文件夹，然后在文件夹根目录下执行
hs -o -p 1111 (备注，hs命令是全局安装了http-server之后才能使用，npm i -g http-server),
http://192.168.131.2:31284/ 项目执行cordova-hcp server 后的服务器地址,一般不用,用自己自建的本地服务器,尽量不要和自己的项目冲突,后面会感觉很绕,不在项目中建服务器

d:

cmd ->
d: –>
cd SVNfilenew ->
cd hotcodedevelop ->
d:\SVNfilenew\hotcodedevelop 对,就是这个目录下执行:hs -o -p 1111

D:\SVNfilenew\hotcodedevelop
如何启动本地服务器??
关键命令行:
hs -o -p 1111

启动本地服务器地址

cordova-hcp server
这样我们可以通过访问 http://127.0.0.1:1111 来访问我们这个本地服务器了。
ipconfig查看本机IP:访问本机本地服务器

http://192.168.131.2:1111
这个本地服务器就是保存热更新的代码的地方,也就是需要编译ionic cordova run Android 生成后的www文件存放地址.当然上线后就放在云服务器上相应的地址了.
——————————-config.xml—————————————–

 <chcp>
        <!-- 版本号 -->
        <native-interface version="1" />
        <!-- 服务器地址 -->
        <config-file url="http://192.168.131.2:1111/hot/chcp.json" />
        <!-- 自动下载 -->
        <auto-download enabled="true" />
        <!-- 自动安装 -->
         <auto-install enabled="true" />
    </chcp>

---

5.cordova-hcp build
在项目APP根目录执行命令使用cordova-hcp build重新生成文件的hash.这一步很容易被忽略 —->在足下校园APP目录下执行

再把www考到服务器对应的www.
到此为止,热更新的自动操作完成,每次打开APP都会更新资源了,再也不需要手动去下载版本了,是不是挺爽.但是还远远不够,达不到要求啊.
上面这些操作就是自动热更新的步骤,只不过手动热更新同样要使用这些步骤.

手动更新开始:

手动更新,就意味着要控制更新的代码所执行方法
下面哈哈,请见证奇迹的时刻
安装步骤同上

—————–自动模式————–config.xml—————————————–

 <chcp>
        <!-- 版本号 -->
        <native-interface version="1" />手动配置这些都不需要了,会在代码中添加.
        <!-- 服务器地址 -->
        <config-file url="http://192.168.131.2:1111/hot/chcp.json" />手动配置这些都不需要了,会在代码中添加.
        <!-- 自动下载 -->
        <auto-download enabled="false" />
        <!-- 自动安装 -->
         <auto-install enabled="false" />
    </chcp>

—————-手动模式—————config.xml—————————————–

 <chcp>
        <!-- 自动下载 -->
        <auto-download enabled="false" />
        <!-- 自动安装 -->
         <auto-install enabled="false" />
    </chcp>

---

主要讲解ts模块内容
app.component.ts中
添加声明declare var chcp :any;

1.通过监听更新,

  //程序在前台切换到后台
      document.addEventListener("pause", () => {
        console.log("后台隐藏：");
        this.pause();
      }, false);

      //程序在后台切换到前台操作
      document.addEventListener("resume", () => {
        console.log("前台显示：");
        // this.CheckResource();
        this.resume();
      }, false);

2.通过APP登录后进入界面时更新控制

//资源包热更新信息检测
      this.CheckResource();
// platform.resume.subscribe(() => this.fetchUpdate());

// 是否更新-----------------------------资源包热更新
  //资源包热更新信息检测
  CheckResource() {
    this.sys.CheckResourceVersion((isUpdate, type) => {

      console.log("是否有更新===="+isUpdate);
      console.log("更新类型为===="+type);
      if (isUpdate) {
        if (type == 0) {
          this.silentUpdate();
        } else if (type == 1) {
          this.hintUpdate(type);
        }