Vue用Cordova打包后的app自升级功能实现

忘是亡心i 2023-10-18 10:19 73阅读 0赞

### Vue项目 ###

1.在util目录下新建upgrade.js

关键代码：

import * as common from '@/api/common';
    //检测新版本升级
    export function upgradeForAndroid( releasePath,packageName) {
    AlertModule.show({title: '已经下载：0%'})
    var url = releasePath;    //apk所在的服务器路径
    var targetPath = cordova.file.externalCacheDirectory + "Download/Pass/" + packageName;   //要下载的目标路径及文件名
    var trustHosts = true;
    var options = {};
    
    console.log("url:" + url);
    console.log("targetPah:" + targetPath);
    console.log("trustHost:" + trustHosts);
    downLoadApp();
    
    function downLoadApp() {
    // 初始化FileTransfer对象
    var fileTransfer = new FileTransfer();
    fileTransfer.onprogress = function(progressEvent) {
    if (progressEvent.lengthComputable) {
    var downloadProgress = (progressEvent.loaded / progressEvent.total) * 100;
    
    var result="已经下载："+ Math.floor(downloadProgress)+ "%";
    AlertModule.show({title: result})
    }
        };
        // 调用download方法
        fileTransfer.download(
          url,         //uri网络下载路径
          targetPath,      //url本地存储路径
          function (entry) {
            console.log("download complete: " + entry.toURL());
            cordova.plugins.fileOpener2.open(
              targetPath,
              'application/vnd.android.package-archive',
              {
                error: function (e) {
                  console.log('Error status: ' + e.status + ' - Error message: ' + e.message);
                  AlertModule.show({title: "打开下载文件失败"})
                },
                success: function () {
    
                  console.log('open successfully');
                }
              })
          },
          function (error) {
            AlertModule.show({title: "下载失败"})
            console.log("download error source " + error.source);
            console.log("download error target " + error.target);
            console.log("upload error code" + error.code);
          }
        );
      }
    }
    
    /*
     * 检测升级方法
     */
    export function  checkUpgrade(platformType, title) {
      console.log("设备类型：" + platformType);
      var appName = "应用名字";
      var appType = platformType;
        /**
         * 从服务器获取应用的版本信息，和本地应用版本对比
         * @param appName 应用名称
         * @param appType 应用类型
         */
        common.getAppInfo(appName,appType).then(response =>{
    
    
          if(response!=null){
           var  packageName = response.data.packageName;
            var releasePath = process.env.BASE_API+"/" + response.data.path + "/" + response.data.packageName;
            var serverVersion = response.data.appVersion;
            //获取本地App版本;
            cordova.getAppVersion.getVersionNumber().then(function (version) {
              console.log("本地版本：" + version);
              console.log("服务器版本：" + serverVersion);
              if (version < serverVersion) {
                //$rootScope.$state.isLogin = false;
                localStorage.setItem("appUpgrade", "0");
                localStorage.removeItem("password");
                //退出登录
                appRouter.$vux.confirm.show({
                  // 组件除show外的属性
                  onCancel () {
                  },
                  onConfirm () {
                    if (platformType == 'Android') {
                      console.log("---Android升级中,请稍后---");
                      upgradeForAndroid(releasePath,packageName);
                    } else {
                      console.log("---Ios升级中,请稍后---");
                      cordova.plugins.externalExtension.openURL(response.data.path.toString());
                    }
                  },
                  title:'发现新版本：'+serverVersion +','+'请进行升级' ,
                  content: title+response.data.remark,
                })
    
              }
            });
          }
        }).catch(error =>{
          //请求失败处理函数
         AlertModule.show({title: "请求错误!!"})
        })
        // 监听网络状况，无网络时
        document.addEventListener('offline', function () {
          debugger
          console.log("网络异常，不能连接到服务器！");
          alert({
            template: "<span class='c_white text_bold'>网络异常，不能连接到服务器！</span>"
          });
    
          setTimeout(function () {
            console.log("settimeOut方法");
          }, 2000);
        }, false);
    }

