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目錄就能定位到服務器上具體磁盤的路徑。

運行效果

總結

以上是生活随笔為你收集整理的Vue用Cordova打包后的app自升级功能实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。