• 技术文章 >web前端 >uni-app

    uni-app跨平台应用开发之实现资源在线升级

    长期闲置长期闲置2022-02-28 18:00:39转载968
    本篇文章给大家带来了关于uniapp的相关知识，主要介绍了怎么实现资源在线升级以及热更新的相关问题，使用uni-app开发跨终端应用，可将代码编译到iOS、Android、微信小程序等平台，升级时也需考虑多平台同步升级，希望对大家有帮助。

    推荐：《uniapp视频教程》

    一、前言

    使用 uni-app 开发跨终端应用，可将代码编译到iOS、Android、微信小程序等多个平台，升级时也需考虑多平台同步升级。其中，uni-app发布为小程序的升级模式较简单，只需将开发完的代码提交小程序后台，待审核通过后用户将自动升级。

    HBuilderX 1.6.5 起，uni-app 支持生成 App 资源升级包wgt。

    二、wgt 资源升级包升级

    2.1 修改版本号

    首先，更新 manifest.json 中的版本号。
    比如之前是 1.0.0，那么新版本应该是 1.0.1 或 1.1.0 这样。
    在这里插入图片描述

    2.2 发行

    然后，在 HBuilderX 中生成升级包（wgt）。

    菜单->发行->原生App-制作移动App资源升级包

    在这里插入图片描述
    生成结束会在控制台告知升级包的输出位置。
    在这里插入图片描述

    2.3 安装资源升级包

    应用的升级需要服务端与客户端配合完成，下面以本地测试过程中的操作举例说明：

    存放资源
    将 %appid%.wgt 文件存放在服务器的 static 目录下，即 http://www.example.com/static/UNI832D722.wgt。

    服务端接口
    约定检测升级的接口，地址为：http://www.example.com/update/

    传入参数

    返回参数

    2.3.1 代码示例

    下面是一个简单的服务端判定的示例，仅做参考，实际开发中根据自身业务需求处理。

    var express = require('express');  var router = express.Router();  var db = require('./db');  // TODO 查询配置文件或者数据库信息来确认是否有更新  
