search
HomeWeb Front-endHTML TutorialUse Hbuilder to package WebApp

Use Hbuilder to package WebApp

Jul 16, 2019 pm 06:01 PM
apphbuilderweb

HBuilder is a web development IDE launched by DCloud (Digital Paradise) that supports HTML5. This software can not only support web code writing, but also package the already written project code into a mobile APP.

HBuilder provides two types of packaging: cloud packaging and local packaging. The characteristic of cloud packaging is that DCloud has officially configured a native packaging environment and can compile HTML and other files into native installation packages.

1. Download HBuilder, register and log in. First open "File" - "New" - "Mobile APP", enter the "Application Name", and the "Location" can be selected according to your needs. "Select Template" recommends choosing an empty template;

Use Hbuilder to package WebApp

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

The unpackage folder is where the app icon and startup interface pictures are placed.

The manifest.json file is the configuration file of the mobile App. It is used to specify the display name, icon, application entry file address, required device permissions and other information. Users can use HBuilder's visual interface view or source code. View to configure the mobile App information.


Use Hbuilder to package WebApp

##3, if the css is deleted, img , js folder and index.html file, copy other project files to the folder accordingly. Note that the reference path in the html file needs to be kept correct.

The project you copied as shown below:

Use Hbuilder to package WebApp

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


appid: Click on the cloud to get it. Version number: Edit as needed. Page entry: The default is index.html. Change the APP startup page according to your project needs. Application description: Fill it out yourself. Whether the application is displayed in full screen: Check it to display in full screen.

Use Hbuilder to package WebApp

##5, icon configuration: click at the bottom of the page Icon configuration, configure the APP display icon. 1) Click the square box with " ", 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 icon generation and replacement.

Use Hbuilder to package WebApp

2), the generated icon is automatically in the unpackage folder

Use Hbuilder to package WebApp

6, start the image (splash) configuration, click to switch to the startup image configuration1), startup options: default

2), startup image settings, according to your needs whether it is an Android or iOS platform, and then make a startup image according to different devices


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

Use Hbuilder to package WebApp4), click "Select" in the startup image settings and find the startup image you just put in

Use Hbuilder to package WebApp

7, SDK configuration: Configure if necessary, if not, just default.

#8. Module permission configuration: Configure if necessary, otherwise just default.

9, page reference relationship: First click "Scan Code", then click on the index.html file on the left

What does this function mean: click on the html file on the left, and different files, pictures, etc. will be displayed on the right. It can represent the resources required when loading the html file on the left.


Use Hbuilder to package WebApp

#10. Code view: Check whether the settings are correct in the code view. After confirmation, press ctrl s to save it. .

#11, set the configuration options and officially enter the packaging stage

HBuilder click: "Release"-" Release as a native installation package "Start packaging

Use Hbuilder to package WebApp

Here is an introduction to iOS packaging

1). If you choose a jailbreak package here, you do not need an Apple certificate. The default is all the way. The package can be successfully packaged after setting, but the packaged App can only be installed on jailbroken phones, and cannot be installed without jailbreak.

2), if you use Apple certificate, here is a tool to apply for iOS certificate Appuploader. Without an Apple paid developer account, you can directly use an ordinary Apple ID to apply for an iOS test certificate using Appuploader, package the ipa and install it on a non-jailbroken device.

Tool installation URL: http://www.applicationloader.net/blog/zh/72.html

Tutorial on applying for an iOS certificate without a developer account: http://www.applicationloader .net/blog/zh/1073.html

12. After successful submission, click OK to view the App packaging status

Use Hbuilder to package WebApp

After the packaging is successful, you can click manual download and install it on the iPad through the third-party tool Apple Assistant.

Use Hbuilder to package WebApp

13. Debugging and installing the simulator

If you need to debug locally on the computer You need to install the simulator, please refer to http://ask.dcloud.net.cn/article/151 How to install and configure the mobile phone simulator, or in HBuilder→→Run→→Mobile phone run→→How to install and configure the mobile phone simulator to enter Check.

If you need to install it on a mobile phone for real-machine debugging, connect the mobile phone to the computer with a data cable, then restart HBuilder→→Run→→Run the mobile phone→→Connect to the real machine.

The above is the detailed content of Use Hbuilder to package WebApp. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Are the HTML tags and elements the same thing?Are the HTML tags and elements the same thing?Apr 28, 2025 pm 05:44 PM

The article explains that HTML tags are syntax markers used to define elements, while elements are complete units including tags and content. They work together to structure webpages.Character count: 159

What is the significance of <head> and <body> tag in HTML?What is the significance of <head> and <body> tag in HTML?Apr 28, 2025 pm 05:43 PM

The article discusses the roles of <head> and <body> tags in HTML, their impact on user experience, and SEO implications. Proper structuring enhances website functionality and search engine optimization.

What is the difference between <strong>, <b> tags and <em>, <i> tags?What is the difference between <strong>, <b> tags and <em>, <i> tags?Apr 28, 2025 pm 05:42 PM

The article discusses the differences between HTML tags , , , and , focusing on their semantic vs. presentational uses and their impact on SEO and accessibility.

Please explain how to indicate the character set being used by a document in HTML?Please explain how to indicate the character set being used by a document in HTML?Apr 28, 2025 pm 05:41 PM

Article discusses specifying character encoding in HTML, focusing on UTF-8. Main issue: ensuring correct display of text, preventing garbled characters, and enhancing SEO and accessibility.

What are the various formatting tags in HTML?What are the various formatting tags in HTML?Apr 28, 2025 pm 05:39 PM

The article discusses various HTML formatting tags used for structuring and styling web content, emphasizing their effects on text appearance and the importance of semantic tags for accessibility and SEO.

What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?What is the difference between the 'id' attribute and the 'class' attribute of HTML elements?Apr 28, 2025 pm 05:39 PM

The article discusses the differences between HTML's 'id' and 'class' attributes, focusing on their uniqueness, purpose, CSS syntax, and specificity. It explains how their use impacts webpage styling and functionality, and provides best practices for

What is the 'class' attribute in HTML?What is the 'class' attribute in HTML?Apr 28, 2025 pm 05:37 PM

The article explains the HTML 'class' attribute's role in grouping elements for styling and JavaScript manipulation, contrasting it with the unique 'id' attribute.

What are different types of lists in HTML?What are different types of lists in HTML?Apr 28, 2025 pm 05:36 PM

Article discusses HTML list types: ordered (<ol>), unordered (<ul>), and description (<dl>). Focuses on creating and styling lists to enhance website design.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

SecLists

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.