uniapp热更新(springboot实现后台)

你的名字 2021-09-12 02:46 717阅读 0赞

###### 需要完成的功能，uniapp的热更新，原始app如下，需要在页面新加一行文字，然后实现热更新 ######

![11172442-60dc1a2831dcb31a.jpg][]

Screenshot\_2019-09-04-10-09-59-253\_io.dcloud.UNIE.jpg

###### 实现原理 ######

*  后台提供接口：/update
    
     *  参数
        
         *  name:"当前应用名称"（官网意思是，如果你包含多个应用可以，根据这个字段来更新不同的应用）
         *  version:"当前应用的版本名称，注意是版本名称不是版本号，其实有时候使用版本号更好处理，后台就不用字符串分割，但是我们还是按照官网介绍来做"
     *  返回值:
        
         *  update 类型个boolean 是否有更新
         *  wgtUrl 热更新包的下载地址
         *  pkgUrl 整包更新的下载地址，当前热更新我们用不到
 *  uniapp中启动时自动调用接口，上传当前app的版本信息，有更新时，下载更新包热更新，没有更新不操作

###### 实现步骤 ######

*  在当前需要热更新的uniapp的 App.vue中的onLaunch方法中加上版本检测的代码

onLaunch: function() {
                console.log('App Launch')
                
                plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {  
                    uni.request({  
    // 这里填写的是当前电脑所在局域网的ip地址加端口号加接口地址
                        url: 'http://192.168.1.175:8080/update/',  
                        data: {  
                            version: widgetInfo.version,  
                            name: widgetInfo.name  
                        },  
                        success: (result) => {  
                            var data = result.data;  
                            console.log(result)
                            if (data.update && data.wgtUrl) {  
                                uni.downloadFile({  
                                    url: data.wgtUrl,  
                                    success: (downloadResult) => {  
                                        if (downloadResult.statusCode === 200) {  
                                            plus.runtime.install(downloadResult.tempFilePath, {  
                                                force: false  
                                            }, function() {  
                                                console.log('install success...');  
                                                plus.runtime.restart();  
                                            }, function(e) {  
                                                console.error('install fail...');  
                                            });  
                                        }  
                                    }  
                                });  
                            }  
                        }  
                    });  
                });  
            }

*  确认当前app的版本信息，版本名称是1.0.0版本号是100
    
      
    
    
    ![11172442-5bfc161eb89be43f.png][]
    
    97D5421E-E235-4E7E-A605-2D74500B03AA.png
 *  打包！！！！这里一定要打一个未更新的包，方便我们后面测试。
 *  开始编写app的新业务逻辑，或者是bug修复，我这里就直接在主页新加一段话

<template>
        <view class="content">
            <image class="logo" src="/static/logo.png" ></image>
            <view class="text-area">
                <text class="title">{{title}}</text>
            </view>
            
            <view @click="androidNative">点击调用android原生方法</view>
            
            <view>这里是新加的东西，12312312312</view>
            
        </view>
    </template>

*  修改更新后app的版本号和版本名称，我们这里改成1.1.0和110
    
      
    
    
    ![11172442-996f5682a1e569aa.png][]
    
    32188A43-904D-435C-AC50-A9913C964FE2.png
 *  然后点击菜单栏发布按钮，移动APP升级包资源，弹出框中点发行
    
      
    
    
    ![11172442-947d460a7f895444.png][]
    
    15994D03-BF79-4E4D-901D-9CC48E8F42BB.png
    
      
    
    
    等待完成后，控制台会显示wgt包的位置，在unpackage目录下
    
      
    
    
    ![11172442-757237850419a569.png][]
    
    E392BDB8-879A-405F-93CA-D7036AE93764.png
    
      
    好了到这一步APP端需要的更新资源就是这一个wgt文件，我们先保存好。

###### springboot后台代码编写 ######

*  第一步创建一个springboot项目
 *  写一个controller加上版本检测的接口

@RestController
    public class AppVersionController {
    
        @GetMapping("/update")
        public Result checkUpdate(@RequestParam("name") String name,@RequestParam("version") String version){
    
            if(Integer.valueOf(version.replaceAll("\\.",""))<110){
    //            如果传递过来的版本号小于当前最新版本号，说明有更新
                return new Result(true,"http://192.168.1.175:8080/__UNI__E0CD5A1.wgt","");
            }else {
                return  new Result(false,"","");
            }
    
        }
    }

其中就是讲前端传过来的应用版本名称与当前版本号110对比，我们前端未更新的是100如果比他小就会返回文件的下载地址

*  其中返回的result是一个java对象

@Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Result {
    //    update: true,
    //    wgtUrl: result.wgtUrl,
    //    pkgUrl: ''
        private boolean update;
        private String wgtUrl;
        private String pkgUrl;
    
    }

*  将uniapp更新资源包wgt放入当前springboot的静态资源目录下
    
      
    
    
    ![11172442-ad3a66fddc997e2b.png][]
    
    3458DF6E-E93F-48B3-B6BB-11493668EC5D.png
 *  这里特别注意，一定要将文件放到合适的位置，保障你返回的result中的wgtUrl 访问的时候能进行文件的下载
 *  到这里就全部完成了，将上面未更新的app打包后的文件安装到手机上或者，安装到模拟器上面，注意手机和模拟器必须和电脑在一个局域网
 *  然后打开文件，可以看到，apk。闪了一下，然后重新打开，就是热更新成功了
    
      
    
    
    ![11172442-ece0c9c84432685c.gif][]
    
    Screenrecorder-2019-09-04-10-39-42-621.gif

[11172442-60dc1a2831dcb31a.jpg]: /images/20210825/6f22269f903b4ecaa460d5a8d7be59fb.png
[11172442-5bfc161eb89be43f.png]: /images/20210825/8afb85cd6f2745ad84c3ef5d6a09653f.png
[11172442-996f5682a1e569aa.png]: /images/20210825/ac129cf3b6ae43ada7919bbcc5fe51b6.png
[11172442-947d460a7f895444.png]: /images/20210825/6fce3414bd494362aae2245d86909f48.png
[11172442-757237850419a569.png]: /images/20210825/2588377783804e4e8e7b49228143492c.png
[11172442-ad3a66fddc997e2b.png]: /images/20210825/eb063f6241b243ac8d1e23ea7b4f2399.png
[11172442-ece0c9c84432685c.gif]: /images/20210825/eb8e9635bdbc4f7e9d3489a5b5940637.png