uni-app 模擬機除錯環境搭建

程式設計三昧發表於2022-02-23

nui-app.001

前言

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

下載安裝 HBuilderX

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

image-20220223162042871

下載安裝安卓模擬器

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

image-20220223163605739.png

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

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

image-20220223152939476.png

會彈出這樣一個彈窗:

image-20220223162643633

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

image-20220223163941602

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

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

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

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

image-20220223164326121

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

image-20220223164525338

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

總結

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

學習有趣的知識,結識有趣的朋友,塑造有趣的靈魂!

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

本作品採用《CC 協議》,轉載必須註明作者和本文連結

相關文章