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

如果你之前一直是开发 H5 等网页项目的，开始接触 uni-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 开发知识，欢迎收藏本站，常来找找答案。