AppUpdate
App upgrade, whole package update, hot update, forced modification, ios jump update, android jump to the application market, remind users to update at intervals, all details can be in config.js.
platform compatibility
App(vue) | App(nvue) | H5 | 小程序 | VUE2 | VUE3 |
---|---|---|---|---|---|
√ | √ | × | × | √ | √ |
Preparation before use
Since the app update needs to request an interface to detect whether it needs to be updated, we need to write a special interface.
Interface data return specification:
{
// Whether to update silently (hot update)
"is_silently": false,
// Whether to force the user to update
"is_mandatory": false,
// The appid of the application (used to jump to the application market)
"appid": "__UNI__EC08220",
// update title
"title": "Update title",
// updated content
"contents": "Update Content",
// The updated version number (used to compare with the version of the application itself)
"version": "1.0.1",
// updated download link
"url": "https://xxx.com/xxx.apk",
// Installation package type [native_app (native APP installation package), wgt (wgt resource package)]
"type": "native_app",
// Updated platform android || ios || [android, ios]
"platform": [android, ios],
/**
* Published application market list can be filled or not filled, if not filled, need to return []
* If there is an update in the app market, it will try to jump to the in-app market according to the priority of the enabled app market. If none of them are started or the jump fails, the update component will perform an in-app update.
*/
"store_list": [
{
// Application scheme If you don't understand, you can customize the search
"scheme": '',
// Whether to enable
"enable": true,
// Priority sorted from largest to smallest
"priority": 1
}
],
}
{
// Whether to update silently (hot update)
"is_silently": false,
// Whether to force the user to update
"is_mandatory": false,
// The appid of the application (used to jump to the application market)
"appid": "__UNI__EC08220",
// update title
"title": "Update title",
// updated content
"contents": "Update Content",
// The updated version number (used to compare with the version of the application itself)
"version": "1.0.1",
// updated download link
"url": "https://xxx.com/xxx.apk",
// Installation package type [native_app (native APP installation package), wgt (wgt resource package)]
"type": "native_app",
// Updated platform android || ios || [android, ios]
"platform": [android, ios],
/**
* Published application market list can be filled or not filled, if not filled, need to return []
* If there is an update in the app market, it will try to jump to the in-app market according to the priority of the enabled app market. If none of them are started or the jump fails, the update component will perform an in-app update.
*/
"store_list": [
{
// Application scheme If you don't understand, you can customize the search
"scheme": '',
// Whether to enable
"enable": true,
// Priority sorted from largest to smallest
"priority": 1
}
],
}
After having the backend interface, complete the request link in line 62 of js-sdk/checkVersion.js
.
Update process
We usually use silent update and component update at the same time when updating the app
Component update process
- On the page updated by the used page component (usually a tabbar page), if there is an update after the completion of the detection upgrade process && it is not a silent update, the following process will continue, otherwise it will be skipped.
- Determine whether to force the update. If the update is forced, the user cannot close the update pop-up window.
- Determine whether it is a
wgt package
, if yes, it will remind the user to update, and remind the user whether to restart after the update. - Determine whether it is
ios
, if it is ios, it will jump to the appstore link filled in the background to update - Otherwise, it is
android
, and then judge whether theandroid application market
is enabled in this update, if yes, it will follow theenabled application market
([Please refer to the interface data return specification](#Preparation before use)) Priority attempts to jump to the update in the application market. If none of them are started or the jump fails, the update component will perform an in-app update.
Silent update process
- In the place where the silent update function is called (usually in
onLaunch
oronShow
ofApp.vue
), after the upgrade process is completed, there is an update && when it is a silent update, the following process will continue, otherwise it will skip Pass - A download task will be created to download secretly in the background and trigger the installation operation after the download is complete
- It will use
uni.showLoading
to remind the user that更新完成,正在重启……
and restart the application.
Basic usage
Just call the component directly
<template>
<view class="index">
<wu-app-update></wu-app-update>
</view>
</template>
<template>
<view class="index">
<wu-app-update></wu-app-update>
</view>
</template>
silent update
Just import silentlyAppUpdate.js
. It is recommended to introduce it into the onLaunch
life cycle of APP.vue
or modify it according to actual business needs.
<!-- App.vue -->
<script>
// silent update
import silentlyAppUpdate from '@/uni_modules/wu-app-update/js-sdk/silentlyAppUpdate.js';
export default {
onLaunch: function() {
silentlyAppUpdate();
}
}
</script>
<!-- App.vue -->
<script>
// silent update
import silentlyAppUpdate from '@/uni_modules/wu-app-update/js-sdk/silentlyAppUpdate.js';
export default {
onLaunch: function() {
silentlyAppUpdate();
}
}
</script>
config.js
For the convenience of use, the configuration is placed in config.js
, you can go to the file to modify it, or use props to overwrite it. It is recommended to use the method of modifying config.js
.
API
AppUpdate Props
property name | description | type | default value | optional values |
---|---|---|---|---|
themeColor | The overall theme color (button, progress bar, icon color not updated yet) can also set the color of a certain part separately through other properties below | String | #61d287 | - |
bgColor | background color | String | #fff | - |
versionColor | version number font color | String | #fff | - |
closeIconColor | close icon color | String | #fff | - |
closeIconSize | close icon size | Number | 26 | - |
titleColor | Update title text color | String | #5e5e5e | - |
contentColor | Update content text color | String | #878787 | - |
notRemindIconSize | Do not update the icon size in a short time | Number | 22 | - |
notRemindIconActColor | Do not update the selected icon color in a short time | String | '' | - |
notRemindIconNotActColor | Do not update the unselected icon color in a short time | String | #9d9d9d | - |
notRemindTextActColor | Do not update the selected text color in a short time | String | #6b6b6b | - |
notRemindTextNotActColor | Do not update the unselected text color in a short time | String | #9d9d9d | - |
downloadBtnTextIOS | Download button ios text | String | Jump to update immediately | - |
downloadBtnTextAndroid | Download button Android text | String | Upgrade now | - |
downLoadingText | Download Chinese text prompt | String | Downloading the installation package, please wait | - |
downloadSuccessText | Text prompt for download completion | String | Download complete, install now | - |
wgtInstallingText | Text displayed during wgt installation | String | Installing.... | - |
wgtInstalledText | wgt installation complete restart display text | String | installation complete, click restart | - |
btnBgColor | button background color | String | '' | - |
btnColor | button text color | String | #fff | - |
progressColor | progress bar color | String | '' | - |
progressTextColor | progress bar text style | String | #4c4c4c | - |
intervalAlertUserUpdateDay | The interval for prompting the user to update (only when the user refuses to update), the unit is day | Number | 7 | - |