Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use Hbuilder to package WebApp", the content of the article is simple and clear, easy to learn and understand, now please follow the editor's ideas slowly in depth, together to study and learn "how to use Hbuilder to package WebApp" bar!

There are two kinds of packaging provided by HBuilder: cloud packaging and local packaging. Cloud packaging is characterized by the official configuration of the native packaging environment of DCloud, which can compile files such as HTML into native installation packages.

1. Download HBuilder, register and log in. First, open "File"-"New"-"Mobile APP", enter "Application name", "location" can be selected according to your needs, "Select template" is recommended to select an empty template

2. After the new project is completed, the newly created project directory will be displayed in the project manager, in which the files css,img,js and index.html can be deleted, modified or replaced.

The unpackage folder is a picture of placing the app icon and launching the interface.

Manifest.json file is the configuration file of mobile App, which is used to specify the display name, icon, application entry file address and device permissions of the application. Users can configure the information of mobile App through the visual interface view or source code view of HBuilder.

3. If you delete the css,img,js folder and the index.html file, copy the other project files to the folder, and note that the reference path in the html file needs to be kept correct.

The items copied by yourself are as follows:

4. After the file is copied, refresh and update, double-click to open the manifest.json file to configure App.

Appid: click on the cloud to get. Version number: edit as needed. Page entry: the default is index.html. Change the startup page of APP according to your project needs. Application description: fill in casually. Whether the application is full-screen display: full-screen display on the tick.

5, icon configuration: click the icon at the bottom of the page to configure the APP display icon.

1) Click the square box of the "+" sign, select the path of the icon material to find the icon material, and then click the "automatically generate all icons and replace" button to complete the icon generation and replacement.

2), the generated icon is automatically placed under the unpackage folder

6. Start splash configuration, and click to switch to Startup Picture configuration.

1), startup option: default

2) start the image setting, and then make the startup image according to the Android or iOS platform according to your needs, and then make the startup image according to the corresponding device.

3) create a new file named "splash" under the unpackage → res file, and put the boot image into this file.

4) Click "Select" in the startup image settings to find the startup image that you just put in

7Jing SDK configuration: configure if necessary, or default if there is no need.

8, module permission configuration: configure if necessary, or default if not.

9, page reference relationship:

First click "scan Code", and then click the index.html file on the left

Click on the left side of the html file, the right side will show different files, pictures and so on. You can represent the resources required when the html file on the left is loaded.

10, code view: check whether the settings are correct in code view, and save the ctrl+s after making sure.

11. Set the configuration options and officially enter the packaging phase

HBuilder interior point: "release"-"release as a native installation package" starts to package

Here's an introduction to iOS packaging.

1) here, if you choose a prison break bag, you don't need an Apple certificate, and you can pack it successfully by default, but the packaged App can only be installed on a phone that has been jailbroken, and cannot be installed without jailbreak.

2) if you use an Apple certificate, Appuploader, a tool for applying for an iOS certificate, is recommended. Free of charge from Apple's developer account, you can use ordinary Apple id directly to apply for an ios test certificate using Appuploader, package ipa and install it to non-jailbreak devices.

The installation website of the tool is http://www.applicationloader.net/blog/zh/72.html

Free developer account to apply for iOS certificate tutorial: http://www.applicationloader.net/blog/zh/1073.html

12. Click OK after the submission is successful to view the App packaging status

When the package is successful, you can download it manually and install it on ipad through a third-party tool, Apple Assistant.

13, debugging and installing the simulator

If you need to debug locally on your computer, you need to install a simulator. Please refer to http://ask.dcloud.net.cn/article/151 how to install and configure mobile phone simulator, or how to install and configure mobile phone simulator in HBuilder, or how to run →→ and run →→ in HBuilder.

If you need to install the phone for real debugging, connect the phone to the computer with a data cable, then restart HBuilder →→, run →→ phone, run →→ to connect to the real machine.

Thank you for reading, the above is the content of "how to use Hbuilder to package WebApp", after the study of this article, I believe you have a deeper understanding of how to use Hbuilder to package WebApp, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.