uni-app自动升级功能

效果图

一、VUE 

login.vue

<template><view><view class="uni-common-mt"><view class="uni-flex uni-column"><view class="flex-item  flex-item-V"><view class="logo"><image src="/static/image/uniui-logo.png" style="height:90px;display: none;"></image></view><view class="logoHead">欢迎使用WMS</view></view><view class="flex-item flex-item-V"></view><view class="flex-item flex-item-V form"><form><view class="uni-form-item uni-column"><uni-easyinput v-model="formData.loginName" maxlength="50" name="loginName"placeholder="请输入账号" prefixIcon="person" value=""></uni-easyinput></view><view class="uni-form-item uni-column"><uni-easyinput v-model="formData.password2" maxlength="50" name="password" type="password"placeholder="请输入密码" prefixIcon="locked" @confirm="formSubmit"></uni-easyinput></view><view class="uni-btn-v loginBtn"><button form-type="submit" type="primary" :loading="loginLoading" @click="formSubmit">登录</button></view></form></view></view></view></view><view class="register-section">Copyright © 2025 **科技 版本号：{{ThisVersion}}</view>
</template><script setup>import {nextTick,onMounted,ref} from 'vue';import {userApi} from "@/api/user";import graceChecker from "@/common/graceChecker.js";import CryptoJS from 'crypto-js';import G from '@/utils/global.js'const ThisVersion = G.ApkVersion;const loginLoading = ref(false);const myForm = ref();const formData = ref({loginName: "",password: "",password2: "",tenantId: "1867144130501541888",lang: "zh_cn",industry: null}); //提交登录const formSubmit = (e) => {//定义表单规则var rule = [{name: "loginName",checkType: "string",checkRule: "1,20",errorMsg: "请输入1-20位的账号"},{name: "password2",checkType: "string",checkRule: "3,20",errorMsg: "请输入3-20密码"}];//进行表单检查 var checkRes = graceChecker.check(formData.value, rule);if (checkRes) {//登录信息 formData.value.password = CryptoJS.SHA256(formData.value.password2).toString(CryptoJS.enc.Hex);let thisObj = {"thisObj": formData.value};loginLoading.value = true;uni.setStorageSync('token', "login");//1.登录得到codeuserApi.LoginByOauth(thisObj).then(loginRes => {console.log('loginRes========', JSON.stringify(loginRes));if (loginRes.mfail != '0' || loginRes.data == null) {loginLoading.value = false;uni.showToast({icon: 'none',duration: G.ShowPopTime,title: `登录异常，code获取异常：${loginRes.msg}`});return;} else {//2.通过code获取Tokenlet postData = {code: loginRes.data.code};//获取tokenuserApi.GetTokenFromCode(postData).then(tokenRes => {console.log('Token========', JSON.stringify(tokenRes));if (tokenRes.mfail != '0' || tokenRes.data == null) {loginLoading.value = false;uni.showToast({icon: 'none',duration: G.ShowPopTime,title: `登录异常，token获取异常：${res.msg}`});return;}//登录成功后，将token写入全局变量uni.setStorageSync('token', tokenRes.data.token);//跳转到首页nextTick(() => {uni.reLaunch({animationType: 'zoom-out',animationDuration: 200,url: "/pages/index/index"});});}).catch(error => {uni.setStorageSync('token', null);loginLoading.value = false;uni.showToast({icon: 'none',duration: G.ShowPopTime,title: `访问失败，请联系管理员！：${res.msg}`});});}}).catch(error => {uni.setStorageSync('token', null);loginLoading.value = false;uni.showToast({icon: 'none',duration: G.ShowPopTime,title: `访问失败，请联系管理员！：${res.msg}`});});} else {loginLoading.value = false;uni.showToast({title: graceChecker.error,icon: "error",duration: G.ShowPopTime});}}//自动更新升级新版本const autoUpdate = () => { var myVerson =ThisVersion; //Android当前版本var obj = {AppType: G.AppType, //1.Android(默认)  2.ISO AppVersion: myVerson}		userApi.getVersion(obj).then(res => {console.log("查询服务器版本信息---------------- " + JSON.stringify(res));if (res == undefined) {console.log('连接服务器失败！');} else {if (res.IsUpdate == true) {console.log('需要更新版本！');  uni.showModal({title: "版本更新",content: '检测到程序有新版本，是否立即进行新版本下载？',confirmText: '立即更新',cancelText: '稍后进行',success: function(res) {if (res.confirm) {//设置 最新版本apk的下载 let downloadApkUrl = G.DownLoadUrl;//GLOBAL.DOMAIN_URL + "/apk/mzz2.apk";let dtask = plus.downloader.createDownload(downloadApkUrl, {},function(d, status) {// 下载完成 if (status == 200) {plus.runtime.install(plus.io.convertLocalFileSystemURL(d.filename), {}, {},function(error) {uni.showToast({title: '安装失败',duration: 1500});})} else {uni.showToast({title: '更新失败',duration: 1500});}});dtask.start();var prg = 0;var showLoading = plus.nativeUI.showWaiting("正在下载");//创建一个showWaiting对象 dtask.addEventListener('statechanged', function(task, status) {// 给下载任务设置一个监听 并根据状态  做操作switch (task.state) {case 1:showLoading.setTitle("正在下载");break;case 2://showLoading.setTitle("已连接到服务器");break;case 3:prg = parseInt((parseFloat(task.downloadedSize) /parseFloat(task.totalSize)) *100);showLoading.setTitle("正在下载" + prg + "%  ");										break;case 4:plus.nativeUI.closeWaiting();//下载完成break;}});} else if (res.cancel) {console.log('稍后更新');}}});} else {console.log('不需要更新版本！');}}}).catch(error => {console.log('访问失败，请联系管理员！！');});}onMounted(() => {uni.setStorageSync('token', null);autoUpdate();});
</script><style scoped lang="scss">view {box-sizing: border-box;}.uni-common-mt {margin: 0;}.flex-item:nth-child(1) {display: flex;flex-flow: column;justify-content: center;align-content: center;}.flex-item:nth-child(2) {height: 120rpx;background: url("/static/login-style.png") round space;}.logo {min-height: 100rpx;padding-left: 10px;margin-top: 100rpx;}.logoHead {font-family: 'Microsoft YaHei', sans-serif;text-align: center;color: darkblue;font-size: 58rpx;font-weight: bold;text-shadow: 1px 1px rgba(0, 0, 0, .3);padding-bottom: 40rpx;}.loginBtn {padding-top: 40rpx;}.form {padding: 0px 40px;}.register-section {position: absolute;left: 0;bottom: 20px;width: 100%;font-size: $uni-font-size-sm;color: $uni-text-color;text-align: center;}
</style>

