0


uniapp前端实现热更新

思路:

1、首先,在主页或app.vue中使用plus.runtime.getProperty()获取到app的当前wgt包版本号。

2、然后,通过后端返回给你的接口里有一个版本号(需要手动去后台管理系统中上传一个wgt包,并输入这个wgt包的版本号)。

3、再之后,将这个版本号与app当前版本号进行对比,若当前版本号大于后端给你的版本号,就不升级,反之,则显示升级弹框,请用户下载升级(开发者调用下载安装api)。

4、最后,使用plus.runtime.restart()进行app重启刷新,在设置中加一个plus.runtime.getProperty()获取到版本号。

热更新所使用到的api:

1、获取app当前wgt包版本号:plus.runtime.getProperty();

2、下载:uni.downloadFile();

3、安装wgt包:plus.runtime.install();

4、重启app:plus.runtime .restart();

代码:

1、先获取app当前版本号与后端最新wgt包进行对比

//用于对比的函数
            duibi(version1 ,version2){
                    let arr1=version1.split(".");
                    let arr2=version2.split(".");
                    let length=Math.max(arr1.length,arr2.length);
                    for (let i = 0; i < length; i++) {
                        const n1 = Number(arr1[i]||0)
                        const n2 = Number(arr2[i]||0)
                        // 第一个版本号大
                        if (n1 > n2) return 1
                        //第二个版本号大
                        if (n1 < n2) return 2
                    }
                    return false;
            }

//获取app当前版本号
plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
                this.version  = widgetInfo.version; 
            });

注意:千万千万不要用这个(plus.runtime.version)作为判断,它获取的是当前app的安装包版本,上面的那个是获取wgt包的版本,两个不一样,plus.runtime.version始终是一个恒定的值,除非安卓整包更新。plus.runtime.version不能用做wgt热更新判断!!!

2、进行弹框询问和下载安装api调用,重启app完成热更新

if(当前通过上面的对比需要更新时){
                        uni.showModal({
                            title: "系统提示",
                            content: `当前版本号为(当前版本号),邀您更新版本(最新版本号)`,
                            success: (res) => {
                                 //用户确认更新
                                if (res.confirm) {
                                    //使用下载api(uni.downloadFile)
                                    let uploadTask =  uni.downloadFile({
                                        url: '下载地址', 
                                        success: (downloadResult) => {
                                            //使用安装wgtapi(plus.runtime.install)
                                            plus.runtime.install(
                                                downloadResult.tempFilePath, {
                                                    force: true
                                                },
                                                function() {
                                                    uni.showModal({
                                                        title: '系统提示',
                                                        content: '新版本已经更新完成,需要重启应用',
                                                        showCancel: false,
                                                        //用户点击确认重启
                                                        success: function(
                                                            res) {
                                                            if (res
                                                                .confirm) {
                                                                调用重启api(plus.runtime
                                                                    .restart)
                                                                plus.runtime
                                                                    .restart();
                                                            } else if (res
                                                                .cancel) {
                                                                console
                                                                    .log(
                                                                        '用户点击取消'
                                                                    );
                                                            }
                                                        }
                                                    });
                                                }
                                            )
                        
                                        }
                                    });
                                    
                                    //在这里监听用户下载进度
                                    uploadTask.onProgressUpdate((res)=>{
                                        this.pro = res.progress;
                                        console.log(this.pro);
                                        if(this.pro==100){
                                            this.isDown = false;
                                        }
                                    })
                                    
                                }
                            }
                        });
                    }

3、监听用户下载进度并优化弹框

为了使本文看起来不过于繁琐,就不单独再开一个代码块了,需要了解详情的可以进入官方文档https://uniapp.dcloud.net.cn/api/request/network-file.html#uploadfile

标签: uni-app

本文转载自: https://blog.csdn.net/F2691898750/article/details/128998835
版权归原作者 迷途执晓 所有, 如有侵权,请联系我们删除。

“uniapp前端实现热更新”的评论:

还没有评论