手把手教你开发App(HelloWorld)
創(chuàng)建HelloWorld應(yīng)用
- 啟動(dòng)HBuilder(下載地址:http://www.dcloud.io/);
 - 在菜單欄中選擇“文件”-> “新建”->“移動(dòng)App”(快捷鍵Ctrl+N A),打開“創(chuàng)建移動(dòng)App”對(duì)話框,在應(yīng)用名稱中輸入“HelloWorld”;
 - 如果是HBuilderX,則新建項(xiàng)目時(shí)選5+App。
注意新建移動(dòng)App需要聯(lián)網(wǎng)分配一個(gè)appid,在真機(jī)聯(lián)調(diào)、打包發(fā)行時(shí)都需要這個(gè)ID,所以不聯(lián)網(wǎng)無法創(chuàng)建移動(dòng)App。 - 創(chuàng)建完成后,會(huì)在項(xiàng)目管理器中顯示新建的“HelloWorld”項(xiàng)目
 
manifest.json
在項(xiàng)目管理器中雙擊“manifest.json”文件,打開應(yīng)用配置頁面:
 對(duì)于要打包的原生應(yīng)用而言,其各種配置均在此處。具體配置教程見:Manifest.json文件配置,或者點(diǎn)擊配置頁面上的“manifest文件配置指南”鏈接。
調(diào)用HTML5+ API
在項(xiàng)目管理器中雙擊“index.html”文件,對(duì)于HTML5+應(yīng)用的頁面有一個(gè)很重要的“plusready”事件,此事件會(huì)在頁面加載后自動(dòng)觸發(fā),表示所有HTML5+ API可以使用,在此事件觸發(fā)之前不能調(diào)用HTML5+ API,所以應(yīng)該在此事件回調(diào)函數(shù)中調(diào)用頁面初始化需要調(diào)用的HTML5+ API,而不應(yīng)該在onload或DOMContentLoaded事件中調(diào)用:
<!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"> // 擴(kuò)展API是否準(zhǔn)備好,如果沒有則監(jiān)聽“plusready"事件 if(window.plus){plusReady(); }else{ document.addEventListener( "plusready", plusReady, false ); } // 擴(kuò)展API準(zhǔn)備完成后要執(zhí)行的操作 function plusReady(){var ws = plus.webview.currentWebview(); //pw回車可輸出plus.webview// ... code }</script> </head> <body> </body> </html>編輯程序啟動(dòng)后默認(rèn)顯示的頁面index.html,在頁面中添加一個(gè)按鈕,點(diǎn)擊后將打開新頁面加載“<http://m.csdn.net/>”,為了實(shí)現(xiàn)此功能,我們需要用到HTML5+擴(kuò)展API中plus.webview.createWebview()方法創(chuàng)建窗口:
 編輯完成后,按Ctrl+S鍵保存。
真機(jī)運(yùn)行 run in device
寫完代碼后,我們可以通過真機(jī)運(yùn)行來查看效果。真機(jī)運(yùn)行有3個(gè)特點(diǎn):
 1. 真實(shí)。雖然PC端HBuilder右側(cè)的內(nèi)置瀏覽器也可以看大致的頁面,但真實(shí)的布局效果以及手機(jī)上的特殊能力調(diào)用,還是必須在真機(jī)測試。
 2. 邊改邊看。在HBuilder更改頁面并保存后,可立即同步在真機(jī)上看到保存后的顯示效果。比開發(fā)原生應(yīng)用還方便。
 3. 檢查錯(cuò)誤和log。手機(jī)運(yùn)行HTML等文件時(shí)如果發(fā)生錯(cuò)誤以及打印的console.log,都可以在真機(jī)運(yùn)行時(shí)從手機(jī)端反饋回到HBuilder的控制臺(tái),在控制臺(tái)直接查看。
 注意只有移動(dòng)App項(xiàng)目才可以真機(jī)聯(lián)調(diào)。
在HBuilder的“項(xiàng)目管理器”中選擇創(chuàng)建的“HelloWorld”應(yīng)用。
啟動(dòng)真機(jī)運(yùn)行
將iOS或Android設(shè)備連接到電腦,這時(shí)HBuilder會(huì)自動(dòng)檢測連接到電腦上的設(shè)備,通過菜單欄中的“運(yùn)行”菜單啟動(dòng):
 也可通過工具欄啟動(dòng):
啟動(dòng)真機(jī)運(yùn)行后,在控制臺(tái)中顯示以下信息:
注:如果提示錯(cuò)誤信息,請(qǐng)嘗試“終止”后重新啟動(dòng)真機(jī)運(yùn)行!
啟動(dòng)后會(huì)彈出提示框,選擇“確定”,顯示以下頁面:
在Android設(shè)備會(huì)自動(dòng)安裝并啟動(dòng)HBuilder調(diào)試基座,iOS設(shè)備需要開發(fā)者手動(dòng)點(diǎn)擊手機(jī)桌面的HBuilder調(diào)試App。
如果你真機(jī)失敗,注意看控制臺(tái)的提示,或點(diǎn)HBuilder菜單-運(yùn)行里的故障排查指南。
注意:真機(jī)聯(lián)調(diào)App時(shí),提供的是一個(gè)測試環(huán)境,并不真實(shí)發(fā)生打包,調(diào)試基座App的名字、圖標(biāo)、啟動(dòng)封面圖片、是否可旋轉(zhuǎn)這些只有打包才能更改的屬性不會(huì)因?yàn)殚_發(fā)者修改manifest文件而變化。只有修改manifest且點(diǎn)擊菜單發(fā)行-打包后,上述4個(gè)設(shè)置才能更改。
運(yùn)行后,HBuilder中修改頁面代碼,保存后會(huì)自動(dòng)同步到手機(jī)中,如果手機(jī)當(dāng)前展示著被修改的頁面,則會(huì)刷新頁面。
 嘗試在js中在plus ready之后編寫console.log,或者改寫錯(cuò)誤的js,可以直接在HBuilder的控制臺(tái)看到結(jié)果。
 如果真機(jī)運(yùn)行遇到各種故障,請(qǐng)點(diǎn)擊運(yùn)行菜單里的真機(jī)運(yùn)行常見故障指南。
