DCloud-HTML5+：5+ App開發入門指南

時間 2019-11-14

標籤 dcloud html5 html app 開發入門指南欄目 HTML5 简体版

原文原文鏈接

ylbtech-DCloud-HTML5+：5+ App開發入門指南

1.返回頂部

一、

5+ App開發入門指南

App App入門

HTML5 Plus應用概述

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

HTML5 Plus規範

經過HTML5開發移動App時，會發現HTML5不少能力不具有。爲彌補HTML5能力的不足，在W3C中國的指導下成立了HTML5中國產業聯盟www.html5plus.org組織，推出HTML5+規範。目前該聯盟已經掛靠在工信部信通院標準所下，相關標準已經成爲行業標準。
HTML5+規範是一個開放規範，隸屬於工信部，容許三方瀏覽器廠商或其餘手機runtime製造商實現。
HTML5+擴展了JavaScript對象plus，使得js能夠調用各類瀏覽器沒法實現或實現不佳的系統能力，設備能力如攝像頭、陀螺儀、文件系統等，業務能力如上傳下載、二維碼、地圖、支付、語音輸入、消息推送等。
除了功能外，HTML5+很重要的特色是提供了原生的渲染能力，經過plus.webview、plus.nativeObj、plus.nativeUI，讓開發者可使用js來調用原生渲染能力，實現體驗的大幅提高。
原生的api多達40萬，HTML5+的封裝並不是把40萬api都封裝了一遍，而是分紅了2個層面：
- HTML5Plus規範：經常使用的擴展能力，好比二維碼、語音輸入，都封裝到了規範中，同時實現了Android和iOS的解析引擎，使得開發者的代碼編寫一次，可跨平臺運行。
- Native.js是另外一項創新技術。手機OS的原生API有四十多萬，大量的API沒法被HTML5使用。Native.js把幾十萬原生API映射成了js對象，經過js能夠直接調ios和android的原生API。這部分就再也不跨平臺，寫法分別是plus.ios和plus.android，好比調ios game center，或在android手機桌面建立快捷方式，這些都是平臺專有的api。
Native.js的用法示例，var obj= plus.android.import("android.content.Intent");，將一個原生對象android.content.Intent映射爲js對象obj，而後在js裏操做obj對象的方法屬性就能夠了。
Native.js的詳細教程能夠參考：5+ App開發Native.js入門指南
在5+App裏，同時包含了HTML5Plus規範和Native.js的實現，開發者能夠在5+App裏自由使用相關技術。php

5+ App概念解析

首先開發者須要清楚你要作什麼，是一個mobile web項目，運行在瀏覽器裏？仍是要作一個app，安裝和運行在手機上？或者要把一個mobile web項目打包成app？
1. 作一個mobile web項目
在這個模式下，開發者用不到HTML5Plus，使用標準的HTML5語法，運行在瀏覽器裏。這不算5+ App。
此時開發者仍然可使用HBuilder這個開發工具，新建項目時選擇web項目。
開發者也仍然可使用DCloud提供的mui開源框架，來簡化ui的開發。
但這就是一個普通的web項目，b/s方式，不可脫線運行，不能調用HTML5Plus的增長api。
2. 作一個正統的app
傳統意義上的app，是c/s方式的，它的程序要安裝和運行在手機上，不經過瀏覽器在線下載。
此時開發者在HBuilder裏新建項目時，選擇「移動App」。
在移動App項目下編寫的HTML、js等文件，是會被打包到原生的安裝包（Android是apk包、iOS是ipa包）裏的。
此時本地的js和服務器經過ajax交互，由服務器按接口方式給出數據（通常是json），而後客戶端的js文件解析json，並根據本地的業務邏輯來渲染頁面和執行功能。
因此請不要新建一個移動App項目，而後把原本運行在服務器端的php等文件也都丟到這個項目下。
web項目始終是web項目，哪怕要在app項目裏某個界面裏，在線加載一個遠程的網頁，也要把這個遠程網頁的代碼，放到web項目下。
移動App項目下，只有能有html、js、css、json以及一些圖片或數據文件，不能包括php、jsp、py等服務器頁面。
3. 使用wap2app打包mobile web項目爲app
若是開發者想把一個作好的mobile web站，方便快速的打包成app，那麼要使用DCloud的wap2app框架。
在HBuilder中新建項目時，選wap2app項目，把mobile web站的url輸入進去，參考框架的教程來配置。
wap2app不一樣於普通的web打包技術，wap2app可真正作達到原生應用的功能和性能體驗。
具體教程另見：文檔中心-wap2app，http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244
wap2app屬於5+app，它底層也是強大的HTML5Plus規範和Native.js在支撐。
wap2app項目下的全部文件，也都是打包在本機運行的。
4. 若是你想開發一次，全端覆蓋，那麼須要使用mui框架
具體參考：http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/591css

