uni-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 =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)
						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>