As a front-end coder, we rarely need to package an APP by ourselves. Most of the time, we embed H5 pages into the webview of the native APP in the mode of mixed development on the basis of the existing APP. However, in my line of business, there is a need to package a shell APP.

Demand background

Android system is built into the large screen of our store. We hope that an application can be installed on the large screen to embed the existing business function pages.

Technology selection

Based on the above requirements, the technical solution chooses to adopt the mode of APP casing + embedded H5 page, so that only an APP installation package suitable for large screen is needed. After the solution is determined, the next thing to do is to find a suitable framework to develop the App installation package.

After comparing the mainstream cross-end frameworks in the industry, this paper makes a simple comparison and analysis on their characteristics and differences:

The framework	The Android client	packaging	System level API
Electron	Does not support	local	have
Cordova	support	Local package	have
Ionic	support	Local package	have
Weex	support	Local package	have
Hippy	support	Local package	have
Flutter	support	Local package	have
RN	support	Local package	have
uniapp	support	Local packaging, cloud packaging	have
PWA	Kind of native	No need to pack	Do not have

As you can see from the above survey, most cross-end frameworks support only local packaging. Local packing has several drawbacks:

• It is difficult to set up the local environment. The general procedure is as follows:

  • Install the Android Studio
  • Install the Android SDK and configure environment variables
  • Setting up the Android Emulator
  • Debugging An Android Device

• In multi-party maintenance, each person needs to set up a local environment, which costs a lot

When trying to set up the local environment, it took a day, encountered various environmental problems, and finally gave up. Cloud packaging eliminates many troubles of local packaging. To put it simply, cloud packaging means that developers do not need to build the environment locally, but use the environment built in the cloud to package and build the installation package. Wouldn’t it be perfect if developers just wrote the code and left the packaging to the cloud?

In summary, the framework naturally chose UniApp with cloud packaging capabilities. It allows us to complete the work of App packaging at a small cost and achieve the purpose of rapid development. As for PWA, its lack of system-level API capabilities makes it a no-go.

The project practice

Install the HBuilderX editor

Uniapp’s cloud packaging feature is integrated into the HBuilderX editor, so we need to install the HBuilderX editor first.

App Project construction

New APP Project

First, let’s create a new project through HBuilderX. Since we only need one APP shell, we can choose the default template.

Projects created using Vue scaffolding will also work, but you need to manually create manifest.json and pages.json files, and HBuilderX will automatically create the required configuration files when creating a new project. Therefore, it is recommended to create projects directly on HBuilderX.

The new project directory structure is as follows:

After the project is set up, the transformation work begins.

Native page transformation

In terms of requirements, there are two native pages: the home page and the WebView.

The home page only bears the function of opening the poster page. Webview is used to host H5 pages.

Home page: index. Vue

Therefore, we need to create two pages altogether. First, let’s change the home page index.vue:

The home page has only one interaction, which is to jump to the WebView page.

The webview page: the webview. Vue

Let’s create a new webView page, webView.vue:

Configure the H5 page link to the SRC property of the WebView component.

Native page routing configuration

Now that the page has been modified, let’s modify the route configuration pages.json:

A caveat: At first, instead of using the Custom mode, the WebView page chose to use the default navigation bar. However, there is a problem with the default navigation bar. The height of the default navigation bar is fixed at 44px, so it cannot be responsive. The large size of the device makes the navigation bar very small on the large screen, especially the back button, which is hard to hit when clicked. During this period, there was an attempt to use the custom navigation bar provided by UniApp, but it did not work on the WebView page. Finally, we chose custom mode to implement the navigation bar effect on the H5 page.

In addition, in addition to the native navigation bar problem, there is a very important experience problem for the client APP, which is the status bar at the top of the interface. How do I hide the status bar of my system? Uniapp official also gave a plan. Because we are a global hidden, so in the App. The vue onLaunch hook function, add a plus. The navigator. SetFullscreen (true), as follows:

<script>
	export default {
		onLaunch: function() {
			plus.navigator.setFullscreen(true)
		}
	}
</script>
Copy the code

After the route configuration is complete, you need to configure manifest.json for the application.

Application configuration

Basic configuration

Let’s start with the basic configuration:

The AppID here is assigned by DCloud when the application is created in the Developer center of UniApp. If it is a multi-person project, remember to enter the application and add project members.

