uni-app热更新实现

切图仔

发布于 2022-09-08 16:29:03

3810

发布于 2022-09-08 16:29:03

文章被收录于专栏：生如夏花绚烂

数据表设计

url:热更新包/安装包

version:版本号

status:是否已上线

后端

<?php

namespace App\Http\Controllers\Api\V1;

use Illuminate\Http\Request;
use App\Update;
class UpdateController extends Controller
{
    //
    public function update(Request $request)
    {
        $res = Update::where('status',1)->orderby('created_at','desc')->get();
        if(!isset($res[0]->id)) return response()->json(['暂无版本更新']);
        if($res[0]->version==$request->version)return response()->json(['暂无版本更新']);
        return response()->json(['data'=>$res]);

    }
}

路由

 //版本更新
 Route::post('update','UpdateController@update');

uni-app部分

1.新键util.js文件

写入更新方法

update(showToast = false){
        // #ifdef APP-PLUS  
        plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
            $.post('update',{
                varsion:widgetInfo.version,//当前版本号
            }).then((res)=>{
                console.log(res)
                let result = res;
                //错误处理
                var data = result.data.data[0];
                if(!data)return;
                if(!data.url){
                    //无需更新
                    if(showToast){
                        uni.showToast({
                            title: '当前是最新版本'
                        });
                    }
                }else{
                    uni.showModal({
                        title: '发现新的版本',
                        content: '最新版本'+data.version,
                        cancelText: '稍后更新',
                        confirmText: '立即更新',
                        success: res => {
                            if(res.confirm){
                                uni.downloadFile({
                                    url: data.url,  
                                    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...');  
                                            });  
                                        }  
                                    }  
                                });  
                            }
                        },
                        fail: () => {},
                        complete: () => {}
                    });
                }
                
                
            })
        });  
        // #endif
    },

2.在main.js引入

//助手函数
import $U from './common/util.js'
Vue.prototype.$U = $U

3.在APP.vue调用

    onLaunch: function() {
            console.log('App Launch')
            //监听网络
            this.$U.onNetWork()
            // //检查更新
            this.$U.update()
            this.User.__init()
},

当软件打包安装后，我们可以上传热更新包后软件包，热更新包不会重新安装应用，软件包需要重新安装应用，不过需要注意的是使用热更新包必须保证之前打包软件的Hbuilder版本必须与当前Hbuilder相同，如果不同就使用软件包

下面简单热更新包的使用

打开manifest.json配置应用版本号，之前要比之前高