前言

最近接手了一份使用 uni-app 進行開發的工作，今天才有時間正式開始，在這裡記錄一下使用 HBuilderX 進行 uni-app 開發的除錯環境搭建過程。

下載安裝 HBuilderX

進入 HbuilderX 官網 選擇你需要的版本進行下載安裝，我這裡選的是 App 開發版。

下載安裝安卓模擬器

我使用的是模擬機除錯，所以需要安裝 Android 模擬器。這裡我選擇的是”網易 MuMu 模擬器”，其下載地址在這裡，安裝好之後啟動模擬器，介面如下圖：

使用模擬器執行專案程式碼

使用上面安裝好的 HbuilderX 開啟我們的專案程式碼，然後按照下圖所示步驟選擇 Android 模擬器執行專案：

會彈出這樣一個彈窗：

點選彈窗中的連結下載安裝微信開發者工具，再按照上上圖的步驟執行專案，HbuilderX 終端中顯示資訊為：

在模擬器中檢視頁面，正常顯示。

使用模擬器除錯專案程式碼

既然是開發，那就免不了要進行程式碼除錯。

在上一步的基礎上，點選 HBuilderX 右下角的 “debug” 圖示：

如果之前沒有安裝過 App 除錯工具，那就會自動安裝除錯工具，安裝完成後自動執行，其內容如下：

然後就可以在除錯工具中使用 JavaScript 的斷點除錯等功能了。

總結

以上就是使用 HBuilderX 、微信開發者工具和 Android 模擬器進行 ui-app 開發的除錯環境搭建步驟。

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！