HTML5+ App開發入門

HTML5 Plus應用概述

HTML5 Plus移動App，簡稱5+App，是一種基於HTML、JS、CSS編寫的運行於手機端的App，這種App能夠經過擴展的JS API任意調用手機的原生能力，實現與原生App一樣強大的功能和性能。

HTML5 Plus規範

經過HTML5開發移動App時，會發現HTML5不少能力不具有。爲彌補HTML5能力的不足，在W3C中國的指導下成立了www.html5plus.org組織，推出HTML5+規範。

HTML5+規範是一個開放規範，容許三方瀏覽器廠商或其餘手機runtime製造商實現。

HTML5+擴展了JavaScript對象plus，使得js能夠調用各類瀏覽器沒法實現或實現不佳的系統能力，設備能力如攝像頭、陀螺儀、文件系統等，業務能力如上傳下載、二維碼、地圖、支付、語音輸入、消息推送等。

HBuilder的手機原生能力調用分2個層面：

- 跨手機平臺的能力調用都在HTML5+規範裏，好比二維碼、語音輸入，使用plus.barcode和plus.speech。編寫一次，可跨平臺運行。
- Native.js是另外一項創新技術。手機OS的原生API有四十多萬，大量的API沒法被HTML5使用。Native.js把幾十萬原生API封裝成了js對象，經過js能夠直接調ios和android的原生API。這部分就再也不跨平臺，寫法分別是plus.ios和plus.android，好比調ios game center，或在android手機桌面建立快捷方式。

Native.js的用法示例，var obj= plus.android.import("android.content.Intent");，將一個原生對象android.content.Intent映射爲js對象obj，而後在js裏操做obj對象的方法屬性就能夠了。

HTML5+ App

使用HTML5+開發的移動App並不是mobile web頁面。這是新手最容易混淆的地方。mobile web的文件存放在web服務器上，而移動App的文件存放在手機本地，編寫移動App的html、js、css文件被打包到ipa或apk等原生安裝包，在手機客戶端運行。

用個更形象的列子，web app仍然是b/s結構，而移動App是c/s結構甚至是徹底脫線的單機應用。
這或許有點超過一些人的想象，他們認爲HTML就是web、就是b/s，事實上javascript早已可經過nodejs等技術運行在服務器側，而在HBuilder的移動App裏，HTML、JS等文件也能夠被打包成原生安裝包。

固然這些移動App裏某些頁面也能夠繼續從服務器端以網頁方式下行，就像任何原生應用（如微信）均可之內嵌網頁同樣。

因此mobile web，在HBuilder裏新建項目時，屬於web項目。不要放置到移動App項目下。mobile web項目也不能真機聯調和打包。

舉幾個例子說明mobile web和移動App的區別。
例1：把一個mobile web項目，打包成移動App。

1. 在HBuilder裏新建一個web項目，把mobile web代碼放進去。
2. 在HBuilder裏新建移動App
3. 在新建的移動App下找到manifest.json，將其中的入口頁面配置爲mobile web的網絡地址。
4. 而後點發行打包，就獲得一個移動App的安裝包。除了有個安裝包和桌面有個快捷方式外，與瀏覽器的體驗不會有其餘區別。
5. 不過注意，這樣的移動App體驗不好，它在頁面跳轉時會像瀏覽器那樣切換而且白屏，它徹底沒法脫線使用，沒有網絡時點開這個app只能看到一片白板。這樣的app在Apple的Appstore審覈時是沒法經過的，其餘大的安卓市場也不會容許發行。

例子2：正規的移動App

1. 在HBuilder裏新建移動App項目
2. 在移動App裏編寫html、Js、css文件，本地js經過ajax方式請求服務器數據，經過plus.net對象避開跨域限制
3. 移動App裏的js能夠經過plus對象調用手機原生能力
4. 編寫好的移動App點打包變成安裝包，這纔是一個體驗良好的、可上線的移動App。

例子3：混合型移動App

這裏的混合型移動App，所指並不是是原生和HTML5的hybrid App，而是指一部分頁面是本地的HTML，經過ajax與服務器交互，另外一部分頁面是從服務器下行的mobile web頁面。
1. 分別新建一個web項目和一個移動App項目
2. 在移動App裏的某個html裏經過<a href= 或者location.href=或者webview對象的loadURL方法指定mobile web的頁面地址。
3. 在服務器下行的mobile web頁面中，同樣能夠經過js調用本地HTML5Plus api對硬件層進行訪問。相似微信JS SDK。

HTML5+ 應用架構

HTML5+ 規範 API 及demo示例

最新規範請參考http://www.html5plus.org/#specification
手機端體驗各個API的實現效果，ios手機在Appstore搜索Hello H5+，Android手機下載地址。
在HBuilder中新建移動App，選Hello H5+，便可看到這個demo的源代碼。

建議：在進行開發以前先把DCloud公司提供的實例都運行一遍，這樣可以利用許多現有的功能模塊，省去不少開發時間和成本。

開發環境HBuilder

HBuilder內置HTML5+ APP開發環境，提供一套完整的移動應用開發解決方案。內置HTML5+ API語法提示，提升開發效率；集成真機運行環境，方便開發後即時在真機上查看運行效果；集成應用雲端打包系統，不用部署xcode和Android sdk就能夠打包應用。使開發者只須要使用HTML五、Javascript、CSS技術就能夠快速開發跨平臺的移動應用。
下載地址：http://www.dcloud.io/

平臺支持

• iOS 5.0及以上
• Android 2.3及以上