function checkUpdate(params, callback) {  
    db.query('一段SQL', function(error, result) {  
        // 这里简单判定下，不相等就是有更新。  
        var currentVersions = params.appVersion.split('.');  
        var resultVersions = result.appVersion.split('.');  

        if (currentVersions[0] < resultVersions[0]) {  
            // 说明有大版本更新  
            callback({  
                update: true,  
                wgtUrl: '',  
                pkgUrl: result.pkgUrl  
            })  
        } else {  
            // 其它情况均认为是小版本更新  
            callback({  
                update: true,  
                wgtUrl: result.wgtUrl,  
                pkgUrl: ''  
            })  
        }  
    });  }  router.get('/update/', function(req, res) {  
    var appName = req.query.name;  
    var appVersion = req.query.version;  
    checkUpdate({  
        appName: appName,  
        appVersion: appVersion  
    }, function(error, result) {  
        if (error) {  
            throw error;  
        }  
        res.json(result);  
    });  });

    注意事项

    客户端检测升级
    在 App.vue 的 onLaunch 中检测升级，代码如下：

    // #ifdef APP-PLUS  plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {  
    uni.request({  
        url: 'http://www.example.com/update/',  
        data: {  
            version: widgetInfo.version,  
            name: widgetInfo.name  
        },  
        success: (result) => {  
            var data = result.data;  
            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...');  
                            });  
                        }  
                    }  
                });  
            }  
        }  
    });  });  // #endif

    不支持资源升级包情况如下：

    注意事项

    但实际上热更新使用非常普遍，不管是原生开发中还是跨平台开发。

    Apple曾经禁止过jspatch，但没有打击其他的热更新方案，包括cordovar、react native、DCloud。封杀jspatch其实是因为jspatch有严重安全漏洞，可以被黑客利用，造成三方黑客可篡改其他App的数据。

    使用热更新需要注意：

    三、整包升级

    接口约定
    如下数据接口约定仅为示例，开发者可以自定义接口参数。

    请求地址：https://www.example.com/update

    请求方法：GET

    请求数据：

    {  
    "appid": plus.runtime.appid,  
    "version": plus.runtime.version  
}

    响应数据：

    {  
    "status":1,//升级标志，1：需要升级；0：无需升级  `在这里插入代码片`    "note": "修复bug1；\n修复bug2;",//release notes  
    "url": "http://www.example.com/uniapp.apk" //更新包下载地址  
}

    3.1 客户端实现

    App启动时，向服务端上报当前版本号，服务端判断是否提示升级。

    在App.vue的onLaunch中，发起升级检测请求，如下：

    onLaunch: function () {  
    //#ifdef APP-PLUS  
    var server = "https://www.example.com/update"; //检查更新地址  
    var req = { //升级检测数据  
        "appid": plus.runtime.appid,  
        "version": plus.runtime.version  
    };  
    uni.request({  
        url: server,  
        data: req,  
        success: (res) =&gt; {  
            if (res.statusCode == 200 &amp;&amp; res.data.status === 1) {  
                uni.showModal({ //提醒用户更新  
                    title: "更新提示",  
                    content: res.data.note,  
                    success: (res) =&gt; {  
                        if (res.confirm) {  
                            plus.runtime.openURL(res.data.url);  
                        }  
                    }  
                })  
            }  
        }  
    })  
    //#endif  }

    注意：App的升级检测代码必须使用条件编译，否则在微信环境由于不存在plus相关API，将会报错。

    3.2 数据表实现

    需维护一张数据表，用于维护APP版本信息，主要字段信息如下：

    字段名称数据类型数据说明
    AppIDvarcharmobile AppID
    versionvarchar应用市场版本号
    notesvarchar版本更新说明
    urlvarchar应用市场下载URL。 注意：根据谷歌、App Store应用市场审核规范，应用升级只能通过提交应用市场更新，不能通过下载apk、IPA安装方式更新应用。

    3.3 服务端实现

    根据客户端接收的版本号，比对服务端最新版本号，决定是否需要升级，若需升级则返回升级信息（rlease notes、更新包地址等）

    开发者可以根据服务端开发语言，自己实现升级检测逻辑，如下是一个php示例代码：

    header("Content-type:text/json");  $appid = $_GET["appid"];  $version = $_GET["version"]; //客户端版本号  
$rsp = array("status" =&gt; 0); //默认返回值，不需要升级  
if (isset($appid) &amp;&amp; isset($version)) {  
    if ($appid === "__UNI__123456") { //校验appid  
        if ($version !== "1.0.1") { //这里是示例代码，真实业务上，最新版本号及relase notes可以存储在数据库或文件中  
            $rsp["status"] = 1;  
            $rsp["note"] = "修复bug1；\n修复bug2;"; //release notes  
            $rsp["url"] = "http://www.example.com/uniapp.apk"; //应用升级包下载地址  
        }  
    }  }   echo json_encode($rsp);  exit;

    注意事项：

    四、Uni-app 版本升级中心

    uni-app提供了一整套版本维护框架，包含升级中心uni-upgrade-center - Admin、前台检测更新uni-upgrade-center-app。

    4.1 升级中心 uni-upgrade-center - Admin

    uni-app提供了版本维护后台应用升级中心uni-upgrade-center - Admin，升级中心是一款uni-admin插件，负责App版本更新业务。包含后台管理界面、更新检查逻辑，App内只要调用弹出提示即可。
    在这里插入图片描述
    在上传安装包界面填写此次发版信息，其中包地址可以选择手动上传一个文件到云存储，会自动将地址填入该项。

    也可以手动填写一个地址（例如：https://appgallery.huawei.com/app/C10764638），就可以不用再上传文件。

    如果是发布苹果版本，包地址则为应用在AppStore的链接。
    在这里插入图片描述
    升级中心有以下功能点：

    • 云储存安装包CDN加速，使安装包下载的更快、更稳定
    • 应用管理，对App的信息记录和应用版本管理。
    • 版本管理，可以发布新版，也可方便直观的对当前App历史版本以及线上发行版本进行查看、编辑和删除操作。
    • 版本发布信息管理，包括更新标题，内容，版本号，静默更新，强制更新，灵活上线发行的设置和修改。
    • 原生App安装包，发布Apk更新，用于App的整包更新，可设置是否强制更新。
    • wgt资源包，发布wgt更新，用于App的热更新，可设置是否强制更新，静默更新。
    • App管理列表及App版本记录列表搜索。
    • 只需导入插件，初始化数据库即可拥有上述功能。
    • 也可以自己修改逻辑自定义数据库字段，和随意定制 UI 样式。

    4.2 前台检测更新 uni-upgrade-center-app

    uni-upgrade-center-app 负责前台检查升级更新。

    项目结构如下图所示：
    在这里插入图片描述
    检测更新视图如下图所示：
    在这里插入图片描述在这里插入图片描述
    该插件提供如下功能：

    • 统一管理App及App在Android、iOS平台上App安装包和wgt资源包的发布升级。
    • 基于uni-upgrade-center一键式检查更新，统一整包与 wgt 资源包更新。
    • 自行根据传参完成校验，判断此次更新使用哪种方式。
    • 一键式升级。已集成弹框、下载、安装、是否强制重启等逻辑。
    • 下载完成如果取消升级自动缓存安装包，下次进入判断是否符合安装条件，判断不通过则自动清除。
    • 美观，实用，可自定义扩展。

    注意：在手机基座上运行时获取到的版本号和appid是hbuilder和hbuilder的版本需要在文件里面手动设置。

    4.3 工作原理

    升级中心uni-upgrade-center - Admin负责维护版本信息，并将版本信息维护至数据库中。
    前台检测更新插件uni-upgrade-center-app负责提供调用云函数读取数据库维护的版本信息一键式检查更新。

    推荐：《uniapp教程》

    以上就是uni-app跨平台应用开发之实现资源在线升级的详细内容，更多请关注php中文网其它相关文章！

    声明：本文转载于：CSDN，如有侵犯，请联系admin@php.cn删除
    专题推荐：uniapp
    上一篇：带你搞懂uniapp跨域问题（实例详解） 下一篇：一起分析uni-app怎么实现上传图片
    20期PHP线上班

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 详解uniapp项目中如何引入axios• 两分钟教你宝塔怎么部署uniapp h5项目• uniapp中怎么使用scrpll-view组件实现下拉刷新• uniapp调用vue和nvue的区别是什么• UniApp实战之开发一个复杂场景的表格组件
    1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载