global.js

export default {CAPTCHA_TYPE: {COMMON: 'common'},ShowPopTime: 5000, //弹框持续时间AppType: 1, //1.Android(默认)  2.ISOApkVersion: 'v5.3.25.2', //Android当前版本IsoVersion: 'v5.2.20.1', //Iso当前版本DownLoadUrl: 'http://192.168.6.1/APPDownLoad/TJWMSApp.apk', //正式下载App地址REQUEST_URL: 'http://192.168.6.3', //正式api地址 http://192.168.6.3，代理地址/base-api	// REQUEST_URL: 'http://localhost:80', //本地api地址/FileHandler: 'http://192.168.6.1/APPDownLoad/' //正式保存图片地址UAWebService/api/Test/SaveFile
};

API user.ts

import { request } from '@/utils/request.js';
//1.登录得到code
const LoginByOauth = (data) => {return request.post('/levault/usrsvr/Usr/LoginByOauth', data);
};
//2.通过code获取Token
const GetTokenFromCode = (data) => {return request.post('/levault/usrsvr/Usr/GetTokenFromCode', data);
};
// 获取版本号const getVersion=(data)=> {return request.post('http://192.168.6.1/api/GetVersion', data);  
};
export const userApi = {LoginByOauth,GetTokenFromCode,getVersion
};

request.js

