uniapp中检测应用更新的两种方式-升级中心之uni-upgrade-center-app

news2024/11/6 9:23:55

uniapp一个很是用的功能，就是在我们发布新版本的app后，需要提示用户进行app更新，并告知用户我们新版的app更新信息，以使得用户能及时使用上我们新开发的功能，提升用户的实用度和粘性。注意:这个功能只能在app端使用

效果展示

在这里插入图片描述

方式一

第一步:在App.vue中引入uni-upgrade-center-app组件中的检测方法

import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update';

第二步:在app.vue的onLoad中使用该方法

// #ifdef APP-PLUS
// App平台检测升级，服务端代码是通过uniCloud的云函数实现的，详情可参考：https://ext.dcloud.net.cn/plugin?id=4542
if (plus.runtime.appid !== 'HBuilder') { // 真机运行不需要检查更新，真机运行时appid固定为'HBuilder'，这是调试基座的appid
	checkUpdate()
}

方式二

在 uni-app x 中使用升级中心 0.7.0+
安装指引

在插件市场打开本插件页面，在右侧点击使用 HBuilderX 导入插件，选择要导入的项目点击确定插件地址

升级中心在 uni-app x 端是 easycom 组件可直接使用，无需在页面导入注册。在需要显示升级弹窗的页面直接使用组件即可（升级中心弹出时会调用 api 隐藏 tabbar，在关闭时会调用调用 api 显示 tabbar）

注意组件的 ref 属性

<!-- 该组件的 @close 方法，会在关闭弹窗的时候调用 -->
<uni-upgrade-center-app ref="upgradePopup" @close="upgradePopupClose" />

在 script 标签内顶部引入 checkVersion 方法

import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'

在需要调用的页面中（一般在首页加载完成后调用或设置页面检查更新按钮调用）执行 checkUpdate 方法，比如在 onReady 生命周期中（注：因为是组件所以一定要保证组件加载完毕），以下为完整使用示例：

<template>
	<view>
		<!-- 页面其他内容 -->
		<uni-upgrade-center-app ref="upgradePopup" @close="upgradePopupClose" />
	</view>
</template>
<script>
	import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
	// ...
	export default {
		// ...
		onReady() {
			// 此处的 UniUpgradeCenterAppComponentPublicInstance 类型是 easycom 组件使用约定，详见：https://doc.dcloud.net.cn/uni-app-x/component/#method-easycom
			// 此处的 'upgradePopup' 要和组件的 ref 属性一致
			checkUpdate(this.$refs['upgradePopup'] as UniUpgradeCenterAppComponentPublicInstance)
		}
		// ...
	}
</script>