debug調(diào)試
除了真機(jī)運(yùn)行,我們還可以利用chrome和safari的開發(fā)者控制臺(tái)來調(diào)試5+App。
 可以使用真機(jī)插上數(shù)據(jù)線,也可以使用Android或iOS的官方模擬器。所有Api包括plus的各種api,甚至包括plus.ios和plus.android的原生對(duì)象,都可以調(diào)試。
 在HBuilder的菜單運(yùn)行里選擇打開Webview調(diào)試模式,如果手機(jī)連接正常,5+App啟動(dòng),在ide上可看到可調(diào)試的頁面,點(diǎn)擊調(diào)試后,打開控制臺(tái),和普通的瀏覽器調(diào)試是一樣的。
發(fā)行打包
完成應(yīng)用頁面的編輯后,需要正式打包為原生的apk或ipa安裝包。
 首先明確一下,有人說HTML5做的應(yīng)用無法通過蘋果Appstore審核,這是錯(cuò)誤的說法。蘋果只是拒絕開發(fā)者把web站點(diǎn)直接打包上Appstore,不優(yōu)化任何體驗(yàn),它認(rèn)為這是給Appstore制造垃圾應(yīng)用,如果是原生體驗(yàn)的App,雖然使用HTML5技術(shù),蘋果也不會(huì)拒絕上架。事實(shí)上Appstore上使用HTML5技術(shù)的App超過40w。
 HBuilder提供的打包有云打包和本地打包兩種。
 HBuilder并不會(huì)向開發(fā)者收取任何有關(guān)打包的費(fèi)用,也不限制開發(fā)者使用本地打包。
 云打包的特點(diǎn)是DCloud官方配置好了原生的打包環(huán)境,可以把HTML等文件編譯為原生安裝包。
 1. 對(duì)于不熟悉原生開發(fā)的前端工程師,云打包大幅降低了他們的使用門檻。
 2. 對(duì)于沒有mac電腦的開發(fā)者,他們也可以通過云打包直接打出iOS的ipa包。
 無論云打包還是本地打包,都在HBuilder的菜單-發(fā)行中。
 本地打包在該菜單下有詳細(xì)教程,此處僅對(duì)云打包進(jìn)行說明。
