Share an HTML5Plus mobile application

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.

• 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.

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);
  }
};

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.

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!