What is HTML5Plus mobile application? HTML5 Plus mobile App, referred to as 5+App, is an App written based on HTML, JS, and CSS that runs on the mobile phone. This App can call the native capabilities of the mobile phone at will through the extended JS API. , achieving the same powerful functions and performance as the native App.
A simple sentence is to use Web development technology to complete the development of native mobile applications.
5+App and Mobile Web
Although the related technologies used in 5+App and mobile Web development are generally the same, the difference between the two is still obvious.
5+App is C/S, and Web is B/S.
5+App is an independent client, and application resources can usually only be static files. Server templates such as PHP and JSP do not have parsers to process them.
5+App is packaged into a package with apk and ipa suffixes, which is a native mobile application.
window.plus Extended API, relying on 5+Runtime engine. Ordinary browsers do not integrate this engine, and web development usually cannot use these APIs.
Preparation
Development Tools
HBuilder has a built-in development environment for 5+Apps, so you need to download this IDE first.
Register an account
After downloading and unzipping HBuilder, start the IDE. When using it for the first time, you need to register an account to facilitate subsequent management of the application and activities in the community.
Device
Since there are no iOS devices or Mac OS machines, this series of sharing uses the development of Android applications under Windows systems as an example.
A computer and a mobile phone. The mobile phone is preferably Android 4.4 and above, and emulators are not recommended. A USB cable is also required, and of course HBuilder also supports WiFi debugging.
First 5+App
New application
Start HBuilder and log in.
Menu-> File-> New-> Mobile App
The template does not need to be adjusted for the time being. Enter the application name "HelloWorld" , click to finish.
index.html
The entry page of the application is similar in concept to the entry page of the Web. The default is index.html in the application root directory, this can be adjusted.
manifest.json
5+App configuration file, used to configure application information. HBuilder performs special processing on this file and provides a visual editing interface.
Real machine operation
Connect your phone to the computer, HBuilder will automatically detect the device connected to the computer. Menu -> Run -> Run on a real device, just select your device. A debugging base HBuilder will be installed for the first time. If the HBuilder IDE version changes, the real machine operation will overwrite the old version of the HBuilder base.
Debugging
#The style of the page, it is recommended to use the Chrome browser mobile mode of the computer for debugging.
When Android is running on a real machine, every time the file is modified and saved, the base on the mobile phone will synchronize the code.
Android can still use Chrome RemoteDebugging for debugging, but it requires an Android 4.4 or above device and needs to circumvent the firewall for the first time.
Call 5+API
Simply encapsulate the event callback of the extended API loading completion
var plusReady = function(callback) {
if(window.plus) {
callback();
} else {
document.addEventListener('plusready', callback);
}
};Copy after login
Then, read the network type of the current device connection and output it to on the page.
plusReady(function() {
var netType = plus.networkinfo.getCurrentType();
document.write('当前网络类型为：' + netType);
});Copy after login
When running on a real machine, you can see the content on the page "The current network type is: 3", which is the WiFi network environment.
Packaging
Confirm that the information in manifest.json is correct
If the logo and splash image are not configured, the default will be used HBuilder related pictures.
Menu-> Release-> Cloud Packaging-Build the native installation package
Check Android. The Android certificate is relatively casual. It’s the same whether you use the ready-made one provided by DCloud or you generate it yourself.
Package names must strictly follow the format specifications of Android package names, and do not write them randomly. Adjust it here and change it to com.helo.html5plus.
If there is an error in the configuration information, there will be a prompt and you must modify it correctly before you can continue.
After everything is correct, click "Package" and wait.
After the packaging is completed, it will be automatically downloaded to the corresponding directory.
Installation
Install the apk downloaded from the cloud package on your phone, and start the application to view the current network status information. Then, our first 5+App was successfully produced.
Related recommendations:
HTML5Plus mobile development introductory learning
HTML5plus mobile application development example sharing
HTML5 imitation WeChat chat interface and friend circle code
The above is the detailed content of Share an HTML5Plus mobile application. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
