Record a uniapp to realize automatic APP upgrade

describe

App version management and upgrade is an indispensable function, and uniapp provides a whole set of processes. Since the official document is too complicated and written in a cloud, I personally record my operation until The configuration was successful.

overall

It is divided into 2 parts. The two official plug-ins ( uni-upgrade-center - Adminand uni-upgrade-center - App) are used together. This article adopts the simplest and rude way to achieve.

front end settings

1 Install the front-end plugin

Plugin uni-upgrade-center - App , import the plugin into your project.
insert image description here

2 Add path

In pages.jsonthe file, add an update page (officially provided)

{
    
    
	"path": "uni_modules/uni-upgrade-center-app/pages/upgrade-popup",
	"style": {
    
    
		"disableScroll": true,
		"app-plus": {
    
    
			"backgroundColorTop": "transparent",
			"background": "transparent",
			"titleNView": false,
			"scrollIndicator": false,
			"popGesture": "none",
			"animationType": "fade-in",
			"animationDuration": 200
		}
	}
}

3 Add update code

Put the updated code where you want to display it

import checkUpdate from '@/uni_modules/uni-upgrade-center-app/utils/check-update.js'

For example, I wrote in App.vueit that it detects as soon as the project is opened
insert image description here

backend settings

I personally suggest not to use the back-end uni-upgrade-center - Admin, just create a new project and use the uni-adminbuilt-in upgrade center, because there will be statistics in the follow-up, and uni-admin will be used, so it is easier for us to use this directly

insert image description here
step

Create a new uni-admin project
Use the new cloud development space, not shared with the app
Upload directly to cloud hosting when publishing

There is basically no change in the uni-admin project, it can be used directly after downloading and uploading
insert image description here

The back-end project is built, enter the background, and add your APP
insert image description here

Notice

1 Cloud function adjustment (required)

Because the front and back end are two projects, we need to modify the updated cloud function and point the service space to uni-admin to call the update cloud function, and the parameters can be seen in the service space

const myCloud = uniCloud.init({
    
    
  provider: 'aliyun',
  spaceId: 'mp-xxxxxxxxxxxxxxxxxxx',
  clientSecret: 'xxxxxxxxx'
});
myCloud.callFunction({
    
    
	name: 'uni-upgrade-center',
	data,
	success: (e) => {
    
    
		console.log("e: ", e);
		resolve(e)
	},
	fail: (error) => {
    
    
		reject(error)
	}
})

insert image description here

2 Publish wgt package problem

manifest.jsonPlease be sure to modify the version name in to a higher version before packaging
insert image description here

3 Release a new version

You can publish it directly in the admin background, and you can check it on the app side
insert image description here

4 How to test

You must package the apk and install it on your mobile phone. I couldn’t check it using the web side before, and I couldn’t check it using the hbuild base APP.

insert image description here