App Icon Configuration

Enter the App icon configuration:

Project ICONS are stored in the static directory, otherwise the file will not be found.

Above, our project transformation and configuration work is completed, then start our packaging journey.

Cloud packaging

In the HBuilderX editor, go to Toolbars – Publishing – Native App- Cloud Packaging:

The following form pops up, select Android(APK package), define your own Android package name, choose to use the public test certificate, then select the official package, and finally click Ease of packaging, as shown below:

Once packaged, you should see the following output from the console:

If the package is completed, the local installation package will be generated in the /unpackage/release/apk/ folder of the local project. The old version of HBuilderX put the installation package in the cloud, and when it was finished, it gave you a location to download it, and there was a limit on how many times you could download it. After the v3 version is updated, it can be packaged locally, eliminating the trouble of limiting the number of downloads.

It should be noted that although uniapp’s cloud packaging greatly facilitates the generation of installation packages, the number of packaging times per account per day is limited because it is a public resource. The official of Uniapp does not recommend frequent packaging and debugging, and it is suggested that you should fully test locally before packaging when using.

If there are many people using cloud packaging in the same period of time, the console will display queue, just wait patiently.

The original H5 project was reformed

The H5 page embedded in the WebView must interact with the home page, such as the function of returning to the home page. Therefore, the H5 page needs to be reformed.

Because H5 pages are multiplexed, large screens need to be processed separately. Therefore, the terminal must be identified according to the userAgent first. Uniapp officially supports custom userAgent content and optional append mode, but it doesn’t work.

The configuration path is configured in the manifest.json source view.

Since customization is not possible, you can only obtain the default userAgent to determine the terminal. Fortunately, there is only one APP available at present.

The method to determine the terminal is as follows:

window.navigator.userAgent.indexOf('uni-app Html5Plus') > -1
Copy the code

To interact with native pages, you need to introduce uniApp’s SDK uni.webview.1.5.2.js:

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
Copy the code

In this case, the uniApp method is called. For example: Click the “Back to home” button to return to the Index poster page, you can use:

uni.redirectTo({
  url: '/pages/index/index'
})
Copy the code

So, the detailed steps of the project are all completed, so find an Android phone and try it out

Problems encountered

In the process of building the whole project, there are not many pits. The problems of navigation bar, status bar and userAgent have been introduced before and will not be repeated here. Next, the main problems encountered in packaging:

1. The runtime environment version is inconsistent with the compiler version

This problem is caused by the addition of verification mechanism for uni-App runtime environment version and compiler version. The official documentation describes the inconsistency between uni-App runtime environment version and compiler version in detail. Please refer to the documentation for details.

2. If the code uses SCSS/SASS and HBuilderX does not have the plug-in installed, the pre-compilation phase will prompt:

Click the console prompt link to jump to the specified page, install the plug-in as prompted, and then recompile and package.

3. Permission to intercept

If the preceding message is displayed during the package process, check whether a permission is selected in the App permission configuration in manifest.json, but the system does not allow the permission. If the permission is not necessary, deselecte it and package the App again.

conclusion

Some students may ask, in line with the principle of professional people doing professional things, shouldn’t the work of the native App be entrusted to the students on the client side? Here, the reason why the front end students to do this work, there are three reasons:

1. At that time, the installation package was in urgent need, the store was about to open, and the client students’ resources were limited, so the schedule was relatively late
2. The client of our company belongs to the department of business support, and almost all the requirements of the business line are realized by H5, so it is doomed that the client cannot keep track of the iteration version update. Therefore, it would be best if the front end student could be responsible for the development of this installation package.
3. Having the most suitable framework to do the technical support, may let us easily complete, took the job for granted.

Based on the above reasons, it is not a whim of the author to blindly do the client, is to do full consideration, I hope you can remain calm when dealing with the need to open up the field or a new framework, carefully.

The last

At present, this APP has been used on the large screen of our company-owned stores for nearly one year, and we have a good experience. Welcome to visit and experience the store. As of this press, partners in Beijing, Qingdao and Zhengzhou can go to local shopping malls for reference. Stores will be opened in many cities this year, looking forward to your attention. Specific address can through baidu or public comment on search keywords, walk Up | mobile phone recycling 】 【 above have specific address.

Thank you for reading. If you have any questions, please leave them in the comments section and learn from each other.