uniapp实现app自动更新详细步骤
本文介绍如何在uniapp中实现App的在线自动更新。通过后端接口获取最新版本号,前端在onShow或onLoad中比对当前版本与线上版本。若线上版本更高,则触发下载并静默安装APK,适用于未上架应用市场的内部工具类App。
需求背景与概述
需求概述:
近期遇到一个具体需求:一款用于扫码核验的App需要支持在线自动升级安装。由于该App较为简单,未发布至各大应用市场,因此经过调研,决定采用在线更新的方式来实现版本迭代。
后端接口与版本配置
第一步:首先需要一个可以更新和获取数据的接口(后端)
例如,首次打包时的版本名称设定为1.0.1。当用户手动将1.0.1版本安装到手机后,若后续要实现自动更新,再次打包的版本名称必须大于1.0.1。因为本次实现的逻辑核心在于根据版本名称进行比对。版本号配置位置:manifest.json >> 基础配置 >> 应用版本名称。
当需要更新App时,修改版本名称(必须大于上一个版本),然后开始打包。
同时,在后端的接口中同步更新此次打包的版本名称,确保前端能获取到最新的版本信息。
第二步:打包后的apk文件需要放在服务器上,然后拿到在服务器上的文件的地址(后续有用)
第三步:开始在App.vue里书写前端逻辑(直接贴代码)
- onLoad():在页面加载的时候触发,只会调用一次。在onLoad()函数中,可以通过option获取当前页面路径中的参数。
- onShow():在页面显示时调用,也就是切换页面的时候,或者切入前台的时候触发,可以多次触发。根据自己的需求来确定是写在onShow还是onLoad。
原理:获取当前app的版本名称,在onShow触发的时候调接口比对当前app版本名称和线上最新版本名称,如果线上最新版本名称大于当前版本名称则下载最新的apk安装更新
前端实现与核心逻辑
onShow: function() {
console.log('App Show')
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
this.version = widgetInfo.version
uni.request({
url: 'http://xxxx.cczu.edu.cn:8081/api/dict',
success: (res) => {
function compareVersion(version1, version2) {
const newVersion1 = `${version1}`.split('.').length < 3 ? `${version1}`.concat('.0') : `${version1}`;
const newVersion2 = `${version2}`.split('.').length < 3 ? `${version2}`.concat('.0') : `${version2}`;
//计算版本号大小,转化大小
function toNum(a){
const c = a.toString().split('.');
const num_place = ["", "0", "00", "000", "0000"],
r = num_place.reverse();
for (let i = 0; i < c.length; i++){
const len=c[i].length;
c[i]=r[len]+c[i];
}
return c.join('');
}
// 检测版本号是否需要更新
function checkPlugin(a, b) {
const numA = toNum(a);
const numB = toNum(b);
return numA > numB ? 1 : numA < numB ? -1 : 0;
}
return checkPlugin(newVersion1 ,newVersion2);
}
for (let i of res.data.content) {
if (i.description === 'app版本') {
// 1代表app新包版本号大于本地版本号
if (compareVersion(i.dictDetails[0].value, this.version) === 1) {
uni.showModal({
title: '提示',
content: '发现新的应用安装包,点击确定立即更新',
success: function (res) {
if (res.confirm) {
console.log('用户点击确定');
uni.showLoading({
title: '更新中……'
})
uni.downloadFile({
// 存放最新安装包的地址
url: 'http://xxxx.xxxx.com/__UNI__xxxx.apk',
success: (downloadResult) => {
uni.hideLoading();
if (downloadResult.statusCode === 200) {
uni.hideLoading();
plus.runtime.install(downloadResult.tempFilePath,{
force: false
}, function() {
console.log('install success...');
plus.runtime.restart();
}, function(e) {
uni.hideLoading();
console.error('install fail...');
});
}
}
});
} else if (res.cancel) {
console.log('用户点击取消');
}
}
});
} else {
}
}
}
}
});
});
},总结
到此这篇关于uniapp实现app自动更新详细步骤的文章就介绍到这了,更多相关uniapp app自动更新内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
JS 怎么使用 pako.js 解压 gzip 数据流
2026-11-05 15:54:33
零基础先学JavaScript还是Python?对比学习难度与上手曲线
2026-11-05 14:47:40
JS代码反混淆:主流在线工具与本地软件推荐
2026-11-04 19:28:41
浏览器控制台查看格式化JSON有哪些实用技巧
2026-11-04 16:56:53
JS控制台打印基础:console.log语法与多参数用法
2026-11-04 09:23:11