import config from '@/utils/config';
// 统一 POST 请求方法示例
const post = async (url, data, options = {}) => {if (!String(url).startsWith('http://')) {url = config.url + url;}console.log("uni.getStorageSync('token')==========", uni.getStorageSync('token'));//判断是否登录if (uni.getStorageSync('token') == null || uni.getStorageSync('token') == '') {// uni.reLaunch({// 	animationType: 'zoom-out',// 	animationDuration: 200,// 	url: "/pages/login/index"// });}const defaultOptions = {method: 'POST',header: {'Content-Type': 'application/json'// ,'token': `${uni.getStorageSync('token')}`}};const finalOptions = { ...defaultOptions, ...options };// 如果服务器需要 token，可以在这里添加 Authorization 头部if (!finalOptions.header['token'] && uni.getStorageSync('token')) {finalOptions.header['token'] = `${uni.getStorageSync('token')}`;}// if (!finalOptions.header['Authorization'] && uni.getStorageSync('token')) {//   finalOptions.header['Authorization'] = `Bearer ${uni.getStorageSync('token')}`;// }console.log('POST 请求参数=====', JSON.stringify(data));console.log('POST 请求header=====', finalOptions);console.log('POST url=====', url);uni.showLoading({title: '加载中...'});return new Promise((resolve, reject) => {uni.request({...finalOptions,url: url,data: data,success: (res) => {console.log('请示结果=============', res);if (res.statusCode === 200) {resolve(res.data);} else {reject(new Error(`POST请求失败，状态码：${res.statusCode}`));uni.showToast({icon: 'none',title: `POST请求失败，状态码：${res.statusCode}`});}},fail: (err) => {reject(err);// 网络错误或其他请求失败的情况uni.showToast({icon: 'none',title: 'POST系统异常,请稍后再试'});},complete: () => {uni.hideLoading();}});});
};
// 统一 GET 请求方法示例
const get = async (url, data, options = {}) => {url = config.url + url;console.log("uni.getStorageSync('token')==========", uni.getStorageSync('token'));const defaultOptions = {method: 'GET',header: {'Content-Type': 'application/json'// ,'token': `${uni.getStorageSync('token')}`}};//判断是否登录if (uni.getStorageSync('token') == null || uni.getStorageSync('token') == '') {// uni.reLaunch({// 	animationType: 'zoom-out',// 	animationDuration: 200,// 	url: "/pages/login/index"// });}const finalOptions = { ...defaultOptions, ...options };// 如果服务器需要 token，可以在这里添加 Authorization 头部if (!finalOptions.header['token'] && uni.getStorageSync('token')) {finalOptions.header['token'] = `${uni.getStorageSync('token')}`;}// if (!finalOptions.header['Authorization'] && uni.getStorageSync('token')) {//   finalOptions.header['Authorization'] = `Bearer ${uni.getStorageSync('token')}`;// }console.log('GET 请求header=====', finalOptions);console.log('GET url=====', url);console.log('GET 请求参数=====', data);uni.showLoading({title: '加载中...'});return new Promise((resolve, reject) => {uni.request({...finalOptions,url: url,data: data,success: (res) => {console.log('GET请示结果=============', res);if (res.statusCode === 200) {resolve(res.data);} else {reject(new Error(`GET请求失败，状态码：${res.statusCode}`));uni.showToast({icon: 'none',title: `GET请求失败，状态码：${res.statusCode}`});}},fail: (err) => {reject(err);// 网络错误或其他请求失败的情况uni.showToast({icon: 'none',title: 'GET系统异常,请稍后再试'});},complete: () => {uni.hideLoading();}});});
};
const postAsync = async (url, data, options = {}) => {try {// 合并基础URLconst fullUrl = config.url + url;// 构建请求头（动态添加token）const headers = {'Content-Type': 'application/json',...(uni.getStorageSync('token') && { token: uni.getStorageSync('token') })};// 合并自定义配置const finalOptions = {method: 'POST',header: { ...headers, ...options.header },...options};// 调试日志（开发环境保留）if (process.env.NODE_ENV === 'development') {console.log('[POST Request]', {url: fullUrl,data,headers: finalOptions.header});}// 发送请求const response = await new Promise((resolve, reject) => {uni.request({url: fullUrl,data,...finalOptions,success: (res) => resolve(res),fail: (err) => reject(err)});});// 处理响应状态码if (response.statusCode !== 200) {const errorMessage = `请求失败 (${response.statusCode})`;uni.showToast({ icon: 'none', title: errorMessage });throw new Error(errorMessage);}return response.data;} catch (error) {// 统一错误处理const errorMessage = error.errMsg || '系统异常，请稍后再试';uni.showToast({ icon: 'none', title: errorMessage });throw error; // 继续抛出错误供调用方捕获}
};
export const request = {post,postAsync,get
};

二、C# MVC接口代码

检测系统版本号，是否需要升级

using MAPP.WebApi.Models;using System;
using System.Collections.Generic;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using System.Web.Configuration;namespace MAPP.WebApi.Controllers
{public class SystemController : ApiController{/// <summary>/// 校验系统版本号，返回是否需要更新/// </summary>/// <param name="jo"></param>/// <returns></returns> [HttpPost, Route("api/GetVersion")]public HttpResponseMessage GetVersion(JObject jo){var result = new AppSystemModel();result.IsSuccess = true;result.IsUpdate = false;int appType = 1;//默认安卓系统try{//判断是否启用自动更新if (WebConfigurationManager.AppSettings["OpenAppUpdateOnline"].ToString() != "1"){result.IsUpdate = false;result.NewVersion = "";//result.returnMsg = "不需要更新！";return Request.CreateResponse(HttpStatusCode.OK, result);}string appVersion = "";if (jo["AppVersion"] == null){result.IsSuccess = false;result.IsUpdate = false;result.Msg = "无法获取当前版本号！";return Request.CreateResponse(HttpStatusCode.OK, result);}if (jo["AppType"] != null){if (jo["AppType"].ToString() == "2"){appType = 2;}}if (appType == 1){appVersion = WebConfigurationManager.AppSettings["APKVersion"].ToString();}else{appVersion = WebConfigurationManager.AppSettings["IOSVersion"].ToString();}//服务器端版本Version v1_server = new Version(appVersion.ToLower().Replace("v", ""));//手机端版本Version v2_pda = new Version(jo["AppVersion"].ToString().ToLower().Replace("v", ""));if (v1_server > v2_pda){result.IsUpdate = true;result.Msg = "请更新系统！";return Request.CreateResponse(HttpStatusCode.OK, result);}else{result.IsUpdate = false;result.Msg = "";return Request.CreateResponse(HttpStatusCode.OK, result);}}catch (Exception ex){result.IsSuccess = false;result.IsUpdate = false;result.Msg = "获取版本号失败：" + ex.Message;return Request.CreateResponse(HttpStatusCode.OK, result);}}}
}

web.config

<?xml version="1.0" encoding="utf-8"?>
<!--有关如何配置 ASP.NET 应用程序的详细信息，请访问https://go.microsoft.com/fwlink/?LinkId=301879-->
<configuration><appSettings><!--==========Android版本相关配置============--><!--APP更新下载路径--><add key="AppDownLoadUrl" value="http://192.168.6.1/UpLoad/APPDownLoad/"/><!-- APP是否启用自动升级：1启用，2关闭 --><add key="OpenAppUpdateOnline" value="1"/><!-- ==========Android版本号============ --><add key="APKVersion" value="v1.5.20.1"/><!--==========IOS版本号============--><add key="IOSVersion" value="v1.3.31.1"/><add key="webpages:Version" value="3.0.0.0"/><add key="webpages:Enabled" value="false"/><add key="ClientValidationEnabled" value="true"/><add key="UnobtrusiveJavaScriptEnabled" value="true"/></appSettings><system.web><compilation debug="true" targetFramework="4.6.1"/><httpRuntime targetFramework="4.6.1"/></system.web><system.webServer><handlers><remove name="ExtensionlessUrlHandler-Integrated-4.0"/><remove name="OPTIONSVerbHandler"/><remove name="TRACEVerbHandler"/><add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler"preCondition="integratedMode,runtimeVersionv4.0"/></handlers><staticContent><mimeMap fileExtension=".apk" mimeType="application/vnd.android.package-archive" /></staticContent></system.webServer> 
</configuration>

AppSystemModel.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;namespace MAPP.WebApi.Models
{public class AppSystemModel{/// <summary>/// 是否成功/// </summary>public bool IsSuccess { get; set; }/// <summary>/// 返回App版本是否需要更新/// </summary>public bool IsUpdate { get; set; }/// <summary>/// 最新版本号/// </summary>public string NewVersion { get; set; }/// <summary>/// 返回消息/// </summary>public string Msg { get; set; }}public class Payloaddata{public string token { get; set; }public string nickname { get; set; }public string profile { get; set; }public bool hasLogin { get; set; }public bool isGoogle { get; set; }public object result { get; set; }}public class LoginModel{public string UserId { get; set; }public string RoleCode { get; set; }public object DeptId { get; set; }public string UserName { get; set; }}public class UserInfo{public string UserCode { get; set; }public string UserName { get; set; }public object AppModelPageList { get; set; }public object AppModelList { get; set; }}
}