前言
最近接手了一份使用 uni-app 進行開發的工作,今天才有時間正式開始,在這裡記錄一下使用 HBuilderX 進行 uni-app 開發的除錯環境搭建過程。
下載安裝 HBuilderX
進入 HbuilderX 官網 選擇你需要的版本進行下載安裝,我這裡選的是 App 開發版。
下載安裝安卓模擬器
我使用的是模擬機除錯,所以需要安裝 Android 模擬器。這裡我選擇的是”網易 MuMu 模擬器”,其下載地址在這裡,安裝好之後啟動模擬器,介面如下圖:
使用模擬器執行專案程式碼
使用上面安裝好的 HbuilderX 開啟我們的專案程式碼,然後按照下圖所示步驟選擇 Android 模擬器執行專案:
會彈出這樣一個彈窗:
點選彈窗中的連結下載安裝微信開發者工具,再按照上上圖的步驟執行專案,HbuilderX 終端中顯示資訊為:
在模擬器中檢視頁面,正常顯示。
使用模擬器除錯專案程式碼
既然是開發,那就免不了要進行程式碼除錯。
在上一步的基礎上,點選 HBuilderX 右下角的 “debug” 圖示:
如果之前沒有安裝過 App 除錯工具,那就會自動安裝除錯工具,安裝完成後自動執行,其內容如下:
然後就可以在除錯工具中使用 JavaScript 的斷點除錯等功能了。
總結
以上就是使用 HBuilderX 、微信開發者工具和 Android 模擬器進行 ui-app 開發的除錯環境搭建步驟。
學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!
本作品採用《CC 協議》,轉載必須註明作者和本文連結