【轉】【知識點】H5+ 移動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對象的方法屬性就可以了。

Native.js的詳細教程可以參考:5+ App開發Native.js入門指南

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里通過

3. 在服務器下行的mobile web頁面中,一樣可以通過js調用本地HTML5Plus api對硬件層進行訪問。類似微信JS SDK。

HTML5+ 應用架構

應用架構

最新規范請參考 http://www.html5plus.org/#specification

手機端體驗各個API的實現效果,ios手機在Appstore搜索Hello H5+,Android手機下載地址

在HBuilder中新建移動App,選Hello H5+,即可看到這個demo的源代碼。

開發環境HBuilder

HBuilder內置HTML5+ APP開發環境,提供一套完整的移動應用開發解決方案。內置HTML5+ API語法提示,提高開發效率;集成真機運行環境,方便開發后即時在真機上查看運行效果;集成應用云端打包系統,不用部署xcode和Android sdk就可以打包應用。使開發者只需要使用HTML5、Javascript、CSS技術就可以快速開發跨平臺的移動應用。

下載地址:http://www.dcloud.io/

平臺支持

// 擴展API是否準備好,如果沒有則監聽“plusready"事件 if(window.plus){ plusReady(); }else{ document.addEventListener( "plusready", plusReady, false ); } // 擴展API準備完成后要執行的操作 function plusReady(){ var ws = plus.webview.currentWebview(); //pw回車可輸出plus.webview // ... code }

iOS 5.0及以上

Android 2.3及以上

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,560評論 25 708
  • afinalAfinal是一個android的ioc,orm框架 https://github.com/yangf...
    passiontim閱讀 15,569評論 2 45
  • 前兩天溜達微博看到一篇新聞,產婦在產房里情況緊急,醫生建議刨腹產,公婆不同意,認為醫院為了多加5000元手術費故...
    童小咪閱讀 121評論 4 3
  • (一) 孤帆逝水桅篷牽, 兩岸輕塵揚滿天, 遠處水鷹折雨濺, 漁翁蓑笠搖櫓船, 鳳凰落下梧桐暖, 潦倒前程細柳攔,...
    古城蒼狼閱讀 287評論 1 3
  • 1、運用演講萬能公式寫出并表達與達夢教育的故事。 感恩達夢教育助我找到了人生夢想,感謝這個能夠讓夢想成真的平臺!記...
    可可媽_love閱讀 156評論 0 0