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.
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.
HBuilder has a built-in development environment for 5+Apps, so you need to download this IDE first.
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.
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.
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.
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.
5+App configuration file, used to configure application information. HBuilder performs special processing on this file and provides a visual editing interface.
Application information
Application name: This is the name of your application displayed on the mobile phone desktop.
appid: This is assigned when 5+App is created, do not modify it. Don’t be confused with the AppID of iOS or the appid on other third-party platforms.
Version number: Application version number
Page entry: It is the page on the homepage, which can be modified.
Application description: Briefly describe the application information
Icon configuration
is the application logo. Follow the prompts to make a picture that meets the specifications, and then generate a replacement with one click.
Startup picture
The splash picture is the placeholder picture when the application starts. QQ is a penguin. WeChat is that moon.
Startup options: usually just use the default, adjust as needed.
Image settings: Make a png image of the corresponding size as needed and select the configuration.
SDK configuration
If you use some third-party SDK functions, you need to configure the corresponding information.
SDK Enable the information that needs to be filled in, and just go to the corresponding third-party open platform to register.
Module permission configuration
The activation of some modules requires the configuration of permissions
Page reference relationship
I don’t know much about it, just read the manual.
Code view
The source code part of the configuration, not all configurations provide a visual editing view.
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.
#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.
Simply encapsulate the event callback of the extended API loading completion
var plusReady = function(callback) {
if(window.plus) {
callback();
} else {
document.addEventListener('plusready', callback);
}
};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);
});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.
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.
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)