通過菜單欄中的“發(fā)行”->“App打包”,打開“App云端打包”對(duì)話框提交。
 注意只有App項(xiàng)目才可以打包。
iOS發(fā)布
對(duì)于iOS平臺(tái),可以選擇越獄包或正式包(Appstore專用或企業(yè)證書),前者只能安裝在已越獄的設(shè)備上,后者則可通過iDP證書打包提交到Appstore發(fā)布、或通過iEP證書打包在企業(yè)內(nèi)部發(fā)布。
配置打包信息
- 越獄包
AppID:iOS應(yīng)用標(biāo)識(shí),推薦使用反向域名風(fēng)格的字符串,如“com.domainname.appname”。 - 正式包
AppID:iOS應(yīng)用標(biāo)識(shí),推薦使用反向域名風(fēng)格的字符串,如“com.domainname.appname”,必須與profile文件綁定的App ID匹配。
私鑰證書:iOS Certificates文件(.p12);
私鑰密碼:導(dǎo)入私鑰證書的密碼;
Profile文件:iOS Provisioning Profile文件(.mobileprovision),必須與蘋果App ID和私鑰證書區(qū)配;
證書生成請(qǐng)參考http://ask.dcloud.net.cn/article/152 
查看打包狀態(tài)
通過菜單欄中的“發(fā)行”->“查看打包狀態(tài)”,打開“查看App打包狀態(tài)”對(duì)話框,可查看打包歷史記錄和狀態(tài):
 如果“制作狀態(tài)”欄顯示“打包成功,下載完成”則表示云端打包完成,可點(diǎn)擊“打開下載目錄”查看下載的安裝包。
Android發(fā)布
對(duì)于Android平臺(tái),可以選擇使用DCloud生成的公用證書或自己生成的證書,兩者不影響安裝包的發(fā)布,唯一的差別就是證書中開發(fā)者和企業(yè)信息不同。
生成Android簽名證書
(使用DCloud公用證書可忽略此操作)確保電腦上安裝了JRE,我們將使用JRE自帶的創(chuàng)建和管理數(shù)字證書的工具Keytool。使用以下命令生成證書:
 -keystorehelloworld.keystore?表示生成的證書,可以加上路徑(默認(rèn)在用戶主目錄下);
 -aliashelloworld?表示證書的別名是helloworld;
 -keyalgRSA?表示采用的RSA算法;
 -validity10000?表示證書的有效期是10000天。
配置打包信息
- 使用DCloud公用證書
App包名:Android應(yīng)用包名,使用反向域名風(fēng)格的字符串,如“com.domainname.appname”。 - 使用自有證書
App包名:Android應(yīng)用包名,推薦使用反向域名風(fēng)格的字符串,如“com.domainname.appname”;
證書別名:生成證書時(shí)使用-alias參數(shù)設(shè)置的證書別名;
私鑰密碼:生成證書時(shí)使用的keystore密碼;
證書文件:生成證書時(shí)使用-keystore參數(shù)設(shè)置的證書保存路徑; 
查看打包狀態(tài)
通過菜單欄中的“發(fā)行”->“查看打包狀態(tài)”,打開“查看App打包狀態(tài)”對(duì)話框,可查看打包歷史記錄和狀態(tài):
 如果“制作狀態(tài)”欄顯示“打包成功,下載完成”則表示云端打包完成,可點(diǎn)擊“打開下載目錄”查看下載的安裝包。
