ionic3 程序更新

由于ios只能通过app store进行更新，所以只能跳转方式进行更新。当然还有微软的code-push（热更新），不过这种方式不能更新版本号和插件，所以很适合用于快速修复bug，建议两种方式都结合使用。android版本的话可以使用官网提供的App Update插件进行更新。以下方法统一使用后台数据库接口进行判断是否需要更新。

官网地址：https://ionicframework.com/docs/native/app-update/

1. 安装插件

$ ionic cordova plugin add cordova-plugin-app-update
$ npm install --save @ionic-native/app-update

另外还需安装查看程序版本插件与打开系统浏览器插件

$ ionic cordova plugin add cordova-plugin-app-version
$ npm install --save @ionic-native/app-version

$ ionic cordova plugin add cordova-plugin-inappbrowser
$ npm install --save @ionic-native/in-app-browser

当两个使用了app update 的程序不能同时安装在手机上，出现冲突
https://github.com/vaenow/cordova-plugin-app-update/issues/67

图片.png

插件作者已修复了该bug，但是由于命令执行下载下来的不是最新的，所以仍会存在该问题。

下载最新版本代码

图片.png

图片.png

完成后解压带本地

图片.png

打开DownloadHandler.java 文件

图片.png

检查代码，没有改为如下代码即手动进行修改

import android.app.Activity;//导入Activity



 // 通过Intent安装APK文件
         if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.N){
             LOG.d(TAG, "Build SDK Greater than or equal to Nougat");
//           String applicationId = (String) BuildHelper.getBuildConfigValue(cordova.getActivity(), "APPLICATION_ID");
             String applicationId = (String) BuildHelper.getBuildConfigValue((Activity) mContext, "APPLICATION_ID");
             Uri apkUri = FileProvider.getUriForFile(mContext, applicationId + ".appupdate.provider", apkFile);
             Intent i = new Intent(Intent.ACTION_INSTALL_PACKAGE);
             i.setData(apkUri);

修改后

图片.png

图片.png

重新添加修改后的插件到项目,add后面为插件绝对路径

$ ionic cordova plugin rm cordova-plugin-app-update
$ ionic cordova plugin add E:\devxtremeApp\cordova-plugin-app-update

如果执行build android 的时候，如果发现报错，是因为编译版本不一致导致的

图片.png

根据报错的路径找到相关代码，把N改为M

图片.png

重新添加修改后的插件到项目

$ ionic cordova plugin rm cordova-plugin-app-update
$ ionic cordova plugin add E:\devxtremeApp\cordova-plugin-app-update

这样，错误就不存在了

2. 封装更新代码

首先在服务器新增一份xml配置文件，内容如下：

    2100000000
    Easypet
    http://127.0.0.1/easypet/apk/Easypet.apk

封装调用更新代码

import { AlertController, Platform } from 'ionic-angular'; 
import { AppUpdate } from '@ionic-native/app-update';
import { AppVersion } from '@ionic-native/app-version';
import { InAppBrowser } from '@ionic-native/in-app-browser';

 constructor( private platform: Platform,
           private alertCtrl: AlertController, 
           private appVersion: AppVersion,
           private inAppBrowser: InAppBrowser){}

    /**
      * 检查app是否需要升级
      */
    detectionUpgrade() {
        //这里连接后台获取app最新版本号,然后与当前app版本号对比
        //版本号不一样就需要提示更新
        if (this.isMobile()) {
            //模拟请求后台接口,以实际接口为准
            this.http.get('/app/version').then(data => {
                if (!!!!data && !!!!data.version) {
                    this.getVersionNumber().then(res => {
                        if (!!!!res) {
                            if (res != data.version.fFileVersion) {
                                if (this.isAndroid()) {
                                    //  checkAppUpdate传入参数是update.xml文件访问路径          
                                    this.appUpdate.checkAppUpdate(APP_URL + '/apk/update.xml').then(data => {});
                                } else {
                                    this.appUpgrade();
                                }
                            }
                        }
                    });
                }
            });
        }
    }


   /**
     * 提示是否需要下载最新版本
     */
    appUpgrade() {
        this.alertCtrl.create({
            title: '发现新版本',
            subTitle: '检查到新版本，是否立即下载？',
            buttons: [{ text:'取消' },
            {
                text: '下载'
                handler: () => {
                        //跳转ios 版本下载地址
                        this.inAppBrowser.create(url, '_system');
                }
            }
            ]
        }).present();
    }

 /**
   * 获得app版本号,如0.01
   * @description  对应/config.xml中version的值
   * @returns {Promise}
   */
    getVersionNumber(): Promise {
        return new Promise((resolve) => {
            this.appVersion.getVersionNumber().then((value: string) => {
                resolve(value);
            }).catch(err => {
                console.log('getVersionNumber:' + err);
            });
        });
    }

   /**
     * 是否真机环境
     * @return {boolean}
     */
    isMobile(): boolean {
        return this.platform.is('mobile') && !this.platform.is('mobileweb');
    }

   /**
     * 是否android真机环境
     * @return {boolean}
     */
    isAndroid(): boolean {
        return this.isMobile() && this.platform.is('android');
    }

   /**
     * 是否ios真机环境
     * @return {boolean}
     */
    isIos(): boolean {
        return this.isMobile() && (this.platform.is('ios') || this.platform.is('ipad') || this.platform.is('iphone'));
    }

3. 调用

在app.component.ts里面每次初始化的时候调用封装的detectionUpgrade函数检测是否有更新即可

图片.png

4. 测试

图片.png

修改数据库后

图片.png

再次打开程序

2.gif