uni-app App版本更新

效果图：

       

前言

在移动应用开发中，确保用户能够及时更新到最新版本是非常重要的。本文将介绍如何在 uni-app 中实现 App 整包更新功能，并提供相关代码示例以帮助理解。

代码实现

2.1 引入模块

首先，我们需要引入用于处理更新的模块（App.vue文件里面-如下图）：

import appUpdate from '@/uni_modules/leruge-app-update/js_sdk/leruge-app-update.js';

引入地址：@/uni_modules/leruge-app-update/js_sdk/leruge-app-update.js文件

gitee地址：app_document: App小功能文件模块

2.2 定义更新函数

     这段代码是一个接口请求（看不明白的可以看去主页看一下接口封装：https://blog.csdn.net/weixin_46166771/article/details/135764183?spm=1001.2014.3001.5501）

async loadData() {const that = this;// 获取应用的版本信息plus.runtime.getProperty(plus.runtime.appid, async function (wgtinfo) {try {// 调用接口检查更新const res = await that.$request({url: myApi.appUpdate, //引入接口文件method: 'GET',data: {version: wgtinfo.version},});console.log(res);// 如果返回结果为200，说明有新版本if (res.code == 200) {const updateInfo = {platform: 'android', // 更新平台updateContent: '更新提示，检测到最新版本', // 更新提示内容downUrl: res.result, // 下载链接force: false, // 是否强制更新mainColor: 'FF5B78' // 主色调};// 执行更新appUpdate(updateInfo);}} catch (e) {// 错误处理console.log(`这个接口错误：${myApi.appUpdate}`, e);} finally {// 可以在这里执行一些清理或结束操作}});
}

2.3 代码解析

2.3.1 获取版本信息

我们使用 plus.runtime.getProperty 方法获取当前应用的版本信息。这对于后续的更新检查至关重要，因为它帮助我们识别用户当前的应用版本。

plus.runtime.getProperty(plus.runtime.appid, async function (wgtinfo) { // ... });

2.3.2 发起更新请求

如果服务器返回状态码 200，说明有新版本可供更新。此时，我们构建更新信息对象 updateInfo，并调用 appUpdate 函数开始更新流程。

if (res.code == 200) {const updateInfo = {platform: 'android', // 更新平台updateContent: '更新提示，检测到最新版本', // 更新提示内容downUrl: res.result, // 下载链接force: false, // 是否强制更新mainColor: 'FF5B78' // 主色调};appUpdate(updateInfo);
}

App.vue文件全部代码

<script>import Vue from 'vue'import myApi from '@/utils/app.js' //调用接口使import appUpdate from '@/uni_modules/leruge-app-update/js_sdk/leruge-app-update.js'export default {onLaunch: function() {this.loadData()  //更新app控制},methods: {async loadData() { // 热更新const that =thisplus.runtime.getProperty(plus.runtime.appid,async function(wgtinfo) {try {const res = await that.$request({url: myApi.appUpdate,method: 'GET',data: {version:wgtinfo.version},});console.log(res)if (res.code == 200) {const updateInfo = {platform: 'android',updateContent: '更新提示，检测到最新版本',downUrl: res.result,force: false,mainColor: 'FF5B78'}appUpdate(updateInfo)}} catch (e) {// 失败执行console.log(`这个接口错误：${myApi.goodsList}`)} finally {// 销毁执行}})	},}}
</script><style lang="scss">/*每个页面公共css */</style>