I spent a month using UNI-App from learning to launching a mobile H5 with 40+ pages, which looks like a native app after being packaged. The feedback from the online application is quite good, although there are some small problems, the overall effect is beyond my expectation. Uni-app has excellent functions and is easy to use, so I highly recommend it.

Due to the need to be made into an APP, and the launched APP needs to be updated frequently, WE finally chose to use THE H5 method for development. The APP is packaged into the base and launched. The overall effect is smooth in practice, which is comparable to the original APP under Android. The following records the ideas, methods and matters needing attention of packaging online:

The instructions

  • What it does: Package H5 pages as Android and IOS” apps”

  • Scope of application: Rapid iteration application features change frequently, only Web development without APP developers

  • Restrictions: Apps can only be distributed offline and not in the APP store

H5 page development

The development mode is the same as the ordinary mobile terminal H5 page, and the old resources can be replaced directly when published. Here are some things to note:

Read official documents

  • Basically, you can find all the problems

CSS unit

  • Unified withrpxjust

Page switching animation

See component market page- Animation

Map/Location

  • Tencent map is used by default for H5, so it is necessary to pay attention to the coordinate system for positioning. Different coordinate systems need to be converted before, such as GPS coordinates/national Survey bureau coordinates/Baidu coordinates, etc

  • Page evokes APP navigation, preferably directly using the AppSchema protocol, such as opening Autonavi Location

let url = ' '
if(isIOS) {
    url = 'iosamap://viewMap? sourceApplication=applicationName&poiname='+this.addr+'&lat='+this.lat+'&lon='+this.lng+'&dev=1'
} else {
    url = 'androidamap://viewMap? sourceApplication=applicationName&poiname='+this.addr+'&lat='+this.lat+'&lon='+this.lng+'&dev=1'
}
window.location.href = url
Copy the code
  • mapThe component’s attributes are not automatically updated and a new object is assigned when updated
const data = [...]
this.markers = JSON.parse(JSON.stringify(data))
Copy the code

Android shell (APP dock) development

The main principle is to embed a Webview in the APP, so that updating the webpage does not need to download the APP again. There are points that need to be paid attention to:

  • The WebView sets the height after rendering

  • Web pages may be cached, need to configure the background cache policy or directly add a timestamp after the url, opened url can also be controlled by the background back

  • You need to listen for the back button, otherwise the APP will exit when you step back

  • Need to close the manifest. Json APP start page configuration “start” in the interface options (wait till after the home page rendering close Splash figure 】 and the startup screen shows (that) wait for the snow, and called after the webview rendering. Plus the navigator. CloseSplashscreen closed manually Closed chrysanthemum, otherwise will wait 10 seconds to enter the page, see resources for details

  • Dock apps usually don’t need to be updated, so be sure to distinguish between the WGET version and the APP version

Embedding the Webview

<template>
    <view>
        <! -- Can be added according to your APP situation -->
		<view class="status-bar"></view>
        <! -- Webview container -->
        <web-view :webview-styles="webviewStyles" :src="src" />
    </view>
</template>

<script>
	var webview
	export default {
        data() {
            return {
                // You can add a timestamp as needed
				src: "https://xxx.com.cn?_t=" + (new Date().getTime()),
                webviewStyles:}}, {},onReady:function() {
            // Get the current web-view
			var currentWebview = this.$scope.$getAppWebview();
			uni.getSystemInfo({
				success: (sysinfo) = > {
                    // Page initialization is delayed in case the WebView is not rendered yet
					var interval = setInterval(() = > {
						webview = currentWebview.children()[0];
						if(! webview)return
                        // Display the Webview in full screen
						webview.setStyle({ top: sysinfo.statusBarHeight, bottom: 0 })
                        // Turn off the boot load chrysanthemum
						setTimeout(function() { plus.navigator.closeSplashscreen() }, 600);
                        // Initialization cleared successfully
						clearInterval(interval)
					}, 100);
				},
				complete: () = >{}}); },onBackPress: function(options){
            // Monitor the phone back button/gesture, so that back is back to the page instead of quitting the APP
			webview.canBack(function(e){
				if(! e.canBack) {return plus.runtime.quit();
				}
				webview.back();
			})
			return true}}</script>

<style>
	.status-bar {
      height: var(--status-bar-height);
      width: 100%;
	}
</style>
Copy the code

Update the APP

This refers to the situation where the base APP needs to be updated. APP update can be divided into full update and hot update.

  • Obtain version information and request to update resources in the background based on the version information
// Get the WGT resource version, that is, the version configured for 'manifest.json'
plus.runtime.getProperty(plus.runtime.appid, async function(widgetInfo) {
    widgetInfo.version,
    widgetInfo.versionCode,
})

// Obtain the App version, which is the same as the WGT resource version if no increment package is added
plus.runtime.version,
plus.runtime.versionCode,
Copy the code
  • Full update, directly open the mobile browser download, the most convenient, but the experience is not good.
let url = 'Background returned.apk'
// Open the mobile browser
plus.runtime.openURL(url)
Copy the code
  • Full update, download in APP, can monitor the download progress and draw beautiful UI.

If the update information is obtained asynchronously, the DRAWING UI of APP cannot be placed on the top layer and will be covered by webView components. You can use subNVues to draw the native UI and transfer the download information through event communication

let url = 'Background returned.apk'
// Download resources
var dtask = plus.downloader.createDownload(url, {}, function(d, status) {
    if (status == 200) { // Download succeeded
        var path = d.filename; // The file is downloaded to the location of the phone
        plus.runtime.install(path); // Install the file
    } else {
        uni.showToast({ icon: 'none'.title: 'Download failed'.duration: 1000 });
        plus.downloader.clear(); // Clear the download task}})// Add the download progress monitor
dtask.addEventListener("statechanged", ( download, status ) {
    / / schedule...
}, false);

// Start the download task
dtask.start();
Copy the code
  • Hot update

Hot update does not require users to download a new package. Instead, users only need to download incremental packages and install them. The incremental packages are small in size and have no impact on users.

PS: Incremental updates can be cross-release updates or multi-iteration updates, meaning that incremental packages are based on the first full package! As for how to specify the incremental package from the full version of the play is not clear, the official website seems to be related to the version number, for this understanding can exchange!

let url = 'Background returned.wget'
// Download it directly
uni.downloadFile({ url, success: (downloadResult) = > {  
    if (downloadResult.statusCode === 200) { 
        // Install download resources
        plus.runtime.install(downloadResult.tempFilePath, {force: false}, function() {
            // The update takes effect after being restarted
            plus.runtime.restart();  
        }, function(e) {  
            uni.showToast({ icon: 'none'.title: 'Resource update failed'.duration: 1000}); }); }}});Copy the code

packaging

Use the native APP cloud to pack directly

IOS shell

You can’t use an IOS APP case unless you have a jailbreak package, but there is a WebClip, which is similar to a shortcut, that allows you to make a web address into an IOS desktop icon, which of course cannot be put into the Apple Store. You can scan the code and install it, which looks like an APP.

You can download the Apple Configurator 2 software on your Mac and complete the configuration step by step. You can search for detailed tutorials online.

The resources

Full quantity update

Hot update

Within the APP to download

SubNVue Original child form

Uni – app start interface parameter configuration instructions | the cause of the slow start

IOS WEBCLIP generates, uses, signs, and publishes summaries