HTML5 Plus Mobile App (5+app) development Getting Started Guide

HTML5 Plus mobile app, referred to as 5+app, is a HTML, JS, CSS based on the mobile phone app, this app can call the native ability of the mobile phone via the extended JS API, realize the same powerful function and performance as the native App.

HTML5 Plus Specification

When you develop mobile apps through HTML5, you'll find that HTML5 has a lot of capabilities. In order to compensate for the shortcomings of HTML5 ability, under the guidance of China, the establishment of www.html5plus.org organization, the introduction of html5+ norms.
The html5+ specification is an open specification that allows a three-party browser manufacturer or other handset runtime manufacturer to implement.
html5+ extension of JavaScript object Plus, so that JS can invoke a variety of browsers do not implement or implement poor system capabilities, equipment such as cameras, gyroscopes, file systems, such as uploading and downloading, QR code, MAP, payment, voice input, message push and so on.
Hbuilder's phone native capability calls are divided into 2 levels:
-The ability calls across mobile platforms are in the html5+ specification, such as QR code, voice input, using Plus.barcode and Plus.speech. Written once and can be run across platforms.
-Native.js is another innovative technology. The native API for mobile OS is more than 400,000, and a large number of APIs cannot be used by HTML5. Native.js hundreds of thousands of native API into a JS object, through JS can directly adjust the iOS and Android native API. This section is no longer cross-platform and is written in Plus.ios and plus.android, such as iOS Game Center, or creating shortcuts on Android phone desktops.
Example of native.js usage, var obj= plus.android.import ("android.content.Intent"); Map a native object android.content.Intent to the JS object obj, and then manipulate the Obj object's method properties in JS.
Native.js's detailed tutorials can be consulted: 5+ app development native.js Getting Started Guide

html5+ App

The

Mobile app developed using html5+ is not an mobile Web page. This is the easiest place for novices to confuse. Mobile Web files are stored on a Web server, while the files of the app are stored locally on the phone, and the HTML, JS, and CSS files for the mobile app are packaged in a native installation package such as an IPA or apk to run on the mobile client.
Use a more image, the web app is still b/s structure, and mobile app is the C/s structure or even completely off-line single-machine application.
This may be a bit more than some people imagine, they think that HTML is the web, is b/s, in fact, JavaScript can already be used by NODEJS and other technology to run on the server side, and in Hbuilder mobile app, HTML, JS and other files can also be packaged into a native installation package.
Of course, some pages in these mobile apps can continue to go down the Web from the server side, just as any native app (such as) can embed Web pages.
So the mobile Web, when you create a new project in Hbuilder, belongs to the Web project. Do not place it under a mobile app item. Mobile Web projects also cannot be truly machine-linked and packaged.
give a few examples of how mobile web and mobile apps differ.
Example 1: Package a mobile Web project into a moving app.
1. Create a new Web project in Hbuilder and put the mobile Web code in.
2. Create a new mobile app in Hbuilder
3. Under the new mobile app, locate Manifest.json and configure the portal page to be the network address of the mobile web.
4. Then click Release package to get a mobile app installation package. In addition to having a shortcut to a setup package and desktop, there is no other difference from the browser experience.
5. Note, however, that such a mobile app experience is very poor, it will be in the page jump like a browser switch and white screen, it is completely unable to take off the line, no network time to open the app can only see a whiteboard. Such apps are not approved by Apple's AppStore, and other large Android markets will not be allowed to be released.

Example 2: A regular mobile app
1. Create a new mobile app project in Hbuilder
2. In the mobile app to write HTML, JS, CSS files, local JS through the AJAX way to request server data, through the Plus.net object to avoid cross-domain restrictions
3. js in mobile app can call native ability of phone via plus object
4. A well-written mobile app point package becomes an installation package, which is a well-experienced mobile app that can be launched.

Example 3: Hybrid mobile App
The hybrid mobile app here refers not to the native and HTML5 hybrid app, but rather to a subset of the pages being local HTML, interacting with the server through Ajax, and another part of the mobile Web page from the server downlink.
1. Create a new Web project and a mobile app project separately
2. In one of the HTML in the mobile app, pass 3. In the Mobile Web page of the server downlink, it is possible to call the local Html5plus API via JS to access the hardware layer. Similar to the JS SDK.

html5+ Application Architecture

For the latest specifications, please refer to http://www.html5plus.org/#specification

Mobile-side experience the implementation of each API, iOS phone in AppStore search Hello h5+,android phone.
New mobile app in Hbuilder, choose Hello h5+, you can see the source code of this demo.

Development environment Hbuilder

