HBuilder開發App教程02-環境搭建,HelloWorld以及真機調試


環境搭建

前言

用HBuilder做開發,其實可以說是最簡單的一種環境搭建了,甚至可以說沒有環境需要搭建,

想想android開發的時候,相當痛苦,下載各種sdk,而且都需要翻牆,苦不堪言。

用HBuilder做開發,只需要基礎的java環境,其余的android和ios環境統統不需要。

HBuilder可以做到這一點,是因為:

1.將打包放到的雲端,免去了本地搭建環境進行打包的痛苦,

2.將調試直接設置為真機調試,免去了各種模擬器調試的痛苦。

 

java環境

只需要最基礎的java環境,也就是cmd下可以運行java和javac即可,

具體教程請自行百度之,都會有很詳細的教程,或者找個java開發給搭建。

 

下載安裝HBuilder

請在這里下載HBuilder:http://www.dcloud.io/

下載完成后請教zip包解壓縮到自定義的目錄(windows),

並將該目錄下的HBuilder.exe發送快捷方式到桌面。

2.png

雙擊該快捷方式,

第一次打開HBuilder需要注冊,還請注冊,幾分鍾搞定,

登錄后即可看到HBuilder主界面:

3.png

使用過eclipse或者myeclipse的開發人員應該很熟悉這個界面吧,

對,HBuilder就是基於eclipse做的二次開發ide,

所以大部分eclipse的操作,快捷鍵都可以直接挪過來使用。

 

HelloWorld

介紹

稍微介紹下HBuilder可以做的事情:

1.前端開發

各種快捷鍵,各種提示,最好的一點是對所有html,css,js的各瀏覽器兼容性都有提示

2.web開發

脫胎自eclipse,自然做java web開發不成問題

3.app開發

這個是重頭戲,編輯,在線打包,真機調試

 

新建項目

點擊主界面的新建移動app,或者通過項目管理器界面右鍵新建,或者ctrl+n,a新建,

你會看到如下界面:

4.png

1.填寫應用名稱

類似eclipse中的項目名稱

2.選擇位置

3.選擇模版

空模版

mui項目,自動引入mui相關文件

hello h5+項目,和官網提供的nativejs示例app相同

hello mui,和官網提供的mui示例相同

4.點擊完成

這里選擇hello mui模版,你也可以選擇hello h5+模版,以后開發大部分選擇mui項目這個模版。

 

文件結構

新建完成后,左側項目管理器中會出現如下目錄結構:

5.png

做前端開發的同學一定很熟悉了吧?

主要注意的是manifest.json,

很多app相關配置:app圖標,啟動頁,權限等都在這里配置。

 

end

就這么簡單,你已經做完一個HelloWorld了,剩下的就是看效果了。

 

真機調試

連接手機

請用數據線,而不是電源線連接手機,

ios需要下載一個調試插件,android可以直接調試,

絕對不需要額外的環境,不論是ios還是android,

選中項目,或者打開任意項目中的文件時,

點擊菜單--運行--真機運行--在xx設備上運行,

或者直接ctrl+r直接運行,

當你修改過文件后也可以直接ctrl+r,app就會重啟。

 

連接失敗

當你遇到連接失敗的時候,

android只需要隨便安裝一個手機助手,手機助手連接成功即可,

ios請參考說明。

 

run

ctrl+r

然后享受你用HBuilder做的第一個app吧。

6.jpg

 

更多教程:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM