How to realize incremental update function in uni app

Time:2020-11-29

As we all know, many apps have the function of incremental update. At the beginning of this year, uni app launched the function of incremental update. Today we will learn a wave. Of course, in order to prevent developers from providing illegal content to users without market approval, many application markets, especially apple, are averse to incremental updates. Therefore, for apps with incremental updates, we need to pay attention to the following points:

1. Do not pop up the incremental update prompt during the launch audit

2. The incremental update content is downloaded using HTTPS to avoid being hijacked by the three-party network

3. Do not update illegal content, do not undermine the interests of the application market through incremental updates, such as IOS virtual payment to Apple Commission

What can you learn from this chapter?

1. How to realize the incremental update function 2. How to make the incremental update package for uni app? 3. What should be paid attention to in the incremental update function of uni app. 4. Learning some related API of uni app

Don’t say much, go straight to dry goods!

How to realize incremental update function

This is not for uni app development, it should be for all incremental updates (but the code takes uni app as an example).

1. The app side calls the server interface first to determine whether it needs to be updated

2. Need to update, download the update package directly

3. Install the upgrade package and restart the app to complete the upgrade

OK, let’s take uni app as an example to see the specific implementation of the code

Client implementationIn the root directory App.vue The upgrade is detected in onlaunch. The code is as follows:

// #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) {
               //The errors here are very important. It is best to record them in the server log, so as to facilitate debugging or later maintenance, understand the update error situation and solve it in time
               //How to update to the server?
               //Call an interface to return E
               console.error('install fail...'); 
              }); 
            } 
          } 
        }); 
      } 
    } 
  }); 
}); 
// #endif

Code analysis: 1. Use ifdef app-plus to determine if it is the app side, and then check whether it needs to be updated

2、 plus.runtime.getProperty Obtain the application information corresponding to the specified appid

plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {
 //Appid property
 var wgtStr = "appid:"+wgtinfo.appid;
 //Version property
 wgtStr += "<br/>version:"+wgtinfo.version;
 //Name attribute
 wgtStr += "<br/>name:"+wgtinfo.name;
 //Description property
 wgtStr += "<br/>description:"+wgtinfo.description;
 //Attribute author
 wgtStr += "<br/>author:"+wgtinfo.author;
 //Email property
 wgtStr += "<br/>email:"+wgtinfo.email;
 //Properties of features
 wgtStr += "<br/>features:"+wgtinfo.features;
 console.log( wgtStr );
} );

3、 uni.request Call the server interface and pass in the current version. The server returns whether the update needs to be updated or not. When the update is needed, it returns wgturl to update the upgrade package path.

4、 uni.downloadFile Download the file resources to the local, the client directly initiates an HTTP get request, and returns the local temporary path tempfilepath of the file. How can we monitor the download progress

var downloadTask = uni.downloadFile({
  url: 'https://www.javanx.cn/file/uni-app.rar',
  complete: ()=> {}
});
downloadTask.onProgressUpdate(function(res)=>{
 console.log ('download progress'+ res.progress );
 console.log ('downloaded data length'+ res.totalBytesWritten );
 console.log ('total length of data expected to be downloaded'+ res.totalBytesExpectedToWrite );
})

The downloadtask object also provides the following methods: (1) abort the download task

(2) , onheadersreceived ‘listens to HTTP response header events earlier than request completion events. Only supported by wechat applet platform

(3) , offprogressupdate cancels monitoring download progress change events, only supported by wechat applet platform

(4) , offheadersreceived cancels listening for HTTP response header events, which is only supported by wechat applet platform

5、 plus.runtime.install (filePath, options, installSuccessCB, installErrorCB)。 The following types of packages are supported:

(1) , application resource installation package (WGT), with extension ‘. WGT’;

(2) , application resource difference upgrade package (wgtu), with extension ‘. Wgtu’;

(3) The system program installation package (APK) is required to use the installation package format supported by the current platform. Note: only local address is supported. Before calling this method, the installation package should be placed from the network address or other location to the local directory accessible by the runtime environment.

Server implementationTake nodejs as an example

var express = require('express'); 
var router = express.Router(); 
var db = require('./db'); 

//Todo queries the configuration file or database information to confirm if there is an update 
function checkUpdate(params, callback) { 
  db.query ('a SQL ', function (error, result){ 
    //Here is a simple judgment, not equal is to have update. 
    var currentVersions = params.appVersion.split('.'); 
    var resultVersions = result.appVersion.split('.'); 

    if (currentVersions[0] < resultVersions[0]) { 
      //There is a big version update 
      callback({ 
        update: true, 
        wgtUrl: '', 
        pkgUrl:  result.pkgUrl  //Apk, IPA package downloadable address
      }) 
    } else if (currentVersions[currentVersions.length-1] < resultVersions[resultVersions.length-1]) {
     //Think it's a small version update 
      callback({ 
        update: true, 
        wgtUrl:  result.wgtUrl , // WGT package downloadable address
        pkgUrl: '' 
      }) 
    } else { 
      //Other conditions are not updated
      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, with the above functions, we will use hbuilderx to make the upgrade package. WGT, and put it on the server to upgrade.

How to make incremental update upgrade package for uni app

1. Update manifest.json Version number in. If the version number of the previous version is 1.0.0, it can be 1.0.1 when you type the upgrade package. Anyway, if it is not larger than the previous version, you can see that the server interface is implemented, which is judged by the version number.

2. Menu > release > native app – make mobile app resource upgrade package

3. Wait for the console to generate the output location of the upgrade package

4. Upload the upgrade package to the server, implement the interface and return: wgturl = upgrade package just launched

In this way, our app has the function of incremental update. Each time if it is a small amount of updates, you can use the WGT package to achieve incremental updates.

Let’s take a look at the problems that need to be paid attention to when the uni app is updated incrementally?

What should I pay attention to for the incremental update function of uni app

1. There are adjustments to the SDK, such as the addition of maps module, which cannot be upgraded in this way, but must be upgraded in the whole package.

2. If it is the old non custom component compilation mode, there is no nvue file before, but the nvue file is added in the update, so this method cannot be used. Because if there is no nvue file in the non custom component compilation mode, the weex engine will not be packaged, and the native engine cannot be added dynamically. The custom component mode contains the weex engine by default, regardless of whether there are nvue files under the project.

3. This method can not be used in addition and modification of native plug-ins.

4. Ifdef app-plus conditional compilation, only execute this upgrade logic on app platform.

5. Appid and version information are the information of hbuilder during the development of hbuilder x, so it is necessary to package a custom base or a formal package to test the upgrade function.

6、 plus.runtime.version Or uni.getSystemInfo () read the version number of APK / IPA package instead of manifest.json The version information in the resource is used here plus.runtime.getProperty () to obtain relevant information.

7. After installing the WGT resource pack successfully, you must execute the plus.runtime.restart (), otherwise the new content will not take effect.

8. If the native engine of the app is not upgraded, it is necessary to test the compatibility of WGT resources and native base when upgrading only the WGT package. The platform will remind the unmatched versions by default. If the self-test is OK, you can configure the ignore prompt in the manifest

summary

What did you learn today? Have you learned the incremental update of uni app?

The above is the whole content of this article, I hope to help you in your study, and I hope you can support developeppaer more.