uni-app如何实现增量更新功能


Posted in Javascript onJanuary 03, 2020

都知道,很多APP都有增量更新功能,Uni APP也是在今年初,推出了增量更新功能,今天我们就来学习一波。 当然,很多应用市场为了防止开发者不经市场审核许可,给用户提供违法内容,对增量更新大多持排斥态度,特别是apple。所以拥有增量更新的app,需要注意以下几点:

1、上架审核期间不要弹出增量更新提示

2、增量更新内容使用https下载,避免被三方网络劫持

3、不要更新违法内容、不要通过增量更新破坏应用市场的利益,比如iOS的虚拟支付要给Apple抽佣等

通过本章节你能学到那些?

1、如何实现增量更新功能 2、Uni-App 如何制作增量更新升级包 3、Uni-App 增量更新功能需要注意些什么 4、Uni-App 部分相关api学习

话不多说,直接上干货!

如何实现增量更新功能

这里不是针对Uni-App开发,所有的增量更新都应如此(但代码以Uni-App为例)。

1、app端,先调用服务端接口,判断是否需要更新

2、需要更新,直接下载更新升级包

3、安装升级包,app重启即可完成升级

ok,我们以Uni-App为例,看看代码具体实现

客户端实现 在 根目录 App.vue 的 onLaunch 中检测升级,代码如下:

// #ifdef APP-PLUS 
plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) { 
  uni.request({ 
    url: 'http://www.javanx.cn/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) {
               // 这里的错误很重要,最好能记录的服务器日志中,方便调试或以后维护了解更新错误情况,及时解决
               // 如何更新到服务器?
               // 调用一个接口,将e返回咯
               console.error('install fail...'); 
              }); 
            } 
          } 
        }); 
      } 
    } 
  }); 
}); 
// #endif

代码解析: 1、#ifdef APP-PLUS 判断是app端,才检测是否需要更新

2、plus.runtime.getProperty 获取指定APPID对应的应用信息

plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
 //appid属性
 var wgtStr = "appid:"+wgtinfo.appid;
 //version属性
 wgtStr += "<br/>version:"+wgtinfo.version;
 //name属性
 wgtStr += "<br/>name:"+wgtinfo.name;
 //description属性
 wgtStr += "<br/>description:"+wgtinfo.description;
 //author属性
 wgtStr += "<br/>author:"+wgtinfo.author;
 //email属性
 wgtStr += "<br/>email:"+wgtinfo.email;
 //features 属性
 wgtStr += "<br/>features:"+wgtinfo.features;
 console.log( wgtStr );
} );

3、uni.request调用服务端接口,传入当前版本,服务端返回update是否需要更新,需要更新时返回wgtUrl更新升级包路径。

4、uni.downloadFile 下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径tempFilePath。如何我们需要监听下载进度,可以这样:

var downloadTask = uni.downloadFile({
  url: 'https://www.javanx.cn/file/uni-app.rar',
  complete: ()=> {}
});
downloadTask.onProgressUpdate(function(res)=>{
 console.log('下载进度' + res.progress);
 console.log('已经下载的数据长度' + res.totalBytesWritten);
 console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
})

downloadTask 对象的还提供了一下方法: (1)、abort 中断下载任务