The Hbuilder built-in html5+ app development environment provides a complete set of mobile application development solutions. Built-in html5+ API syntax hints, improve development efficiency, integration of real machine operating environment, convenient development immediately after the real machine to see the effect of the operation, integrated application cloud packaging system, without deploying Xcode and Android SDK can be packaged applications. Enables developers to quickly develop cross-platform mobile applications using only HTML5, Javascript, and CSS technology.
: http://www.dcloud.io/

Platform Support

<script type= "Text/javascript" >//Extension API is ready if not, listen for "Plusready" event if (window.plus) {Plusready ();} else{Document.addeventlistener ("Plusready", Plusready, False);}//The operation to be performed after the extension API is ready function Plusready () {var ws = PLU S.webview.currentwebview (); PW Enter can output Plus.webview//... code} </script>

• IOS 5.0 and above
• Android 2.3 and above

Teach you how to develop Helloword create Helloword apps

• Start Hbuilder (: http://www.dcloud.io/);
• In the menu bar, select "File", "New", "Mobile App" (shortcut key CTRL + N A), open the "Create Mobile App" dialog box, enter "HelloWorld" in the app name;

Note that the new mobile app requires a AppID to be assigned to a network, which is required for a real-time, packaged release, so a mobile app cannot be created without networking.

• When the creation is complete, the new "HelloWorld" project is displayed in the project manager

Manifest.json

In the project manager, double-click the "Manifest.json" file to open the App configuration page:

The various configurations are here for native apps to be packaged. For a specific configuration tutorial see: Manifest.json file Configuration, or click the "Manifest File Configuration Guide" link on the configuration page.

Calling the html5+ API

Double-click the "index.html" file in the project Manager (shortcut key ctrl+t then enter in to select the file carriage return), there is an important "plusready" event for the Html5+ app's page, this event will automatically trigger after the page loads, indicating all html5+ API can be used, you cannot invoke the Html5+ API before this event is triggered, so you should invoke the html5+ API called by the page initialization in this event callback function, and should not be called in the OnLoad or domcontentloaded event:

After the editing program starts the default display page index.html, adds a button on the page, the click will open the new page load "", in order to implement this function, we need to use the html5+ extension API Plus.webview.createWebview () method to create a window:

When the edits are complete, press Ctrl+s to save.

Real machine running run in device

After writing the code, we can see the effect by running it on the real machine. There are 3 features of real machine operation:
1. Real. Although the PC-side hbuilder can look at the approximate page, but the real layout effect and the phone's special ability to call, or must be tested in the real machine.
2. Change sides to see. After Hbuilder changes the page and saves it, you can immediately sync to see the saved display on your real machine. It is more convenient than developing native applications.
3. Check for errors and logs. When the phone runs HTML and other files in the event of an error and print Console.log, you can return from the phone to the console of Hbuilder when the computer is running, and view it directly from the console.
Note Only mobile app items can be true-computer-linked.

Select the "HelloWorld" app you created in the project manager of Hbuilder.

Start a real-computer run

When you connect an iOS or Android device to your computer, Hbuilder automatically detects devices that are connected to your PC and starts with the Run menu in the menu bar:

You can also start with the toolbar:

After you start a real-computer run, the following information is displayed in the console:

Note: If you are prompted with an error message, please try to "terminate" and restart the real machine!





After launch, the Prompt box pops up, select OK to display the following pages:





The Android device will automatically install and launch the Hbuilder Debug Dock, and the iOS device requires the developer to manually tap the Hbuilder debug app on the phone's desktop.

Note: When the real machine is linked to the App, it provides a test environment, and the packaging does not actually occur. The name, icon, startup cover image, and whether it can be rotated of the debugging base App will not be changed by the developer. Modify the manifest file to change. The above 4 settings can only be changed after modifying the manifest and clicking the menu Release-Pack.

After running, the page code is modified in Hbuilder, it will be automatically synced to the phone when it is saved, and the page will be refreshed if the phone currently displays the modified page.
Try to write console.log after the plus ready in JS, or rewrite the wrong JS, you can see the results directly in the Hbuilder console.
If the real machine runs through a variety of failures, please click on the Run menu of the real machine to run the common troubleshooting guide.

Debug debugging

In addition to real-computer operation, we can also use Chrome and Safari's developer console to debug 5+app.
You can use a real machine to plug in a data cable, or you can use an emulator. All APIs, including the various APIs of plus, even native objects of Plus.ios and plus.android, can be debugged.
Run on the Hbuilder menu-there are links to tutorials in the mobile phone run.
But they also have limitations, chrome debugging needs to use more than Android4.4 devices and to Fq,safari debugging requires the use of Mac computers.

Release Package

After you finish editing the app page, you need to formally package it as an original apk or an IPA installation package.
First of all, it is said that some people say that HTML5 do not pass the Apple AppStore Audit, this is the wrong argument. Apple just refuses to pack the Web site directly on the AppStore, which it thinks is for AppStore to make garbage, and if it's an app with native experience, Apple won't refuse to put it on the shelves, even with HTML5 technology. In fact, apps that use HTML5 technology on AppStore more than 20w.
Hbuilder offers a package with cloud packaging and local packaging.
Hbuilder does not charge developers any fees for packaging, nor does it restrict developers from using local packaging.
Cloud packaging is characterized by the Dcloud official configuration of the native packaging environment, you can compile HTML and other files as a native installation package.
1. For front-end engineers unfamiliar with native development, cloud packaging drastically lowers their threshold for use.
2. For developers without Mac computers, they can also directly play the iOS IPA package via cloud packaging.
Whether the cloud is packaged or packaged locally, it is in the Hbuilder menu-release.
Local packaging There is a detailed tutorial under this menu, where only cloud packaging is described.

Open the App Cloud Packaging dialog box by using the "release", "app Pack" in the menu bar.
Note Only mobile app items can be packaged.

iOS Publishing

For the iOS platform, you can choose a jailbreak package or a formal package (AppStore private or Enterprise certificate) that can only be installed on jailbroken devices, which can be submitted to AppStore through the IDP certificate package, or packaged within an enterprise through an IEP certificate.

Configuring packaging information

Jailbreak pack

Appid:ios application identity, it is recommended to use a reverse domain style string, such as "Com.domainname.appname".
Formal Package

Appid:ios application identity, it is recommended to use a reverse domain-style string, such as "Com.domainname.appname", which must match the app ID bound to the profile file.
Private Key Certificate: IOS certificates file (. p12);
Private key Password: the password to import the private key certificate;
Profile: The IOS Provisioning profile file (. mobileprovision) must match the Apple app ID and the private key certificate area;
For certificate generation please refer to http://ask.dcloud.net.cn/article/152

View packaging status

Open the View App Packaging Status dialog box to view the packaging history and status by viewing the packaging status in the menu bar, publish, and then:

If the "Make Status" column shows "package is successful, download complete" means the cloud package is complete, click "Open Download Directory" To view the downloaded installation package.

Android Publishing

For Android platforms, you can choose to use the public certificate generated by Dcloud or the certificate you generate, which does not affect the release of the installation package, except that the developer and enterprise information in the certificate is different.

Generate an Android signing certificate

(Ignoring this operation with the Dcloud public certificate) ensures that the JRE is installed on the computer, and we will use the JRE's own tool Keytool to create and manage digital certificates. Use the following command to generate the certificate:

• keystoreHelloworld.keystore represents the generated certificate, which can be added to the path (by default in the user's home directory);
• aliasHelloWorld indicates that the certificate alias is HelloWorld;
• keyalgRSA represents the RSA algorithm used;
• validity10000 indicates that the certificate is valid for 10,000 days.

Configuring packaging information

Using Dcloud public certificates

App Package Name: Android App package name, using reverse domain style string, such as "Com.domainname.appname".
Use your own certificate

App Package Name: Android App package name, recommended to use reverse domain style string, such as "Com.domainname.appname";
Certificate aliases: Certificate aliases set using the-alias parameter when generating certificates;
Private key Password: The keystore password used when generating the certificate;
Certificate file: The certificate save path that is set with the-keystore parameter when the certificate is generated;

View packaging status

Open the View App Packaging Status dialog box to view the packaging history and status by viewing the packaging status in the menu bar, publish, and then:

If the "Make Status" column shows "package is successful, download complete" means the cloud package is complete, click "Open Download Directory" To view the downloaded installation package.

A ready-made installation package that allows developers to continue downloading within 2 days. The server clears the file after 2 days.

The common causes of packaging failures are:
If you use your own certificate, it is most likely a certificate configuration error.
If you still have an error using the Dcloud certificate, it is probably a picture error. All image formats must be standard PNG and strictly conform to the resolution requirements. Renaming to PNG with a different picture format will cause the package to fail!

UI Framework

Hbuilder does not restrict the UI framework, and developers can use any UI framework.
However, there is really no good mobile app front-end framework, Dcloud developed the MUI Framework, it has a higher performance, style is closer to the native app, and MUI called the html5+ extension capabilities, can achieve a better experience.
Note that MUI only encapsulates part of the Html5plus Api, and the Learn MUI framework does not mean that you can not learn the Html5plus specification. MUI does not do very well, it is only a limited package that simplifies the common development process.

Development resources

helloh5+ Sample app that includes examples of almost all plus APIs in your app:
-Search for Hello h5+ in Ios:appstore
-Android:

Get the source code for Hello h5+, create a new mobile app in Hbuilder, and choose Hello h5+. You can view the call sample code for all the plus APIs.

Hello MUI Sample app, nice and high-performance front-end UI framework:
Download page

HTML5 Plus Mobile App (5+app) development Getting Started Guide