WU-UI

中文

English

中文

English

Appearance

AppUpdate APP更新 ​

app升级、整包更新、热更新、强制更新、ios跳转更新、android跳转应用市场，间隔式提醒用户更新，所有细节都可在config.js中修改。

平台兼容性 ​

App(vue)App(nvue)H5小程序VUE2VUE3
√√××√√

使用前的准备 ​

由于app更新需要请求接口，以此来检测是否需要更新，因此我们需要写一个专门的接口。

接口数据返回规范:

js
{
    // 是否静默更新(热更新)
    "is_silently": false,
    // 是否强制用户更新
    "is_mandatory": false,
    // 应用的appid(用来跳转应用市场)
    "appid": "__UNI__EC08220",
    // 更新标题
    "title": "更新标题",
    // 更新的内容
    "contents": "更新内容",
    // 更新的版本号(用来和应用本身的版本做升级对比)
    "version": "1.0.1",
    // 更新的下载链接
    "url": "https://xxx.com/xxx.apk",
    // 安装包类型 native_app(原生APP安装包) || wgt(wgt资源包)
    "type": "native_app",
    // 更新的平台 android || ios || [android, ios]
    "platform": [android, ios],
    /**
     * 发布的应用市场列表 可填可不填 不填的话需要返回[]
     * 如果有会按照启用的应用市场的优先级尝试跳转至应用市场内更新，如果都不启动或者都跳转失败时，更新组件会进行应用内更新。
    */ 
    "store_list": [
        {
            // 应用 scheme 如果不明白的话可以自定搜索
            "scheme": '',
            // 是否启用
            "enable": true,
            // 优先级 按照从大到小排序
            "priority": 1
        }
    ],
}
{
    // 是否静默更新(热更新)
    "is_silently": false,
    // 是否强制用户更新
    "is_mandatory": false,
    // 应用的appid(用来跳转应用市场)
    "appid": "__UNI__EC08220",
    // 更新标题
    "title": "更新标题",
    // 更新的内容
    "contents": "更新内容",
    // 更新的版本号(用来和应用本身的版本做升级对比)
    "version": "1.0.1",
    // 更新的下载链接
    "url": "https://xxx.com/xxx.apk",
    // 安装包类型 native_app(原生APP安装包) || wgt(wgt资源包)
    "type": "native_app",
    // 更新的平台 android || ios || [android, ios]
    "platform": [android, ios],
    /**
     * 发布的应用市场列表 可填可不填 不填的话需要返回[]
     * 如果有会按照启用的应用市场的优先级尝试跳转至应用市场内更新，如果都不启动或者都跳转失败时，更新组件会进行应用内更新。
    */ 
    "store_list": [
        {
            // 应用 scheme 如果不明白的话可以自定搜索
            "scheme": '',
            // 是否启用
            "enable": true,
            // 优先级 按照从大到小排序
            "priority": 1
        }
    ],
}

有了后台接口后，将 js-sdk/checkVersion.js 将第六十二行的请求链接补充完整即可。

更新流程 ​

我们通常更新app时会同时使用静默更新与组件更新

组件更新流程

  1. 在使用的页面组件更新的页面(通常为tabbar页面)，检测升级流程执行完毕后有更新&&不为静默更新时会继续下面的流程，否则会跳过。
  2. 判断是否强制更新，如果强制更新，则用户无法关闭升级弹窗。
  3. 判断是否是wgt包，如果是的话，会提醒用户更新，并在更新后提醒用户是否重启。
  4. 判断是否为ios，如果是ios的话则会跳转至后台填写的appstore链接进行更新
  5. 否则为android，再判断本次更新是否有启用android应用市场，如果有会按照 启用的应用市场(请参见接口数据返回规范)的优先级尝试跳转至应用市场内更新，如果都不启动或者都跳转失败时，更新组件会进行应用内更新。

静默更新流程

  1. 在调用静默更新函数的地方(通常在 App.vue 的 onLaunch 或 onShow 中)，测升级流程执行完毕后有更新&&为静默更新时会继续下面的流程，否则会跳过
  2. 会创建一个下载任务在后台偷偷下载并在下载完成后触发安装操作
  3. 会用 uni.showLoading 提醒用户 更新完成，正在重启…… 并重新启动应用。

基本使用 ​

直接调用组件即可

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>

静默更新 ​

引入 silentlyAppUpdate.js 即可，推荐将其引入到 APP.vue 的 onLaunch 生命周期内或者根据实际业务需求修改。

vue
<!-- App.vue -->
<script>
	// 静默更新
	import silentlyAppUpdate from '@/uni_modules/wu-app-update/js-sdk/silentlyAppUpdate.js';
	export default {
		onLaunch: function() {
			silentlyAppUpdate();
        }
	}
</script>
<!-- App.vue -->
<script>
	// 静默更新
	import silentlyAppUpdate from '@/uni_modules/wu-app-update/js-sdk/silentlyAppUpdate.js';
	export default {
		onLaunch: function() {
			silentlyAppUpdate();
        }
	}
</script>

config.js ​

为了方便使用，将配置放在了 config.js ，可以前往文件修改，或者使用props传参的方式覆盖，推荐使用修改 config.js的方式。

API ​

AppUpdate Props ​

属性名说明类型默认值可选值
themeColor整体主题色(按钮、进度条、暂不更新图标颜色)也可以通过下方的其他属性来单独设置某一部分的颜色String#61d287-
bgColor背景色String#fff-
versionColor版本号字体颜色String#fff-
closeIconColor关闭图标颜色String#fff-
closeIconSize关闭图标大小Number26-
titleColor更新标题文字颜色String#5e5e5e-
contentColor更新内容文字颜色String#878787-
notRemindIconSize短期内不更新图标大小Number22-
notRemindIconActColor短期内不更新选中图标颜色String''-
notRemindIconNotActColor短期内不更新未选中图标颜色String#9d9d9d-
notRemindTextActColor短期内不更新选中文字颜色String#6b6b6b-
notRemindTextNotActColor短期内不更新未选中文字颜色String#9d9d9d-
downloadBtnTextIOS下载按钮ios文字String立即跳转更新-
downloadBtnTextAndroid下载按钮Android文字String立即升级-
downLoadingText下载中文字提示String安装包下载中，请稍后-
downloadSuccessText下载完成文字提示String下载完成，立即安装-
wgtInstallingTextwgt安装中显示文字String正在安装....-
wgtInstalledTextwgt安装完成重启显示文字String安装完毕，点击重启-
btnBgColor按钮背景色String''-
btnColor按钮文字颜色String#fff-
progressColor进度条颜色String''-
progressTextColor进度条文字样式String#4c4c4c-
intervalAlertUserUpdateDay提示用户更新的间隔时间(只有用户拒绝更新时才会生效)，单位dayNumber7-