手把手教你开发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。使用以下命令生成證書：
-keystorehelloworld.keystore?表示生成的證書，可以加上路徑（默認在用戶主目錄下）；
-aliashelloworld?表示證書的別名是helloworld；
-keyalgRSA?表示采用的RSA算法；
-validity10000?表示證書的有效期是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，并獲得更多用戶和變現收益！
總結
以上是生活随笔為你收集整理的手把手教你开发App（HelloWorld）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： plsql能连mysql吗_明星就连拍结
- 下一篇： 20多年老码农的IT学习之路