小程序发布后,不能强更的情况下,怎么通知到用户需要去更新?

哈喽,我想和大家分享一下我在开发记账小程序时遇到的一个问题,以及我找到的解决办法。

这个记账小程序从一开始,我就特别在意用户的隐私,所以把记账数据都存到了本地缓存里,还做了个手动备份的功能。但系统嘛,总是要升级的,有时候就得强制更新。这一强制更新,麻烦就来了,缓存没了,用户辛辛苦苦记的账也全没了,这可太糟糕了。

问题来了,我怎么通知用户要去更新呢?

后来我琢磨出了一个办法。每次发布新版本的时候,我就把当前的版本号带上去。等用户打开页面,就让小程序去调后台接口,获取那些落后的版本信息,然后把更新消息告诉用户。

看最终结果:

由于更新前要备份数据,我还专门做了一个视频教程,点击按钮就能跳转到哔哩哔哩查看。

ok,先看看前端代码。我定义了一个 version 常量,用来表示当前版本,现在是 7 。然后有个 getDelayVersion 函数,专门去获取落后版本记录。它用 uni.request 去调后台接口,把当前版本号 version 和用户的 openid 传过去。要是接口调用成功,状态码是 200 ,就把返回的数据存到 delayVersions.value 里;要是失败了,就在控制台打印错误信息,还会给用户弹出一个提示框,说查询最新版本失败。

javascript 复制代码
/** 当前版本 */
const version = 7;
// ------------------------
// 获取落后的版本记录
// ------------------------
const getDelayVersion = async () => {
    try {
        const apiRes = await uni.request({
            url: api + '/getDelayVersion', // 替换为实际接口
            method: 'GET',
            data: { 
                version,
                openid: openId.value
            }
        });
        
        if (apiRes.statusCode === 200) {
            delayVersions.value = apiRes.data.data
        } else {
            throw new Error('查询最新版本失败');
        }
        
    } catch (error) {
        console.error('查询最新版本失败:', error);
        uni.showToast({ title: '查询最新版本失败', icon: 'none' });
    }
}

后台代码也不复杂。用 @RequestMapping 定义了一个 /getDelayVersion 的接口,接收前端传过来的 versionopenid 。如果 openid 不为空,就去数据库里查对应的用户信息,把用户的版本号更新一下。然后再从 app_info 表里查出版本号大于传过来的 version 的所有记录,封装成响应数据返回给前端。

scss 复制代码
@RequestMapping("/getDelayVersion")
public WxResponse<List<AppInfo>> getDelayVersion(String version,String openid) throws IOException {
    WxResponse<List<AppInfo>> wxResponse = new WxResponse();
    wxResponse.setStatusCode(BusinessStatusEnum.SUCCESS.getCode());
    if(StrUtil.isNotBlank(openid)) {
        UserInfo userInfo = userInfoMapper.selectOne(new LambdaQueryWrapper<UserInfo>().eq(UserInfo::getOpenId, openid));
        userInfo.setVersion(version);
        userInfoMapper.update(userInfo,new LambdaQueryWrapper<UserInfo>().eq(UserInfo::getOpenId,openid));
        log.info(StrUtil.format("{} 当前版本{}记录OK",openid,version));
    }
    List<AppInfo> appInfoList = appInfoMapper.selectList(new LambdaQueryWrapper<AppInfo>().gt(AppInfo::getVersion, version));
    wxResponse.setData(appInfoList);
    return wxResponse;
}

最后说说这个 app_info 表的结构,就两列, version 存版本号, content 存一些相关内容,表的注释写的是"小程序版本表"。

sql 复制代码
CREATE TABLE `app_info` (
  `version` varchar(100) DEFAULT NULL,
  `content` varchar(200) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='小程序版本表';

目前这个办法还挺好用的,能通知到用户去更新,大家要是在开发过程中遇到类似的情况,也可以在评论区一起聊聊是怎么解决的。

相关推荐
ZC跨境爬虫15 分钟前
Scrapy工作空间搭建与目录结构解析:从初始化到基础配置全流程
前端·爬虫·python·scrapy·自动化
小村儿18 分钟前
连载04-最重要的Skill---一起吃透 Claude Code,告别 AI coding 迷茫
前端·后端·ai编程
_院长大人_1 小时前
Vue + ECharts 实现价格趋势分析图
前端·vue.js·echarts
IT_陈寒1 小时前
Vite的alias配置把我整不会了,原来是这个坑
前端·人工智能·后端
万物得其道者成1 小时前
Cursor 提效实战:我的前端 Prompt、审查 SKILL、MCP 接入完整方法
前端·prompt
酒鼎2 小时前
学习笔记(12-02)事件循环 - 实战案例 —⭐
前端·javascript
Bigger2 小时前
第一章:我是如何剖析 Claude Code 整体架构与启动流程的
前端·aigc·claude
竹林8182 小时前
从“连接失败”到丝滑登录:我用 ethers.js v6 搞定 MetaMask 钱包连接的全过程
前端·javascript
oi..2 小时前
《Web 安全入门|XSS 漏洞原理、CSP 策略与 HttpOnly 防护实践》
前端·网络·测试工具·安全·web安全·xss
UXbot2 小时前
2026年AI全链路产品开发工具对比:5款从创意到上线一站式平台深度解析
前端·ui·kotlin·软件构建·swift·原型模式