uniapp APP自动更新组件
在uniapp中实现APP自动更新功能，主要涉及到客户端在功能不断迭代过程中，需要进行自动更新。uniapp一个详细的实现步骤，包括客户端和服务器端的配置：
服务器端配置
版本信息管理
- 服务器端需要维护一个数据库或配置文件，用于存储APP的最新版本信息，包括版本号、更新说明、下载链接等。
- 提供一个API接口，客户端可以通过该接口获取最新版本信息。
客户端实现
- 版本信息获取：
- 在uniapp的客户端，通过uni.request()方法调用服务器端的API接口，获取最新版本信息。
- 版本比对：
- 客户端获取到最新版本信息后，与当前APP的版本号进行比对。
- 版本号比对逻辑可以根据实际情况设计，常见的做法是比较字符串或将其转换为数字进行比较。
- 更新提示：
- 如果发现新版本，则弹出更新提示框，引导用户进行更新。
- 可以通过uni.showModal()方法显示更新提示框，并提供更新和取消的选项。
- 下载并安装：
- 用户确认更新后，客户端开始下载新版本APK文件。
- 下载完成后，使用plus.runtime.install()方法安装APK文件。
- 注意：安装APK文件需要用户授权，并且可能需要在Android的“设置”中开启“允许安装未知来源的应用”。
- 静默更新（可选）：
- 对于一些不需要用户干预的更新，可以考虑实现静默更新。
- 静默更新通常涉及到wgt（widget）包的更新，而不是整个APK的替换。
- uniapp提供了相关的插件和API支持wgt包的更新，如uni-upgrade-center等。
组件扩展简化调用
我们只需要在我们的首页引入版本自动更新组件即可。
<template>
<view class="container container329152">
<!-- #ifdef APP -->
<diy-upgrade style="z-index: 999999999" image="/static/upgrade.png" upgradeUrl=""> </diy-upgrade>
<!-- #endif -->
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: {}
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
methods: {
async init() {}
}
};
</script>
<style lang="scss" scoped>
.container329152 {
}
</style>
组件库代码实现
diy-upgrade组件代码实现，大家如果对此组件库可按需进行二次开发扩展。
<template>
<view class="mask flex-center" v-if="showUpdate">
<view class="content botton-radius" :class="[image?'':'no-imgae']">
<view class="content-top" >
<view class="content-top-text">
<text>{{title}}</text>
<text class="content-top-text-version">v.{{version}}</text>
</view>
<image v-if="image" class="content-top" style="top: 0;" width="100%" height="100%"
:src='image'>
</image>
<view v-else class="content-top" style="top: 0;" width="100%" height="100%"></view>
</view>
<view v-if="image" class="content-header"></view>
<view class="content-body">
<slot></slot>
<view class="body" v-if="contents">
<scroll-view class="box-des-scroll" scroll-y="true">
<rich-text :nodes="contents"></rich-text>
</scroll-view>
</view>
<view class="footer flex-center">
<template v-if="isAppStore">
<button class="content-button" :style="btnStyle" style="border: none;color: #fff;" plain @click="jumpToAppStore">
{{downLoadBtnTextiOS}}
</button>
</template>
<template v-else>
<template v-if="!downloadSuccess">
<view class="progress-box flex-column" v-if="downloading">
<progress class="progress" border-radius="35" :percent="downLoadPercent"
:activeColor="btnBgColor" show-info stroke-width="10" />
<view class="flex flex-center" style="width:100%;font-size: 28rpx;display: flex;justify-content: space-around;">
<text>{{downLoadingText}}</text>
<text>({{downloadedSize}}/{{packageFileSize}}M)</text>
</view>
</view>
<button v-else class="content-button" :style="btnStyle" style="border: none;color: #fff;" plain
@click="updateApp">
{{downLoadBtnText}}
</button>
</template>
<button v-else-if="downloadSuccess && !installed" :style="btnStyle" class="content-button"
style="border: none;color: #fff;" plain :loading="installing" :disabled="installing"
@click="installPackage">
{{installing ? '正在安装……' : '下载完成，立即安装'}}
</button>
<button v-if="installed && isWGT" :style="btnStyle" class="content-button" style="border: none;color: #fff;" plain
@click="restart">
安装完毕，点击重启
</button>
</template>
</view>
</view>
<text v-if="!is_mandatory" class="close-img diy-icon-close" @click.stop="closeUpdate"></text>
</view>
</view>
</template>
<script>
const localFilePathKey = 'UNI_ADMIN_UPGRADE_CENTER_LOCAL_FILE_PATH'
const platform_iOS = 'iOS';
let downloadTask = null;
let openSchemePromise
/**
* 对比版本号，如需要，请自行修改判断规则
* 支持比对 ("3.0.0.0.0.1.0.1", "3.0.0.0.0.1") ("3.0.0.1", "3.0") ("3.1.1", "3.1.1.1") 之类的
* @param {Object} v1
* @param {Object} v2
* v1 > v2 return 1
* v1 < v2 return -1
* v1 == v2 return 0
*/
function compare(v1 = '0', v2 = '0') {
v1 = String(v1).split('.')
v2 = String(v2).split('.')
const minVersionLens = Math.min(v1.length, v2.length);
let result = 0;
for (let i = 0; i < minVersionLens; i++) {
const curV1 = Number(v1[i])
const curV2 = Number(v2[i])
if (curV1 > curV2) {
result = 1
break;
} else if (curV1 < curV2) {
result = -1
break;
}
}
if (result === 0 && (v1.length !== v2.length)) {
const v1BiggerThenv2 = v1.length > v2.length;
const maxLensVersion = v1BiggerThenv2 ? v1 : v2;
for (let i = minVersionLens; i < maxLensVersion.length; i++) {
const curVersion = Number(maxLensVersion[i])
if (curVersion > 0) {
v1BiggerThenv2 ? result = 1 : result = -1
break;
}
}
}
return result;
}
export default {
props: {
//更新图片
image: {
type: String,
default: ''
},
//版本更新较验地址
upgradeUrl:{
type: String,
default: ''
},
// 进度条颜色
btnBgColor:{
default: '',
type: String
}
},
data() {
return {
showUpdate:false,
// 更新的版本号
version: '',
// 系统环境
platform: '',
// 下载链接
url: '',
// 跳转的应用市场列表
storeList: [],
type:'',
// 从之前下载安装
installForBeforeFilePath: '',
// 安装
installed: false,
installing: false,
// 下载
downloadSuccess: false,
downloading: false,
downLoadPercent: 50,
downloadedSize: 0,
packageFileSize: 0,
tempFilePath: '', // 要安装的本地包地址
// 默认安装包信息
title: '版本更新',
contents: '',
is_mandatory: false,
// 可自定义属性
downLoadBtnTextiOS: '立即跳转更新',
downLoadBtnText: '立即下载更新',
downLoadingText: '安装包下载中，请稍后',
pageLevelNum: 0
}
},
onBackPress() {
// 强制更新不允许返回
if (this.is_mandatory) {
return true
}
downloadTask && downloadTask.abort()
},
onHide() {
openSchemePromise = null
},
mounted() {
this.init()
},
computed: {
isWGT() {
return this.type === 'wgt'
},
isiOS() {
return !this.isWGT ? this.platform.includes(platform_iOS) : false;
},
isAppStore() {
return this.isiOS || (!this.isiOS && !this.isWGT && this.url.indexOf('.apk') === -1)
},
btnStyle(){
return this.btnBgColor?{background:this.btnBgColor}:{}
}
},
methods: {
// 获取更新内容片段
getContentHTML(content) {
let contentArr = content.split('\n');
return contentArr.map(item => `<p>${item}</p>`).join('\n')
},
async init(){
// #ifdef APP-PLUS
let thiz = this;
if(!thiz.upgradeUrl){
console.log('请配置版本较验地址')
console.log("{url:'你的APK下越地址',version:'1.0.1',title:'版本更新',contents:'版本更新内容'}")
uni.showToast({
title:'请配置版本较验地址'
})
return;
}
uni.getSystemInfo({
success: (res) => {
let platform = res.platform;
// 获取本机版本号
plus.runtime.getProperty(plus.runtime.appid,async (wgtinfo) => {
thiz.versionCode = wgtinfo.versionCode;
let res = await getApp().globalData.currentPage.$http.post(thiz.upgradeUrl,{
appid: plus.runtime.appid,
platform,
version: plus.runtime.version,
wgtVersion: wgtinfo.version
})
res = res.data;
console.log(res)
//如果API返回新的地址，并判断版本是否相同
if(res.url){
thiz.url = res.url
thiz.version = res.version
//判断API返回的版本是不是大于系统版本
if(compare(thiz.version,wgtinfo.version)){
// 跳转的应用市场列表
thiz.storeList = res.store_list || [];
thiz.title = res.title || '发现新版本';
thiz.type = res.type;
if(res.contents){
thiz.contents = thiz.getContentHTML(res.contents)
}
thiz.is_mandatory = res.is_mandatory||false
this.checkLocalStoragePackage()
}
}
});
},
fail(e){
console.log(e)
}
});
// #endif
},
goBack() {
this.showUpdate = false
},
checkLocalStoragePackage() {
// 如果已经有下载好的包，则直接提示安装
const localFilePathRecord = uni.getStorageSync(localFilePathKey)
if (localFilePathRecord) {
const {
version,
savedFilePath,
installed
} = localFilePathRecord
// 比对版本
if (!installed && compare(version, this.version) === 0) {
this.downloadSuccess = true;
this.installForBeforeFilePath = savedFilePath;
this.tempFilePath = savedFilePath
} else {
// 如果保存的包版本小 或 已安装过，则直接删除
this.deleteSavedFile(savedFilePath)
}
}
this.showUpdate = true;
},
async closeUpdate() {
if (this.downloading) {
if (this.is_mandatory) {
return uni.showToast({
title: '下载中，请稍后……',
icon: 'none',
duration: 500
})
}
uni.showModal({
title: '是否取消下载？',
cancelText: '否',
confirmText: '是',
success: res => {
if (res.confirm) {
downloadTask && downloadTask.abort()
this.goBack()
}
}
});
return;
}
if (this.downloadSuccess && this.tempFilePath) {
// 包已经下载完毕，稍后安装，将包保存在本地
await this.saveFile(this.tempFilePath, this.version)
this.goBack()
return;
}
this.goBack()
},
updateApp() {
this.checkStoreScheme().catch(() => {
this.downloadPackage()
})
},
// 跳转应用商店
checkStoreScheme() {
const storeList = (this.store_list || []).filter(item => item.enable)
if (storeList && storeList.length) {
storeList
.sort((cur, next) => next.priority - cur.priority)
.map(item => item.scheme)
.reduce((promise, cur, curIndex) => {
openSchemePromise = (promise || (promise = Promise.reject())).catch(() => {
return new Promise((resolve, reject) => {
plus.runtime.openURL(cur, (err) => {
reject(err)
})
})
})
return openSchemePromise
}, openSchemePromise)
return openSchemePromise
}
return Promise.reject()
},
downloadPackage() {
this.downloading = true;
//下载包
downloadTask = uni.downloadFile({
url: this.url,
success: res => {
if (res.statusCode == 200) {
this.downloadSuccess = true;
this.tempFilePath = res.tempFilePath
// 强制更新，直接安装
if (this.is_mandatory) {
this.installPackage();
}
}
},
complete: () => {
this.downloading = false;
this.downLoadPercent = 0
this.downloadedSize = 0
this.packageFileSize = 0
downloadTask = null;
}
});
downloadTask.onProgressUpdate(res => {
this.downLoadPercent = res.progress;
this.downloadedSize = (res.totalBytesWritten / Math.pow(1024, 2)).toFixed(2);
this.packageFileSize = (res.totalBytesExpectedToWrite / Math.pow(1024, 2)).toFixed(2);
});
},
installPackage() {
// #ifdef APP-PLUS
// wgt资源包安装
if (this.isWGT) {
this.installing = true;
}
plus.runtime.install(this.tempFilePath, {
force: false
}, async res => {
this.installing = false;
this.installed = true;
// wgt包，安装后会提示 安装成功，是否重启
if (this.isWGT) {
// 强制更新安装完成重启
if (this.is_mandatory) {
uni.showLoading({
icon: 'none',
title: '安装成功，正在重启……'
})
setTimeout(() => {
uni.hideLoading()
this.restart();
}, 1000)
}
} else {
const localFilePathRecord = uni.getStorageSync(localFilePathKey)
uni.setStorageSync(localFilePathKey, {
...localFilePathRecord,
installed: true
})
}
}, async err => {
// 如果是安装之前的包，安装失败后删除之前的包
if (this.installForBeforeFilePath) {
await this.deleteSavedFile(this.installForBeforeFilePath)
this.installForBeforeFilePath = '';
}
// 安装失败需要重新下载安装包
this.installing = false;
this.installed = false;
uni.showModal({
title: '更新失败，请重新下载',
content: err.message,
showCancel: false
});
});
// 非wgt包，安装跳出覆盖安装，此处直接返回上一页
if (!this.isWGT && !this.is_mandatory) {
this.goBack()
}
// #endif
},
restart() {
this.installed = false;
// #ifdef APP-PLUS
//更新完重启app
plus.runtime.restart();
// #endif
},
saveFile(tempFilePath, version) {
return new Promise((resolve, reject) => {
uni.saveFile({
tempFilePath,
success({
savedFilePath
}) {
uni.setStorageSync(localFilePathKey, {
version,
savedFilePath
})
},
complete() {
resolve()
}
})
})
},
deleteSavedFile(filePath) {
uni.removeStorageSync(localFilePathKey)
return uni.removeSavedFile({
filePath
})
},
jumpToAppStore() {
plus.runtime.openURL(this.url);
}
}
}
</script>
<style>
page {
background: transparent;
}
.flex-center {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
justify-content: center;
align-items: center;
}
.mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .65);
}
.botton-radius {
border-radius: 30rpx;
}
.content {
position: relative;
top: 0;
width: 600rpx;
background-color: #fff;
box-sizing: border-box;
padding: 0 50rpx;
font-family: Source Han Sans CN;
}
.text {
/* #ifndef APP-NVUE */
display: block;
/* #endif */
line-height: 200px;
text-align: center;
color: #FFFFFF;
}
.content-top {
position: absolute;
top: -195rpx;
left: 0;
width: 600rpx;
height: 270rpx;
}
.content-top-text {
font-size: 45rpx;
font-weight: bold;
color: #F8F8FA;
position: absolute;
top: 120rpx;
left: 50rpx;
z-index: 1;
.content-top-text-version{
font-size: 24rpx;
}
}
.no-imgae .content-top{
padding-top:30px;
height: auto;
}
.no-imgae .content-top,.no-imgae .content-top .content-top-text{
position: relative;
top:0;
left:0;
color:#000;
width:100%;
}
.content-header {
height: 70rpx;
}
.title {
font-size: 33rpx;
font-weight: bold;
color: #3DA7FF;
line-height: 38px;
}
.footer {
height: 150rpx;
display: flex;
align-items: center;
justify-content: space-around;
}
.box-des-scroll {
box-sizing: border-box;
min-height: 100rpx;
max-height: 400rpx;
text-align: left;
}
.box-des {
font-size: 26rpx;
color: #000000;
line-height: 50rpx;
}
.progress-box {
width: 100%;
}
.progress {
width: 90%;
height: 40rpx;
border-radius: 35px;
}
.close-img {
width: 70rpx;
height: 70rpx;
z-index: 1000;
position: absolute;
bottom: -120rpx;
left: calc(50% - 70rpx / 2);
font-size: 60rpx;
color:#fff;
}
.content-button {
text-align: center;
flex: 1;
font-size: 30rpx;
font-weight: 400;
color: #FFFFFF;
border-radius: 40rpx;
margin: 0 18rpx;
height: 80rpx;
line-height: 80rpx;
background: linear-gradient(to right, #1785ff, #3DA7FF);
}
.content-button.button-hover {
transform: translate(1rpx, 1rpx);
}
.flex-column {
display: flex;
flex-direction: column;
align-items: center;
}
</style>