微信小程序更新提醒uniapp

简介: 在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤:### 实现步骤1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。2. **测试**:添加编译模式并选择成功状态进行模拟测试。

微信小程序更新提醒uniapp

简介

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

1. 启动时版本检测:

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

2. 新版本提示与更新:

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

3. 重启应用新版本:

  • 更新完成后,提示用户确认重启小程序以应用新版本。
image-20241015115442709 image-20241015120542076

摘要

实现步骤

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 测试

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

image-20241015115140237

目录
相关文章
|
1月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
213 3
|
1月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
40 2
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
104 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
小程序 API 开发工具
使用python 实现微信签到提醒功能
【9月更文挑战第4天】使用python 实现微信签到提醒功能
70 2
|
3月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
103 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
3月前
|
小程序 Java API
springboot 微信小程序整合websocket,实现发送提醒消息
springboot 微信小程序整合websocket,实现发送提醒消息
|
3月前
|
存储 小程序 JavaScript
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
82 7
|
3月前
|
小程序 前端开发 安全