HbuilderX is packaged into an apk Android installation package and installed on the phone

1. Project code packaging

Package the developed front-end code of the project into static resources such as html, css, js, etc. After packaging, the /dist folder will be automatically generated. No matter what environment the project is developed in, these static resources can be generated.

打包命令：yarnbuild

$[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-WfGRj3Eq-1685178085808) (E:\Typora\images\typora-user-images\image-20230522120043918.png)]$

2. Download HbuilderX

This sharing requires the use of a very important tool HbuilderX, which is a very useful front-end development tool exported by dcloud.io, with a built-in function of publishing as an app.

Official download link: https://www.dcloud.io/hbuilderx.html

3. Install HbuilderX

After downloading HbuilderX, it is a compressed package, which can be installed after decompression (the green version does not need to be installed, just copy it to the desired location).

insert image description here

3.1 Theme selection

insert image description here

4. Register an account and log in

To achieve cloud packaging, you must log in on the official website (you can register one at any time without an account)

At the same time, you need to log in on the HbuilderX software. Both sides must log in and keep the same user name.
This is a necessary step. You must register and log in to
insert image description here
the developer background
https://dev.dcloud.net.cn/pages/common/login

5. Start packing

1 Create a project

Create a project on the Hbuilder software, select the type: 5+App

You must write the project name and project path. It is best to write the project name in English, and it is best not to have Chinese in the project path. Create it after filling it out

$[External link image transfer failed, the source site may have an anti-leeching mechanism, it is recommended to save the image and upload it directly (img-p6EhYaGx-1685178085811) (E:\Typora\images\typora-user-images\image-20230522120446091.png)]$

2 Copy the project static files to the project just created by HbuildX

Copy the previously packaged dist directory static resources to the newly created 5+App project directory for packaging into app source files.
[Theme of HBuliderX here]
insert image description here
After copying ----------------------->

3 Configure packaging options [key]

Click the manifest.json file in the root directory of the project to package. The main configuration items are:

Basic configuration: application ID, application name, entry page
insert image description here

Icon configuration: upload a square .png image as the app icon, note that the format must be .png

insert image description here

Module configuration: There may be a problem with the "Address Book" permission, it is recommended to close the address book permission
insert image description here

4 Release and package as App

Find the "Issuance" menu -> "Native App-Cloud Packaging" -> Use Public Test Certificate -> Packaging -> Continue Packaging, and then wait for about 5 minutes, the packaging can be completed and
insert image description here
continue -------

5 Download the apk file to the mobile phone for installation

The packaging time may take a few minutes, so wait patiently. At the same time, the first cloud packaging may prompt you to download plug-ins or register a developer account, just follow the requirements.
insert image description here

After the packaging is complete, you can find the .apk installation package in the project directory. If it is not in the directory, you can download it locally through the download address.

insert image description here

This file can be transferred to the mobile phone through WeChat, USB data cable, etc., and then it can be installed and used.