HTML5+ 應用架構

HTML5+ 規範 API 及demo示例

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

開發環境HBuilder

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

平臺支持

iOS 5.0及以上
Android 2.3及以上

手把手教你開發HelloWorld

建立HelloWorld應用

啓動HBuilder（下載地址：http://www.dcloud.io/）；
在菜單欄中選擇「文件」-> 「新建」->「移動App」（快捷鍵Ctrl+N A），打開「建立移動App」對話框，在應用名稱中輸入「HelloWorld」；
注意新建移動App須要聯網分配一個appid，在真機聯調、打包發行時都須要這個ID，因此不聯網沒法建立移動App。
建立完成後，會在項目管理器中顯示新建的「HelloWorld」項目

manifest.json

在項目管理器中雙擊「manifest.json」文件，打開應用配置頁面：

對於要打包的原生應用而言，其各類配置均在此處。具體配置教程見：Manifest.json文件配置，或者點擊配置頁面上的「manifest文件配置指南」連接。html5

調用HTML5+ API

在項目管理器中雙擊「index.html」文件（快捷鍵Ctrl+T 而後輸入in選擇文件回車），對於HTML5+應用的頁面有一個很重要的「plusready」事件，此事件會在頁面加載後自動觸發，表示全部HTML5+ API可使用，在此事件觸發以前不能調用HTML5+ API，因此應該在此事件回調函數中調用頁面初始化須要調用的HTML5+ API，而不該該在onload或DOMContentLoaded事件中調用：java

<!DOCTYPE html> <html> <head> <meta charset="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">  // 擴展API是否準備好，若是沒有則監聽「plusready"事件 if(window.plus){ plusReady(); }else{  document.addEventListener( "plusready", plusReady, false ); } // 擴展API準備完成後要執行的操做 function plusReady(){ var ws = plus.webview.currentWebview(); //pw回車可輸出plus.webview // ... code } </script>  </head>  <body> </body> </html>

編輯程序啓動後默認顯示的頁面index.html，在頁面中添加一個按鈕，點擊後將打開新頁面加載「<http://m.csdn.net/>」，爲了實現此功能，咱們須要用到HTML5+擴展API中plus.webview.createWebview()方法建立窗口：

編輯完成後，按Ctrl+S鍵保存。android

真機運行 run in device

寫完代碼後，咱們能夠經過真機運行來查看效果。真機運行有3個特色：
1. 真實。雖然PC端HBuilder的邊改邊看也能夠看大體的頁面，但真實的佈局效果以及手機上的特殊能力調用，仍是必須在真機測試。
2. 邊改邊看。在HBuilder更改頁面並保存後，可當即同步在真機上看到保存後的顯示效果。比開發原生應用還方便。
3. 檢查錯誤和log。手機運行HTML等文件時若是發生錯誤以及打印的console.log，均可以在真機運行時從手機端反饋回到HBuilder的控制檯，在控制檯直接查看。
注意只有移動App項目才能夠真機聯調。ios

在HBuilder的「項目管理器」中選擇建立的「HelloWorld」應用。web

啓動真機運行

將iOS或Android設備鏈接到電腦，這時HBuilder會自動檢測鏈接到電腦上的設備，經過菜單欄中的「運行」菜單啓動：

