5+ app Development Getting Started Guide

HTML5 Plus Application Overview

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

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, specify the page address of the mobile web via the Loadurl method of the <a href= or location.href= or WebView object.
3. In the Mobile Web page of the server downlink, the hardware layer can be accessed through JS calling the local Html5plus API. Similar to the JS SDK.

html5+ Application Architecture

html5+ specification API and Demo sample

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

• IOS 5.0 and above

• Android 2.3 and above

Teach you how to develop Helloword create Helloword apps

• • Start Hbuilder;

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

<! DOCTYPE html>"Utf-8"/> <meta name="Viewport"Content="initial-scale=1.0, maximum-scale=1.0, User-scalable=no"/> <title>hello world</title> <script type="Text/javascript">//whether the extension API is ready, and if not, listen for "Plusready" eventsif(window.plus) {Plusready ();}Else{Document.addeventlistener ("Plusready", Plusready,false );}//What to do when the extension API is ready to completefunction Plusready () {varWS = Plus.webview.currentWebview ();//PW return to output Plus.webview//. .. code}    </script> 
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 "
　　　　　　
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:
After you start a real-computer run, the following information is displayed in the console:
　　　　　　
注：如果提示错误信息，请尝试“终止”后重新启动真机运行！
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.
注意：真机联调App时，提供的是一个测试环境，并不真实发生打包，调试基座App的名字、图标、启动封面图片、是否可旋转这些只有打包才能更改的属性不会因为开发者修改manifest文件而变化。只有修改manifest且点击菜单发行-打包后，上述4个设置才能更改。
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
 
    
 
   
 
  
 
 
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".
5+ app Development Getting Started Guide