This is the 18th day of my participation in the First Challenge 2022

Author: Nuts

Public account: “Big Front End Tour”

Huawei Cloud sharing expert, InfoQ contract writer, Ali Cloud expert blogger, 51CTO blog chief Experience officer, one of the open source project GVA, focusing on the sharing of big front-end technologies, including Flutter, applets, Android, VUE, JavaScript.

An overview of the

Package as a native App and release as H5

1. Package as a native App

From the HBuilderX toolbar, click Publish and select Native App-Cloud Package as shown below:

The following interface appears, click Pack.

If the following error occurs

Please log on to the website below

Ask.dcloud.net.cn/account/set…

Your account has not been authenticated yet. Please bind your mobile phone number to complete the authentication

At this point the validation is complete and the package is repackaged

Waiting can

When packaging App, note that if third-party SDKS are involved, you need to apply for and configure them in manifest.json; otherwise, related functions cannot be used.

IOS App packaging requires a certificate from Apple.

Packaging success

2. Release it as H5

1. Inmanifest.jsonVisual interface,

The following configuration (issued in the web root directory is not configured application base path), the release site path is www.xxx.com/h5, such as: hellouniapp.dcloud.net.cn.

2. In the HBuilderX toolbar, click Publish,

Select the website -H5 mobile version, as shown in the picture below. Click to generate H5 related resource files and save them in unpackage directory.

Pay attention to

  • historyMode release requires background configuration support, see:Back-end configuration for history mode
  • After a packaged deployment, you can enable gzip on the server to further compress the files. For detailed configuration, please refer to the online share: juejin. Im /post/ 5AF003…

3. Publish as applets

Published as wechat applets:

1. Apply for wechat mini program AppID,

Reference: Wechat tutorial.

2. Click “Publish” in the top menu of HBuilderX => “small program – wechat”,

Enter the applet name and appID and click publish

unpackage/dist/build/mp-weixin
Copy the code

Generate wechat applets project code.

3. Upload

In the micro channel small program developer tools, import the generated micro channel small program project, test the normal operation of the project code, click the “upload” button, and then according to the “submit for review” => “publish” small program standard process, step by step operation can be viewed in detail: micro channel official tutorial.

3.Published as baidu small program:

1. Enter small program and apply for Baidu small program AppID.

Reference: Baidu small program tutorial.

2. Click “Publish” in the top menu of HBuilderX => “small program – Baidu”,

Enter the applet name and appID and click publish

/unpackage/dist/build/mp-baidu
Copy the code

Generate Baidu small program project code.

3. Upload

In The Baidu small program developer tool, import the generated Baidu small program project, test the normal operation of the project code, click the “upload” button to upload the code, then select the created application in the Management center of Baidu small program, click to publish, select the corresponding version and submit for review.

Pay attention to

  • Currently, it is supported only on Windows. The 360 browser itself does not support MAC platforms.

Publish for other platform applets: same content as above, do not repeat.

The shortcut for publishing is Ctrl+ U. Also pull down the quick release menu and press the number key to select.