(2)、onHeadersReceived` 监听 HTTP Response Header 事件,会比请求完成事件更早,仅微信小程序平台支持

(3)、offProgressUpdate 取消监听下载进度变化事件,仅微信小程序平台支持

(4)、offHeadersReceived 取消监听 HTTP Response Header 事件,仅微信小程序平台支持

5、plus.runtime.install(filePath, options, installSuccessCB, installErrorCB)。 支持以下类型安装包:

(1)、应用资源安装包(wgt),扩展名为'.wgt';

(2)、应用资源差量升级包(wgtu),扩展名为'.wgtu';

(3)、系统程序安装包(apk),要求使用当前平台支持的安装包格式。 注意:仅支持本地地址,调用此方法前需把安装包从网络地址或其他位置放置到运行时环境可以访问的本地目录。

服务端实现 以nodejs为例:

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 // apk,ipa包可下载地址
      }) 
    } else if (currentVersions[currentVersions.length-1] < resultVersions[resultVersions.length-1]) {
     // 认为是小版本更新 
      callback({ 
        update: true, 
        wgtUrl: result.wgtUrl, // wgt包可下载地址
        pkgUrl: '' 
      }) 
    } else { 
      // 其它情况均不更新
      callback({ 
        update: false
      }) 
    } 
  }); 
} 

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); 
  }); 
});

ok,有了以上的功能,我们就用HBuilderx制作升级包.wgt,放到服务器上,共升级使用。

Uni-App 如何制作增量更新升级包

1、更新 manifest.json 中的版本号。如果上一个版本的版本号是1.0.0,这里打升级包的时候就可以是1.0.1,反正要不前面的大,大家也可看到服务端接口实现了,就是通过版本号来判断的。

uni-app如何实现增量更新功能

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

uni-app如何实现增量更新功能

3、等待控制台生成升级包的输出位置

uni-app如何实现增量更新功能

4、将升级包上传到服务器,接口实现并返回:wgtUrl=刚刚打的升级包

这样,我们的app就拥有了,增量更新功能。每次如果是小量更新,就可以通过wgt包,来实现增量更新。

下面来看看,Uni App增量更新时,需要注意哪些问题?

Uni-App 增量更新功能需要注意些什么

1、SDK 部分有调整,比如新增了 Maps 模块等,不可通过此方式升级,必须通过整包的方式升级。

2、如果是老的非自定义组件编译模式,之前没有 nvue 文件,但更新中新增了 nvue 文件,不能使用此方式。因为非自定义组件编译模式如果没有 nvue 文件是不会打包weex引擎进去的,原生引擎无法动态添加。自定义组件模式默认就含着weex引擎,不管工程下有没有nvue文件。

3、原生插件的增改,同样不能使用此方式。

4、#ifdef APP-PLUS 条件编译,仅在 App 平台执行此升级逻辑。

5、appid 以及版本信息等,在 HBuilderX 真机运行开发期间,均为 HBuilder 这个应用的信息,因此需要打包自定义基座或正式包测试升级功能。

6、plus.runtime.version 或者 uni.getSystemInfo() 读取到的是 apk/ipa 包的版本号,而非 manifest.json 资源中的版本信息,所以这里用 plus.runtime.getProperty() 来获取相关信息。

7、安装 wgt 资源包成功后,必须执行 plus.runtime.restart(),否则新的内容并不会生效。

8、如果App的原生引擎不升级,只升级wgt包时需要注意测试wgt资源和原生基座的兼容性。平台默认会对不匹配的版本进行提醒,如果自测没问题,可以在manifest中配置忽略提示

总结

今天你学到了什么?Uni-App 增量更新你学会了吗?

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
May 03 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
Jan 15 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 Javascript
vue实现简易音乐播放器
Aug 14 Vue.js
JS实现简单日历特效
Jan 03 #Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 #Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 #Javascript
Element-UI+Vue模式使用总结
Jan 02 #Javascript
JS代码触发事件代码实例
Jan 02 #Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 #Javascript
Vue 实现分页与输入框关键字筛选功能
Jan 02 #Javascript
You might like
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
php超快高效率统计大文件行数
2015/07/05 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
Google 静态地图API实现代码
2010/11/19 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
2017/12/06 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
Python判断Abundant Number的方法
2015/06/15 Python
Python脚本实现虾米网签到功能
2016/04/12 Python
深入理解Python变量与常量
2016/06/02 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Python基于matplotlib画箱体图检验异常值操作示例【附xls数据文件下载】
2019/01/07 Python
python实现在函数中修改变量值的方法
2019/07/16 Python
什么是python的自省
2020/06/21 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
mac系统下安装pycharm、永久激活、中文汉化详细教程
2020/11/24 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
北京RT科技有限公司.net工程师面试题
2013/02/15 面试题
解释DataSet(ds) 和 ds as DataSet 的含义
2014/07/27 面试题
网络技术支持面试题
2013/04/22 面试题
经济系大学生求职信
2013/10/01 职场文书
园林技术个人的自我评价
2014/01/08 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
cf战队收人广告词
2014/03/14 职场文书
服务理念标语
2014/06/18 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
人生遥控器观后感
2015/06/11 职场文书
关于法制教育的宣传语
2015/07/13 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
Nginx动静分离配置实现与说明
2022/04/07 Servers