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 = re...
·
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配置虚拟路径的映射
<Host name="" debug="0" appBase="webapps" unpackWARs="true" autoDeploy="true">
<Context docBase="C:\release\sites\upload" path="upload" reloadable="true"/>
</Host>2.这样就就将服务器上的物理路径与虚拟路径映射完成，此时数据库中的upload/apk目录就能定位到服务器上具体磁盘的路径。
运行效果
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献36条内容
所有评论(0)