微信小程序更新提醒uniapp

简介

在小程序开发中，版本更新至关重要。为确保用户始终使用最新版本，我们建议在每次打开小程序时进行版本检测。具体方案如下：

1. 启动时版本检测：

我们使用uni-app提供的APIuni.getUpdateManager()，API返回全局唯一的版本更新管理器对象： updateManager，用于管理小程序更新。

2. 新版本提示与更新：

如果检测到新版本，弹出提示框告知用户有新版本可用。
提供“立即更新”选项。
用户选择“立即更新”后，小程序自动下载更新内容。

3. 重启应用新版本：

更新完成后，提示用户确认重启小程序以应用新版本。

| picture.image | | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |

摘要：在小程序开发中，版本更新至关重要。本方案利用 uni-app 的 uni.getUpdateManager() API 在启动时检测版本更新，提示用户并提供立即更新选项，自动下载更新内容，并在更新完成后重启小程序以应用新版本。适用于微信小程序，确保用户始终使用最新版本。以下是实现步骤：

实现步骤

1 创建更新方法

App.vue创建updateApp方法用于检查小程序是否有新版本。

<script setup lang="ts">
import { onLaunch } from '@dcloudio/uni-app'
import { useAppStore } from './stores/app'
import { useUserStore } from './stores/user'
const appStore = useAppStore()
const { getUser } = useUserStore()

// #ifdef MP-WEIXIN
const updateApp = () => {
  const updateManager = uni.getUpdateManager();

  updateManager.onCheckForUpdate(function (res) {
    // 请求完新版本信息的回调
    console.log(res.hasUpdate);
  });

  updateManager.onUpdateReady(function (res) {
    uni.showModal({
      title: '更新提示',
      content: '新版本已经准备好，是否重启应用？',
      success(res) {
        if (res.confirm) {
          // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
          updateManager.applyUpdate();
        } else if (res.cancel) {
          console.log('用户点击取消，不更新');
        }
      }
    });

  });

  updateManager.onUpdateFailed(function (res) {
    // 新的版本下载失败
    uni.showModal({
      title: '已经有新版本了哟~',
      content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~',
    })
  });
}
// #endif
onLaunch(async () => {
    await appStore.getConfig()
    // #ifdef MP-WEIXIN
    updateApp()
    // #endif
    await getUser()
})
</script>
<style lang="scss">
//
</style>

2 测试

添加编译模式，选择编译设置，选择成功状态进行模拟。

picture.image