首页 APP开发 正文内容

uni-app 做 APP 时,版本检测代码写在哪个位置?

2023年08月26日 , , 116

本文使用我在项目中的代码例子来说明,APP 的版本更新应该考虑写在哪。

如果你之前一直是开发 H5 等网页项目的,开始接触 uni-app 开发 APP 时,对 APP 的版本更新功能比较陌生,这是因为网页应用一般都没有版本更新的功能,都是“热更新”的。

APP 版本更新
APP 版本更新

判断 APP 版本更新,需要4个字段

  1. 版本号:比如 100,版本越高,版本号越大;
  2. 版本名称:比如 1.10.11,给版本命名,小版本迭代一般只改变点后面的;
  3. 更新日志:文字描述新版本做了哪些更新;
  4. 新版本下载地址:方便用户跳转到更新链接下载新版本(安卓需要)

这些一般后端都会返回给前端,要实现版本检测,我们只需要写一个请求去后端检查,拿到最新版本信息后,对比版本号就可以了,不过检测代码应该写在哪个文件比较好呢?这也是我刚开发学习用 uni-app 开发 APP 时的疑问。

APP 版本更新的调用的两个时机

我们观察常规的 APP,一般有两个时机会调用版本更新的代码:

  • 启动 APP 时,会检测更新,如果有新版本,则弹框提示;
  • 在关于页面一般也有入口,查看当前 APP 的信息,用户错过首页更新弹窗时,可以在这里更新

所以这个检测代码不止一个地方调用,比较好的方式是封装成一个公共的方法,分别在上面所提到的 APP 首页关于页面调用,应该是比较合理的位置了。

简单的代码实现

比如我会新建一个 util.js,里面存放公共方法:

// util.js 常用方法封装
let util = {
   sleep(time) {
      return new Promise((resolve) => {
         setTimeout(resolve, time)
      })
   },

   // 简化页面跳转代码
   navTo(url) {
      uni.navigateTo({
         url: url,
         fail(err) {
            console.log(err);
         }
      });
   },

   // 这里写版本更新代码
   checkUpdate() {
     // ...
   }
}

// 导出模块
export default util;

然后在 main.js 中它挂载到 Vue 实例中:

import Vue from 'vue'
import App from './App'
import util from './util/util' // 引入公共方法模块
Vue.prototype.$util = util // 挂载到 Vue
App.mpType = 'app';
const app = new Vue({
  store,
  ...App
})
app.$mount()

这样就可以在任意 Vue 页面调用:

<script>
// ...
  this.$util.checkUpdate(); // 直接通过 this 调用
// ...
</script>

这就是一个简单的 uni-app 开发 APP 项目时,版本更新的实现方式,本站会持续分享更多的 APP 开发知识,欢迎收藏本站,常来找找答案。