手把手教你開發App(HelloWorld)
建立HelloWorld應用
- 啟動HBuilder(下載地址:http://www.dcloud.io/);
- 在選單欄中選擇“檔案”-> “新建”->“移動App”(快捷鍵Ctrl+N A),開啟“建立移動App”對話方塊,在應用名稱中輸入“HelloWorld”;
- 如果是HBuilderX,則新建專案時選5+App。
注意新建移動App需要聯網分配一個appid,在真機聯調、打包發行時都需要這個ID,所以不聯網無法建立移動App。 - 建立完成後,會在專案管理器中顯示新建的“HelloWorld”專案
manifest.json
在專案管理器中雙擊“manifest.json”檔案,開啟應用配置頁面:
對於要打包的原生應用而言,其各種配置均在此處。具體配置教程見:Manifest.json檔案配置,或者點選配置頁面上的“manifest檔案配置指南”連結。
呼叫HTML5+ API
在專案管理器中雙擊“index.html”檔案,對於HTML5+應用的頁面有一個很重要的“plusready”事件,此事件會在頁面載入後自動觸發,表示所有HTML5+ API可以使用,在此事件觸發之前不能呼叫HTML5+ API,所以應該在此事件回撥函式中呼叫頁面初始化需要呼叫的HTML5+ API,而不應該在onload或DOMContentLoaded事件中呼叫:
<!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鍵儲存。
真機執行 run in device
寫完程式碼後,我們可以通過真機執行來檢視效果。真機執行有3個特點:
1. 真實。雖然PC端HBuilder右側的內建瀏覽器也可以看大致的頁面,但真實的佈局效果以及手機上的特殊能力呼叫,還是必須在真機測試。
2. 邊改邊看。在HBuilder更改頁面並儲存後,可立即同步在真機上看到儲存後的顯示效果。比開發原生應用還方便。
3. 檢查錯誤和log。手機執行HTML等檔案時如果發生錯誤以及列印的console.log,都可以在真機執行時從手機端反饋回到HBuilder的控制檯,在控制檯直接檢視。
注意只有移動App專案才可以真機聯調。
在HBuilder的“專案管理器”中選擇建立的“HelloWorld”應用。
啟動真機執行
將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啟動,在ide上可看到可除錯的頁面,點選除錯後,開啟控制檯,和普通的瀏覽器除錯是一樣的。
發行打包
完成應用頁面的編輯後,需要正式打包為原生的apk或ipa安裝包。
首先明確一下,有人說HTML5做的應用無法通過蘋果Appstore稽核,這是錯誤的說法。蘋果只是拒絕開發者把web站點直接打包上Appstore,不優化任何體驗,它認為這是給Appstore製造垃圾應用,如果是原生體驗的App,雖然使用HTML5技術,蘋果也不會拒絕上架。事實上Appstore上使用HTML5技術的App超過40w。
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。使用以下命令生成證書:
-keystore
helloworld.keystore 表示生成的證書,可以加上路徑(預設在使用者主目錄下);
-alias
helloworld 表示證書的別名是helloworld;
-keyalg
RSA 表示採用的RSA演算法;
-validity
10000 表示證書的有效期是10000天。
配置打包資訊
- 使用DCloud公用證書
App包名:Android應用包名,使用反向域名風格的字串,如“com.domainname.appname”。 - 使用自有證書
App包名:Android應用包名,推薦使用反向域名風格的字串,如“com.domainname.appname”;
證書別名:生成證書時使用-alias引數設定的證書別名;
私鑰密碼:生成證書時使用的keystore密碼;
證書檔案:生成證書時使用-keystore引數設定的證書儲存路徑;
檢視打包狀態
通過選單欄中的“發行”->“檢視打包狀態”,開啟“檢視App打包狀態”對話方塊,可檢視打包歷史記錄和狀態:
如果“製作狀態”欄顯示“打包成功,下載完成”則表示雲端打包完成,可點選“開啟下載目錄”檢視下載的安裝包。
已經打好的安裝包,允許開發者在指定天內下載指定次數。超時或超次後伺服器端會清除檔案。
遇到打包失敗,常見原因是:
如果使用自用證書,很可能是證書配置錯誤。
如果使用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,並獲得更多使用者和變現收益!