也可經過工具欄啓動：

啓動真機運行後，在控制檯中顯示如下信息：

注：若是提示錯誤信息，請嘗試「終止」後從新啓動真機運行！

啓動後會彈出提示框，選擇「肯定」，顯示如下頁面：

在Android設備會自動安裝並啓動HBuilder調試基座，iOS設備須要開發者手動點擊手機桌面的HBuilder調試App。

若是你真機失敗，注意看控制檯的提示，或點HBuilder菜單-運行裏的故障排查指南。
注意：真機聯調App時，提供的是一個測試環境，並不真實發生打包，調試基座App的名字、圖標、啓動封面圖片、是否可旋轉這些只有打包才能更改的屬性不會由於開發者修改manifest文件而變化。只有修改manifest且點擊菜單發行-打包後，上述4個設置才能更改。

運行後，HBuilder中修改頁面代碼，保存後會自動同步到手機中，若是手機當前展現着被修改的頁面，則會刷新頁面。
嘗試在js中在plus ready以後編寫console.log，或者改寫錯誤的js，能夠直接在HBuilder的控制檯看到結果。
若是真機運行遇到各類故障，請點擊運行菜單裏的真機運行常見故障指南。

debug調試

除了真機運行，咱們還能夠利用chrome和safari的開發者控制檯來調試5+App。
可使用真機插上數據線，也可使用Android或iOS的官方模擬器。全部Api包括plus的各類api，甚至包括plus.ios和plus.android的原生對象，均可以調試。
在HBuilder的菜單運行裏選擇打開Webview調試模式，若是手機鏈接正常，5+App啓動，在右側可看到可調試的頁面，點擊調試後，打開控制檯，和普通的瀏覽器調試是同樣的。

發行打包

完成應用頁面的編輯後，須要正式打包爲原生的apk或ipa安裝包。
首先明確一下，有人說HTML5作的應用沒法經過蘋果Appstore審覈，這是錯誤的說法。蘋果只是拒絕開發者把web站點直接打包上Appstore，不優化任何體驗，它認爲這是給Appstore製造垃圾應用，若是是原生體驗的App，雖然使用HTML5技術，蘋果也不會拒絕上架。事實上Appstore上使用HTML5技術的App超過20w。
HBuilder提供的打包有云打包和本地打包兩種。
HBuilder並不會向開發者收取任何有關打包的費用，也不限制開發者使用本地打包。
雲打包的特色是DCloud官方配置好了原生的打包環境，能夠把HTML等文件編譯爲原生安裝包。
1. 對於不熟悉原生開發的前端工程師，雲打包大幅下降了他們的使用門檻。
2. 對於沒有mac電腦的開發者，他們也能夠經過雲打包直接打出iOS的ipa包。
不管雲打包仍是本地打包，都在HBuilder的菜單-發行中。
本地打包在該菜單下有詳細教程，此處僅對雲打包進行說明。

經過菜單欄中的「發行」->「App打包」，打開「App雲端打包」對話框提交。
注意只有移動App項目才能夠打包。

iOS發佈

對於iOS平臺，能夠選擇越獄包或正式包（Appstore專用或企業證書），前者只能安裝在已越獄的設備上，後者則可經過iDP證書打包提交到Appstore發佈、或經過iEP證書打包在企業內部發布。

配置打包信息

越獄包

AppID：iOS應用標識，推薦使用反向域名風格的字符串，如「com.domainname.appname」。
正式包

AppID：iOS應用標識，推薦使用反向域名風格的字符串，如「com.domainname.appname」，必須與profile文件綁定的App ID匹配。
私鑰證書：iOS Certificates文件（.p12）；
私鑰密碼：導入私鑰證書的密碼；
Profile文件：iOS Provisioning Profile文件（.mobileprovision），必須與蘋果App ID和私鑰證書區配；
證書生成請參考http://ask.dcloud.net.cn/article/152

查看打包狀態

經過菜單欄中的「發行」->「查看打包狀態」，打開「查看App打包狀態」對話框，可查看打包歷史記錄和狀態：

