美文网首页
cordova Android端实现版本更新功能

cordova Android端实现版本更新功能

作者: Miraitowa_718e | 来源:发表于2021-06-08 16:18 被阅读0次

一、场景描述

1、由于APP应用环境是需要发布到客户端进行更新,每次发布更新时需要连接到内网才能更新,更新共采用了两种方式。
①:cordova-hot-code-push-plugin 插件进行热更新,遇到了应用缓存问题导致更新失败,需要清除缓存才可以,有更好的解决方案欢迎指点。
②:采用检查更新方式,每次进入系统后,主动调用检查更新
③:思路:登录系统=>获取当前安装版本号=>调用服务端获取版本信息进行比较=>当前版本小于服务端版本则提示版本更新信息=>下载最新安装包=>安装。

  所需插件:
  1、cordova-plugin-app-version 获取 config.xml版本号            
  2、cordova-plugin-file-transfer 下载最新版本apk
  3、cordova-plugin-file-opener2 打开安装,此处遇到了签名不一致不能覆盖安装问题
 index.html
    # 引入cordova
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Security-Policy" content="media-src *; img-src * data: 'unsafe-inline';default-src *; style-src 'self' http://* 'unsafe-inline'; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'; font-src * data:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
    <meta name="color-scheme" content="light dark">
    <title></title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
login.vue
 # 1、获取当前版本与服务端版本比较--此处比较逻辑由后端处理返回
      async getVersions(){
         let versionCode =  await window.cordova.getAppVersion.getVersionNumber();
         let resp = await commApi.checkVersion(versionCode);
         this.versions = resp.data;
            if(this.versions.status){
                this.$dialog.alert({
                    title: '版本更新',
                    message: `\t 当前最新版本为:${this.versions.version},请更新!\n 更新说明:\n ${this.versions.remark}`,
                    messageAlign:'left'
                }).then(() => {
                    this.progressShow = true;
                    //处理下载逻辑
                    this.downLoadApk(this.versions.dataUrl).then(result => {
                       this.$toast('下载成功!');
                    }).catch(err => {
                        this.$toast('下载失败,请检查网络是否畅通!');
                    });
                });
            }else{
                 this.$toast('已是最新版本!');
            }
        },
  # 2、下载最新版本apk
      downLoadApk(url) {
          let _this = this;
          _this.progress = 0;
          _this.fileTransfer = new FileTransfer();
          //监听下载进度
          _this.fileTransfer.onprogress = function(e) {
              if (e.lengthComputable) {
                  const progress = e.loaded / e.total;
                  _this.progress = (progress * 100).toFixed(2);
                }
            };
           var targetPath = 'cdvfile://localhost/persistent/app.apk';
           _this.fileTransfer.download(
                encodeURI(url), //服务器地址
                targetPath, //本地存储地址
                function (entry) { //下载完成回调
                    _this.progressShow = false;
                    let url = entry.toURL();
                    window.cordova.plugins.fileOpener2.open(url, 'application/vnd.android.package-archive', {
                        error: function(e) {
                          console.log('open fail')
                        },
                        success: function() {
                           console.log('open successfully')
                        }
                    })
                }
            );
        },

展示效果

Screenshot_20210608-160115.jpg
Screenshot_20210608-160123.jpg

相关文章

网友评论

      本文标题:cordova Android端实现版本更新功能

      本文链接:https://www.haomeiwen.com/subject/kvlfeltx.html