Original text link: uni-app package update and hot update solution (Android and IOS)
Effect preview
General effect:
Open the app, enter the homepage (for the first time), check whether there is a new version online, and if so, a pop-up window will prompt the user whether to update the version. Android has hot update and package update . If it is a hot update , it will automatically restart after the update; if it is a package update , it will enter the browser (if the application market is on the shelf, the corresponding logic can be written to jump to the application market) to download. ios can only jump to the App Store for updates.
If the user clicks the cancel button, there will be no more pop-up prompts during the use of the app, and the prompt will not be displayed again until the user enters the app next time.
step
Client version management
| field | explain |
|---|---|
| update package name | Update the package name, for example: HK-IOS-1.0.0 |
| update package file | Uploaded apk, ipa, wgt files |
| Update package version number | The version number of the update package must be greater than the version number of the last update |
| Customer groups | 1 regular user, 2 members |
| update package type | ANDROID 、 IOS |
| update type | No, full package update, hot update |
| Issue area | Hong Kong, Macau, Taiwan, Indonesia, Mainland China |
| update package description | zh(Chinese), en(English), in(Indonesian) |
The fields here can be designed according to your own needs.
APP
version component
<template>
<view class="tzy-version">
<u-modal
:value="updateVsb"
:title="$t('version.versionUpdateTips')"
:show-cancel-button="isShowCancelBtn"
:cancel-text="$t('btn.cancel')"
:confirm-text="$t('version.update')"
@cancel="cancelUpdate"
@confirm="updateConfirm">
<view class="version-online">V {
{ updateObj.version }}</view>
<view class="model-version" slot-name="content">
<scroll-view scroll-y="true" class="content-text">
<view class="content-text">
<u-input
v-model="targetDesc"
type="textarea"
:border="false"
:disabled="true"
:auto-height="true"
:customStyle="{ 'font-size': '14px', color: '#96a0b5',
'word-break': 'break-word !important' }"
/>
</view>
</scroll-view>
</view>
</u-modal>
</view>
</template>
<script>
import config from '@/common/js/config.js';
import phoneInfo from '@/common/js/phone-info.js';
export default {
props: {
// 页面来源
pageFrom: {
type: String,
default: 'Home'
},
// 是否显示弹窗
updateVsb: {
type: Boolean,
default: false
},
// 是否显示取消按钮
isShowCancelBtn: {
type: Boolean,
default: true
},
updateObj: {
type: Object,
default: () => {}
},
targetDesc: {
type: String,
default: ''
}
},
methods: {
cancelUpdate() {
if (this.pageFrom == 'Home') {
uni.setStorageSync('cancelUpdate', 'true');
}
this.$emit('cancelClickEvent');
},
updateConfirm() {
// 下载更新包
const platform = phoneInfo.systemInfo.platform.toLowerCase();
const url = config.uploadUrl + this.updateObj.url;
const type = this.updateObj.type;
// type仅为我司定义
if (type == 1) {
this.$emit('cancelClickEvent');
uni.setStorageSync('cancelUpdate', 'true');
uni.setStorageSync('widgetInfo', {});
// 整包
if (platform == 'android') {
// 安卓打开网页下载
plus.runtime.openURL(url);
} else {
// ios打开应用商店 https://appstoreconnect.apple.com/
// apple id 在 app conection 上传的位置可以看到
const appleId = 'xxxxxx'; // 这里替换成你的 apple id
plus.runtime.launchApplication({
action: `itms-apps://itunes.apple.com/cn/app/id${appleId}?mt=8`
},
function(e) {
console.log('Open system default browser failed: ' + e.message);
}
);
}
} else if (type == 2) {
//热更新
console.log('热更新。。。。。。。。', url);
plus.nativeUI.showWaiting(this.$t('dataDesc.updating'));
uni.downloadFile({
url: url,
success: downloadResult => {
if (downloadResult.statusCode === 200) {
plus.runtime.install(
downloadResult.tempFilePath, {
force: false
},
function() {
console.log('install success...');
plus.nativeUI.closeWaiting();
// 更新版本信息
uni.setStorageSync('widgetInfo', {});
plus.runtime.restart();
},
function(e) {
console.error('install fail...');
plus.nativeUI.closeWaiting();
}
);
}
},
fail: error => {
console.log(error);
}
});
}
}
}
};
</script>
<style lang="scss" scoped>
.version-online {
text-align: center;
font-size: 14px;
font-weight: 600;
margin-top: 10px;
}
.content-text {
max-height: 280px;
}
.model-version {
padding: 12px 24px 30px;
font-size: 14px;
color: $cat_text_normal;
}
.desc-font {
font-size: 14px !important;
color: #96a0b5 !important;
word-break: break-all !important;
}
</style>
The version component is referenced in the homepage
<template>
<view>
<!-- 热更新组件 仅APP显示-->
<!-- #ifdef APP-PLUS -->
<versionUpdate
pageFrom="Home"
:updateVsb="updateVsb"
:updateObj="updateObj"
:targetDesc="targetDesc"
@cancelClickEvent="cancelClickEvent">
</versionUpdate>
<!-- #endif -->
</view>
</template>
<script>
import { clientVersionQuery } from '@/api/client.js';
import versionUpdate from '@/components/muudah-version/index.vue';
export default {
name: 'Home',
components: {
versionUpdate
},
data() {
return {
updateObj: {
url: '',
type: '',
version: ''
},
updateVsb: false,
targetDesc: '', // 版本更新描述
};
},
methods: {
getUpdate() {
//当前版本号 转化为数字
const tar_version = versionToNum(phoneInfo.manifestInfo.version);
// android || ios
const platform = phoneInfo.systemInfo.platform.toLowerCase() == 'ios' ? 'IOS' : 'ANDROID';
const version_to = this.versionTo; // 发行地区
// 这里调接口 是否检测到版本更新
clientVersion({
client_type: platform,
client_area: version_to
}).then(res => {
const {
Code,
data,
sdk_path
} = res;
if (Code == 0 && sdk_path != '' && data.client_version != '') {
// 线上的版本 转化为数字
const versin_online = versionToNum(data.client_version);
if (versin_online > tar_version && data.update_status > 0) {
this.updateObj.url = sdk_path;
this.updateObj.type = data.update_status;
this.updateObj.version = data.client_version;
// "update_status": 更新类型. 0: 否, 1: 整包更新, 2: 热更新
const desc_str = eval('(' + data.desc + ')');
// 这里根据语言包显示语言
this.targetDesc = desc_str[this.language];
this.updateVsb = true;
}
}
});
},
cancelClickEvent() {
this.updateVsb = false;
}
}
}
</script>
APP.view
<script>
import phoneInfo from '@/common/js/phone-info.js'; // 这里面保存了 设备的基本信息
export default {
onLaunch: function() {
// 获取设备基本信息
uni.getSystemInfo({
success: res => {
phoneInfo.systemInfo = res;
}
});
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary'); //锁定屏幕方向
uni.setStorageSync('cancelUpdate', 'false'); // 进来APP 重置更新弹窗
// 获取App 当前版本号
if (Object.keys(uni.getStorageSync('widgetInfo')).length == 0) {
plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
phoneInfo.manifestInfo = widgetInfo;
uni.setStorageSync('widgetInfo', widgetInfo);
});
}
//#endif
}
};
</script>
Finally, you can also try to understand the App Upgrade Center uni-upgrade-center .