Every time uniapp modifies the code or adds a function, it has to be repackaged, which is particularly troublesome, so it has an automatic update function. At the same time, make a QR code on the web side, and you can scan the code to download the app software (the general logic is that you need to create a file upload function, upload the packaged apk of the app to the server, and then the backend returns the path of the apk package to the frontend, and the frontend Get it with the help of a third-party plug-in to generate a QR code, scan the code to download), the specific operation of the web side will not be discussed for the time being. Let's talk about the automatic update function on the app side
Before we start, let me talk about the changes we need to make when packaging: 1. Application version name (1.0.0 upgrade must be higher than the previous setting) 2. Application version number (application version number, must be an integer; upgrade must be higher than The value set last time, so that there will be no problems when updating the app and downloading the latest package) as shown below:
Next, let’s talk about the idea of updating the app version:
First obtain the latest version number from the backend (of course, this is also for maintenance, every time it is repackaged, it is necessary to maintain a latest version number), after obtaining it, compare it with the current version number (the current version number we It can be obtained through plus.runtime.getProperty, see the official website for details: https://uniapp.dcloud.net.cn/collocation/manifest.html#%E9%85%8D%E7%BD%AE%E9%A1%B9% E5%88%97%E8%A1%A8 , and then compare in the next step), if not the same, update it, if they are the same, give a reminder: the current version is the latest version!
The app often has a version update operation on the About Us page. Another situation is whether we want to force the update. Generally, a field is added in the backend to mark whether to force the update. If it is a forced update, Then you have to check and compare the version when you first enter the app. If the version is inconsistent with the maximum version, you must update it. If you don’t update it, you won’t be able to use the app. If the version is the same, you don’t need to prompt. In fact, the logic is basic. The same, that is, when you first enter the page to detect the version, if the version is always there, you don’t need to update it
Paste the core code below
1. The first is to obtain the current version information and version number of the app:
void plus.runtime.getProperty( appid, getPropertyCB );parameter:
- appid: ( String ) Appid of the required application
- getPropertyCB: ( GetPropertyCallBack ) Required callback function for obtaining application information successfully
Example:
// 获取应用信息
function getAppInfo() {
plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
//appid属性
var wgtStr = "appid:"+wgtinfo.appid;
//version属性
wgtStr += "<br/>version:"+wgtinfo.version;
//name属性
wgtStr += "<br/>name:"+wgtinfo.name;
//description属性
wgtStr += "<br/>description:"+wgtinfo.description;
//author属性
wgtStr += "<br/>author:"+wgtinfo.author;
//email属性
wgtStr += "<br/>email:"+wgtinfo.email;
//features 属性
wgtStr += "<br/>features:"+wgtinfo.features;
console.log( wgtStr );
} );
}2. The above is the specific use, and then we can get the current version number in the onLanch callback hook in App.vue:
app.vue
onLaunch: function() {
// #ifdef APP-PLUS
this.getAppInfo()
// #endif
},
methods: {
getAppInfo() {
plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
uni.setStorageSync('version', wgtinfo.version)
})
}
}After this, we can take it directly from the Storage of uniapp when we use it
3. Next, paste the core code of the version update:
// 获取最新版本
getMaxVersion() {
const { maxVersion } = PersonService;
uni.getSystemInfo({
success: (res) => {
const { platform } = res; // ios、android、mac（3.1.10+）、windows（3.1.10+）、linux（3.1.10+）
const map = {
android: "android",
ios: "ios",
};
// 向后端获取最新版本信息
maxVersion({ type: map[platform] }).then(({ data }) => {
this.updateVersion(data); // 自动检测版本是否需要更新
});
},
});
},
// 版本对比
updateVersion({ version, is_force_update, url }) {
const curVersion = uni.getStorageSync("version"); // 当前版本
if (curVersion) {
if (curVersion != version) {
const isShowCancel = is_force_update == "true" ? false : true;
this.showFly(isShowCancel, url);
} else {
// 这个else也就是当前的版本是最新的，如果是在更进入app的时候就不需要提示了
uni.showToast({
title: "当前为最新版本！",
icon: "none",
duration: 1600,
});
}
}
},
// 版本下载 升级
showFly(isShowCancel, url) {
uni.showModal({
title: "提示",
content: "发现新版本，立即升级！",
showCancel: isShowCancel, // 如果是强制更新就不显示取消按钮
success: (e) => {
if (e.confirm) {
uni.showLoading({
title: "更新中……",
});
const downloadTask = uni.downloadFile({
url: SERVER_URL.replace("/app", "") + url, // 这个是最新版本apk包的地址
success: (res) => {
uni.hideLoading();
if (res.statusCode === 200) {
plus.runtime.install(res.tempFilePath, { force: true }, _res => {
uni.showToast({
title: "更新成功，重启中",
duration: 1600,
});
plus.runtime.restart();
uni.hideToast();
}
);
} else {
uni.showToast({
title: "下载失败！",
icon: "none",
duration: 800,
});
}
},
});
downloadTask.onProgressUpdate((res) => {
// _this.startDown = true;
// _this.calcPro(res.progress);
// console.log('下载进度' + res.progress);
// console.log('已经下载的数据长度' + res.totalBytesWritten);
// console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
// 测试条件，取消下载任务。
// if (res.progress > 50) {
// downloadTask.abort();
// }
});
}
},
});
}Notice:
As long as you use plus, it is best to add conditional compilation, that is:
// #ifdef APP-PLUS
console.log(plus)
// #endifOtherwise, there will be an error when running the test on the browser, that is, the h5 side.