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

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 () {debuggerconsole.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配置虚拟路径的映射

 <Host name="" debug="0" appBase="webapps" unpackWARs="true" autoDeploy="true">   <Context docBase="C:\release\sites\upload" path="upload" reloadable="true"/></Host>

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

运行效果