2.来到api目录下的common.js

关键代码：

//从服务器获取应用的版本信息，和本地应用版本对比
    export function getAppInfo(appName,appType) {
    return fetch({
    headers: {"Content-Type": "application/json"},
    url: '/mobile/common/getAppInfo',
    method: 'post',
    data:{
    appName:appName,
    appType: appType
    }
    })
    }

3.来到config目录下的dev.env.js,配置开发环境的服务器url（本地服务器）

关键代码：

'use strict'
    const merge = require('webpack-merge')
    const prodEnv = require('./prod.env')
    
    module.exports = merge(prodEnv, {
      isWeChat: false,
      NODE_ENV: '"development"',
      BASE_API: 'http://127.0.0.1:8080/你自己的项目url'
    })

4.然后找到config目录下的pro.env.js，配置正式环境下的服务器url(云端服务器)

关键代码：

'use strict'
    module.exports = {
    isWeChat: false,
    NODE_ENV: '"production"',
    BASE_API: '"云端服务器域名"'
    }

### 配置后台SSM代码 ###

1.根据前端common.js配置的路径，找到后台@RequestMapping对应路径下的Action

这里是：mobile/action/CommonAction.java

对应于：@RequestMapping("mobile/common")下的@RequestMapping(value = "getAppInfo")

关键代码：

@ResponseBody
     @RequestMapping(value = "getAppInfo")
     public Json<SysApp> getAppInfo(@RequestBody Map<String, Object> map) {
      SysApp app=null;
      try {
       Map<String,Object> param= new HashMap<String,Object>();
       param.put("stauts","0");
       param.put("appName",map.get("appName"));
       param.put("appType",map.get("appType"));
       List<SysApp> list = appService.getByParam(param);
       if(list.size()>0) {
        app=list.get(0);
       }
       return new Json<SysApp>().success(app);
      } catch (Exception e) {
       e.printStackTrace();
       LogService.getInstance().error("APP-> CommonAction -> 'getAppInfo'->getAppInfo is exception",e);
       return new Json<SysApp>().fail();
      }
    
     }

2.然后一层层来到seviceImpl、dao、mapper层，就是简单的单表查询。

数据库内容：

CREATE TABLE `sys_app` (
      `Id` int(11) NOT NULL AUTO_INCREMENT COMMENT '自增主键',
      `AppName` varchar(100) DEFAULT NULL COMMENT 'App名称',
      `AppType` varchar(20) DEFAULT NULL COMMENT 'App类型',
      `AppVersion` varchar(20) DEFAULT NULL COMMENT 'App版本',
      `PackageName` varchar(100) DEFAULT NULL COMMENT '打包名称',
      `Path` varchar(100) DEFAULT NULL COMMENT '路径',
      `PublishDate` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '发布日期',
      `ProductId` int(11) DEFAULT NULL COMMENT '所属产品Id',
      `ProductName` varchar(50) DEFAULT NULL COMMENT '所属产品名称',
      `Remark` varchar(4000) DEFAULT NULL COMMENT '备注',
      PRIMARY KEY (`Id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT charset=utf8 ROW_FORMAT=DYNAMIC COMMENT='APP管理 - APP版本控制表';

### 更新版本设置 ###

将数据库中，AppVersion改为与上次版本不一致的版本号，要大于上次的版本号。

将PackageName设置为服务器上的apk的名字

将Path设置为为Tomcat上配置的虚拟路径。

Remark设置为更新的提示内容

### 服务器设置 ###

1.将已经打包好的apk文件放置在服务器上的某个目录，这里是：

C:\\release\\sites\\upload\\apk

然后打开服务器上的Tomcat下的conf目录下的server.xml配置虚拟路径的映射

2.这样就就将服务器上的物理路径与虚拟路径映射完成，此时数据库中的upload/apk目录就能定位到服务器上具体磁盘的路径。

### 运行效果 ###

![Image 1][]![70][]

![70 1][]![Image 1][]

[Image 1]: 
[70]: https://img-blog.csdn.net/20181023133024245?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20181023133231640?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70