1. Nox 模擬器

1). 無腦式安裝

Nox模擬器平板界面.png

2). 屏幕修改

點擊右側上方的設置按鈕，在系統設置中選擇手機版，點擊保存并重啟。

Nox設置界面.png

3). 端口設置

Nox模擬器默認端口：62001

2. HBuilderX

1). 點擊右側的Download，并選擇對應平臺的App開發版下載即可。

HBuilderX.png HBuilderX下載界面.png

2). 安裝

**Windows: ** 解壓后雙擊exe文件打開即可。

**Mac: ** 將圖標移入Applications中即可。

HBuilderX_Mac.png

3). 界面

HBuilderX界面.png

3. 使用

1). 文件 -> 新建 -> 項目

新建項目.png

2). 選擇5+App，輸入項目名，更改項目位置

配置項目信息.png

3). 首頁文件內容

index.html文件.png

4). 運行 -> 運行到瀏覽器 -> Chrome

瀏覽器預覽.png

預覽效果：

效果.png

4. 手機運行

1). 端口設置

運行 -> 運行到手機或模擬器 -> Android模擬器端口設置

模擬器端口設置.png

Nox模擬器默認端口為：62001

62001端口.png

2). 運行

如果在【運行到手機或模擬器】中無Nox模擬器，請重啟Nox模擬器嘗試，或提示下載真機調試基座，請下載后嘗試。

運行Android設備.png

3). 效果

效果.png

4). 真機調試

首先用電腦連接一臺真實的設備，運行 -> 運行到手機或模擬器，選擇剛剛連接的真機，若已連接真機，但此處并未顯示，請打開【開發者選項】或下載【豌豆莢】進行連接。

真機.png

5+App入門指南

Html5+ 規范

總結

以上是生活随笔為你收集整理的HBuilderX App开发环境搭建的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。