若是「製做狀態」欄顯示「打包成功，下載完成」則表示雲端打包完成，可點擊「打開下載目錄」查看下載的安裝包。

Android發佈

對於Android平臺，能夠選擇使用DCloud生成的公用證書或本身生成的證書，二者不影響安裝包的發佈，惟一的差異就是證書中開發者和企業信息不一樣。

生成Android簽名證書

（使用DCloud公用證書可忽略此操做）確保電腦上安裝了JRE，咱們將使用JRE自帶的建立和管理數字證書的工具Keytool。使用如下命令生成證書：

keystorehelloworld.keystore 表示生成的證書，能夠加上路徑（默認在用戶主目錄下）；
aliashelloworld 表示證書的別名是helloworld；
keyalgRSA 表示採用的RSA算法；
validity10000 表示證書的有效期是10000天。

配置打包信息

使用DCloud公用證書

App包名：Android應用包名，使用反向域名風格的字符串，如「com.domainname.appname」。
使用自有證書

App包名：Android應用包名，推薦使用反向域名風格的字符串，如「com.domainname.appname」；
證書別名：生成證書時使用-alias參數設置的證書別名；
私鑰密碼：生成證書時使用的keystore密碼；
證書文件：生成證書時使用-keystore參數設置的證書保存路徑；

查看打包狀態

已經打好的安裝包，容許開發者在2天內繼續下載。2天后服務器端會清除文件。

遇到打包失敗，常見緣由是：
若是使用自用證書，極可能是證書配置錯誤。
若是使用DCloud證書仍然出錯，極可能是圖片錯誤。全部圖片格式必須是標準png，且嚴格符合分辨率要求。使用其餘圖片格式重命名爲png會致使打包失敗！
其餘錯誤請參考：雲打包常見錯誤排查指南

UI框架

HBuilder並不限制UI框架，開發者使用任何UI框架都可以。
不過市面上確實沒有什麼好的手機App前端框架，DCloud開發了mui框架，它的性能更高，樣式也更接近原生App，而且mui調用了HTML5+擴展能力，能夠實現更好的體驗。
咱們強烈推薦開發移動App的開發者使用mui框架，詳情請參考文檔中心mui章節。
請注意，mui只封裝了部分HTML5Plus Api，學會mui框架不表明能夠不學習HTML5Plus規範。mui不會作的很重，只是頗有限的經過封裝簡化了常見開發過程。

開發資源

API手冊：HTML5+規範

HelloH5+示例應用，應用中包括幾乎全部plus API的示例：
- iOS：Appstore中搜索Hello H5+
- Android：下載地址

獲取Hello H5+的源代碼，在HBuilder中新建移動App，選Hello H5+。能夠查看全部plus api的調用樣例代碼。

Hello mui示例應用，漂亮且高性能的前端UI框架：
下載頁面

進階教程

若是想開發出接近原生體驗的App，請訪問以下教程：
- 提高HTML5的性能體驗系列之一避免切頁白屏
- 提高HTML5的性能體驗系列之二列表流暢滑動
- 提高HTML5的性能體驗系列之三流暢下拉刷新
- 提高HTML5的性能體驗系列之四使用原生UI（nativeUI）

三方培訓

HTML5中國產業聯盟裏有專業的培訓機構爲HTML5開發者提供DCloud產品的培訓。
詳見專門文章http://ask.dcloud.net.cn/article/299

發行和變現服務

在你的app開發完畢後，DCloud還提供了發佈平臺，幫助開發者簡單的完成應用推廣頁面，參考http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12936；
若是開發者還須要流量變現，DCloud提供了廣告平臺，開發者能夠方便的在本身的app中集成廣告，參考http://ask.dcloud.net.cn/article/13084

最後，祝你經過DCloud的免費工具，快速完成本身的移動App，並得到更多用戶和變現收益！

二、

一、

http://ask.dcloud.net.cn/article/89

二、

6.返回頂部

做者：ylbtech
出處：http://ylbtech.cnblogs.com/
本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。