uniapp热更新(springboot实现后台)

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

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

  
  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

  
  32188A43-904D-435C-AC50-A9913C964FE2.png

• 然后点击菜单栏发布按钮，移动APP升级包资源，弹出框中点发行

  
  15994D03-BF79-4E4D-901D-9CC48E8F42BB.png
  

  等待完成后，控制台会显示wgt包的位置，在unpackage目录下

  
  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的静态资源目录下

  
  3458DF6E-E93F-48B3-B6BB-11493668EC5D.png

• 这里特别注意，一定要将文件放到合适的位置，保障你返回的result中的wgtUrl 访问的时候能进行文件的下载

• 到这里就全部完成了，将上面未更新的app打包后的文件安装到手机上或者，安装到模拟器上面，注意手机和模拟器必须和电脑在一个局域网

• 然后打开文件，可以看到，apk。闪了一下，然后重新打开，就是热更新成功了

  
  Screenrecorder-2019-09-04-10-39-42-621.gif