已經(jīng)打好的安裝包,允許開發(fā)者在指定天內(nèi)下載指定次數(shù)。超時(shí)或超次后服務(wù)器端會(huì)清除文件。
遇到打包失敗,常見原因是:
 如果使用自用證書,很可能是證書配置錯(cuò)誤。
 如果使用DCloud證書仍然出錯(cuò),很可能是圖片錯(cuò)誤。所有圖片格式必須是標(biāo)準(zhǔn)png,且嚴(yán)格符合分辨率要求。使用其他圖片格式重命名為png會(huì)導(dǎo)致打包失敗!
 其他錯(cuò)誤請(qǐng)參考:?云打包常見錯(cuò)誤排查指南
UI框架
HBuilder并不限制UI框架,開發(fā)者使用任何UI框架均可以。
 不過市面上確實(shí)沒有什么好的手機(jī)App前端框架,DCloud開發(fā)了mui框架,它的性能更高,樣式也更接近原生App,并且mui調(diào)用了HTML5+擴(kuò)展能力,可以實(shí)現(xiàn)更好的體驗(yàn)。
 我們強(qiáng)烈推薦開發(fā)移動(dòng)App的開發(fā)者使用mui框架,詳情請(qǐng)參考文檔中心mui章節(jié)。
 請(qǐng)注意,mui只封裝了部分HTML5Plus Api,學(xué)會(huì)mui框架不代表可以不學(xué)習(xí)HTML5Plus規(guī)范。mui不會(huì)做的很重,只是很有限的通過封裝簡化了常見開發(fā)過程。
開發(fā)資源
API手冊(cè):HTML5+規(guī)范
HelloH5+示例應(yīng)用,應(yīng)用中包括幾乎所有plus API的示例:
- iOS:Appstore中搜索Hello H5+
 - Android:下載地址
 
 獲取Hello H5+的源代碼,在HBuilder中新建移動(dòng)App,選Hello H5+。可以查看所有plus api的調(diào)用樣例代碼。
Hello mui示例應(yīng)用,漂亮且高性能的前端UI框架:
下載頁面
進(jìn)階教程
如果想開發(fā)出接近原生體驗(yàn)的App,請(qǐng)?jiān)L問如下教程:
- 提升HTML5的性能體驗(yàn)系列之一 避免切頁白屏
 - 提升HTML5的性能體驗(yàn)系列之二 列表流暢滑動(dòng)
 - 提升HTML5的性能體驗(yàn)系列之三 流暢下拉刷新
 - 提升HTML5的性能體驗(yàn)系列之四 使用原生UI(nativeUI)
 
三方培訓(xùn)
HTML5中國產(chǎn)業(yè)聯(lián)盟里有專業(yè)的培訓(xùn)機(jī)構(gòu)為HTML5開發(fā)者提供DCloud產(chǎn)品的培訓(xùn)。
 詳見專門文章http://ask.dcloud.net.cn/article/299
發(fā)行和變現(xiàn)服務(wù)
在你的app開發(fā)完畢后,DCloud還提供了發(fā)布平臺(tái),幫助開發(fā)者簡單的完成應(yīng)用推廣頁面,參考http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12936;
 如果開發(fā)者還需要流量變現(xiàn),DCloud提供了廣告平臺(tái),開發(fā)者可以方便的在自己的app中集成廣告,參考http://ask.dcloud.net.cn/article/13084
最后,祝你通過DCloud的免費(fèi)工具,快速完成自己的移動(dòng)App,并獲得更多用戶和變現(xiàn)收益!
總結(jié)
以上是生活随笔為你收集整理的手把手教你开发App(HelloWorld)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
                            
                        - 上一篇: plsql能连mysql吗_明星就连拍结
 - 下一篇: 20多年老码农的IT学习之路