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

都知道,很多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,反正要不前面的大,大家也可看到服务端接口实现了,就是通过版本号来判断的。

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

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

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 增量更新你学会了吗?

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

(0)

相关推荐

  • uni-app之APP和小程序微信授权方法

    uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 适用平台:Android.iOS.微信小程序.实现了一套代码,同时发布到Android.iOS.微信小程序. 参考官方:https://uniapp.dcloud.io/ APP微信授权 检测服务商 检测手机上是否安装微信.QQ.新浪微博等. uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.prov

  • 详解使用uni-app开发微信小程序之登录模块

    从微信小程序官方发布的公告中我们可获知:小程序体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作: 1.当用户未授权过,调用该接口将直接报错 2.当用户授权过,可以使用该接口获取用户信息 但在实际开发中我们可能需要弹出授权询问框,因此需要我们自己来写模拟授权弹框(主要是对<buttonopen-typ

  • 使用uni-app开发微信小程序的实现

    前言 9月份,开始开发微信小程序,也曾调研过wepy/mpvue,考虑到后期跨端的需求,最终选择使用了uni-app,本文主要介绍如何使用uni-app搭建小程序项目,以及自己对框架的补充,包括封装request接口,引用color-ui,动态设置底部tab页等,详情见下文 uni-app 介绍(官网) uni-app是一个使用Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS.Android.H5.以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台. 即使不

  • uni-app 组件里面获取元素宽高的实现

    遇到的问题:直接在组件的mounted里面创建选择器,获取元素的宽高,即使扔到定时器里面执行,还是偶尔会有获取不到的情况 解决办法: // 写法一: getDescBox() { uni.createSelectorQuery().in(this).select('.top .desc').boundingClientRect(result => { if (result) { console.log('==========',result) }else { this.getDescBox();

  • 基于vue+uniapp直播项目实现uni-app仿抖音/陌陌直播室功能

    一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.App端) 且兼容效果一致. 二.效果预览 在H5.小程序.App端测试效果如下:(后续大图均为APP端) 三.使用技术 编码器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件:uniPop(un

  • uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • vue中uni-app 实现小程序登录注册功能

    思路: 1.使用微信的 open-type="getUserInfo" 获取用户信息,将用户信息保存到userinfoDetails对象中去. <button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button> 2.使用 u

  • uni-app实现点赞评论功能

    模拟朋友圈实时点赞及评论功能 点赞思路:点击的时候,使用push(点赞)以及slice(取消赞)方法处理数组,并且调用点赞接口 评论思路:点击的时候,写多一个评论列表,当点击发送的时候commentStatus=true,且索引等于点击的索引.同时调用获取评论列表的接口 html <view class="toolbar"> <view class="timestamp">{{item.timetype}}</view> <

  • uni-app微信小程序登录并使用vuex存储登录状态的思路详解

    微信小程序注册登录思路 (这是根据自身的项目的思路,不一定每个项目都适用) 1.制作授权登录框,引导用户点击按钮 2.uni.login获取code 3.把code传给后端接口,后端返回如下数据 openid: "ogtVM5RWdfadfasdfadfadV5s" status: 1 // 状态码:status==0(该用户未注册,需调用注册接口) status==1(该用户已注册) 4.判断用户是否注册,并调用用户信息接口 (1)若已注册则提示登录成功,并调用后台给的获取用户信息的

  • 微信小程序自定义tabBar在uni-app的适配详解

    引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供

随机推荐