uniapp如何实现热更新逻辑

❝

现在热更新已经很普遍了，无论是游戏还是平常的 app 甚至在一些脚手架或者编辑器我们都可以看到

他们或许表现不一致，但都有一个最终的效果，那就是能实时更新我们所需要的内容

本篇主要讲述的是小程序的热更新以及APP 的热更新(谷歌应用市场应用未试验过)

❞

小程序热更新

小程序热更新一般比较简单，各平台都支持

主要是为了在有新版本发布的时候实时通知用户，下载新版本使用，防止出现问题。

下面直接上代码

// 放在 app.Vue 的 onShow 生命周期里面
// 以下是vue3的示例

// app.vue
import {
  onShow
} from "@dcloudio/uni-app"

const updateMiniProgram = () => {
    const updateManager = uni.getUpdateManager();

    updateManager.onCheckForUpdate(() => {});

    updateManager.onUpdateReady((res) => {
        uni.showModal({
            title: '更新提示',
            content: '新版本已经准备好，是否重启应用？',
            success(_res) {
                if (_res.confirm) {
                    // 重启
                    updateManager.applyUpdate();
                }
            }
        });
    });

    updateManager.onUpdateFailed(() => {});
 }


onShow(() => {
    updateMiniProgram()
})

APP更新

插件方式

插件市场有很多解决方案

可以使用官方的热更新解决方案，这里主要讲述自己实现

无论是那种实现，都需要后台上传热更新包告诉APP，是否要更新

官方实现

优点:
使用简单，无需太复杂的操作
界面美观，可直接使用
官方插件有保障

缺点:
需要单独部署后台管理系统
云开发以及云函数开发可能需要前端自己开发
目前按流量收费

总结：不想自己开发逻辑的可使用官方插件，但后期费用什么的不好说（毕竟之前都是免费的），现在很多东西都收费了

自己实现

其实整个过程也没那么难，这里主要讲解一下过程

后台管理系统

需开发包管理模块，区分IOS包和安卓包

包含版本号、下载链接、热更新链接、最低版本号

热更新包我们可以放到OSS上或者其他位置

还要维护全局版本号即最低版本号的判断条件，还可以加入是否强制更新

上述其实没什么难度，就是一个简单的增删改查列表

APP端热更新

获取当前包的版本信息

// 使用plus拿到当前的包
plus.runtime.getProperty(plus.runtime.appid, (inf) => {
    const version = inf.version.split('.').join('');
    console.log('机型=>' + plus.device.model)
    console.log('生产厂商=>' + plus.device.vendor)
    console.log('唯一标识=>' + plus.device.uuid)
    console.log('设备操作系统=>' + plus.os.version)
    // 获取最近的版本信息 发送请求
    // 把当前包版本号传给后端查询是否需要更新
    await clientVersion(options)
}

更新逻辑

1.强制更新

// 获取最近的版本信息
const res = await clientVersion(options)

if(res.type === "强制更新"){
    // 强制更新则提示打开自己的网站
    uni.showModal({
        title: '更新提示',
        content: '应用需要升级',
        showCancel: false,
        cancelText: '',
        confirmText: '立即升级',
        success: res => {
            // 打开自己的下载网站
            plus.runtime.openURL(downloadUrl);
        }
    });
    return;
}

2.可选更新

// 获取最近的版本信息
const res = await clientVersion(options)

if(res.type === "可选更新"){
    // 可选更新选择更新即打开自己的网站
    // 不更新无操作
    uni.showModal({
        title: '更新提示',
        content: '应用需要升级',
        showCancel: true,
        cancelText: '下次再说',
        confirmText: '立即升级',
        success: res => {
              if (res.confirm) {
                // 打开自己的下载网站
                  plus.runtime.openURL(downloadUrl);
              }
        }
    });
    return;
}

3.自动更新

// 获取最近的版本信息
const res = await clientVersion(options)

if(res.type === "自动更新"){
    // 下载安装包
    uni.downloadFile({
        url: updeteUrl,
        success: (result) => {
            if (result.code === 200) {
                // 自动安装(应用重启才会生效)
                plus.runtime.install(result.path, {
                  force: false
                }, function() {
                  console.log('install success...');
                  //重启
                  // 也可以下次自己启动
                  plus.runtime.restart();
                }, function(e) {
                  console.error('自动更新，安装失败')
                });
            } else {
                console.error('自动更新，下载失败');
            }
        },
        fail: function(e) {
          console.error('下载失败',JSON.stringify(e))
        }
    });
}

4.无更新

// 获取最近的版本信息
const res = await clientVersion(options)
if(res.type === "无更新"){
  // 其他操作
}

至此基本上逻辑讲清楚了，至于后端如何设计、UI如何设计这就不多说了！

上面提到了下载APP的网页，后续可以出篇文章

如果感觉有帮助，麻烦3连(关注、赞、在看)，谢谢! 后面会更新更多。