Skip to content

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小程序VUE2VUE3
××

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:

js
{
    // 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

  1. 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.
  2. Determine whether to force the update. If the update is forced, the user cannot close the update pop-up window.
  3. 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.
  4. Determine whether it is ios, if it is ios, it will jump to the appstore link filled in the background to update
  5. Otherwise, it is android, and then judge whether the android application market is enabled in this update, if yes, it will follow the enabled 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

  1. In the place where the silent update function is called (usually in onLaunch or onShow of App.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
  2. A download task will be created to download secretly in the background and trigger the installation operation after the download is complete
  3. It will use uni.showLoading to remind the user that 更新完成,正在重启…… and restart the application.

Basic usage

Just call the component directly

html
<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.

vue
<!-- 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 namedescriptiontypedefault valueoptional values ​​
themeColorThe overall theme color (button, progress bar, icon color not updated yet) can also set the color of a certain part separately through other properties belowString#61d287-
bgColorbackground colorString#fff-
versionColorversion number font colorString#fff-
closeIconColorclose icon colorString#fff-
closeIconSizeclose icon sizeNumber26-
titleColorUpdate title text colorString#5e5e5e-
contentColorUpdate content text colorString#878787-
notRemindIconSizeDo not update the icon size in a short timeNumber22-
notRemindIconActColorDo not update the selected icon color in a short timeString''-
notRemindIconNotActColorDo not update the unselected icon color in a short timeString#9d9d9d-
notRemindTextActColorDo not update the selected text color in a short timeString#6b6b6b-
notRemindTextNotActColorDo not update the unselected text color in a short timeString#9d9d9d-
downloadBtnTextIOSDownload button ios textStringJump to update immediately-
downloadBtnTextAndroidDownload button Android textStringUpgrade now-
downLoadingTextDownload Chinese text promptStringDownloading the installation package, please wait-
downloadSuccessTextText prompt for download completionStringDownload complete, install now-
wgtInstallingTextText displayed during wgt installationStringInstalling....-
wgtInstalledTextwgt installation complete restart display textStringinstallation complete, click restart-
btnBgColorbutton background colorString''-
btnColorbutton text colorString#fff-
progressColorprogress bar colorString''-
progressTextColorprogress bar text styleString#4c4c4c-
intervalAlertUserUpdateDayThe interval for prompting the user to update (only when the user refuses to update), the unit is dayNumber7-