nui-app.001

前言

最近接手了一份使用 uni-app 進(jìn)行開發(fā)的工作，今天才有時(shí)間正式開始，在這里記錄一下使用 HBuilderX 進(jìn)行 uni-app 開發(fā)的調(diào)試環(huán)境搭建過程。

下載安裝 HBuilderX

進(jìn)入 HbuilderX 官網(wǎng) 選擇你需要的版本進(jìn)行下載安裝，我這里選的是 App 開發(fā)版。

image-20220223162042871

下載安裝安卓模擬器

我使用的是模擬機(jī)調(diào)試，所以需要安裝 Android 模擬器。這里我選擇的是”網(wǎng)易 MuMu 模擬器”，其下載地址在這里，安裝好之后啟動(dòng)模擬器，界面如下圖：

image-20220223163605739.png

使用模擬器運(yùn)行項(xiàng)目代碼

使用上面安裝好的 HbuilderX 打開我們的項(xiàng)目代碼，然后按照下圖所示步驟選擇 Android 模擬器運(yùn)行項(xiàng)目：

image-20220223152939476.png

會(huì)彈出這樣一個(gè)彈窗：

image-20220223162643633

點(diǎn)擊彈窗中的鏈接下載安裝微信開發(fā)者工具，再按照上上圖的步驟運(yùn)行項(xiàng)目，HbuilderX 終端中顯示信息為：

image-20220223163941602

在模擬器中查看頁(yè)面，正常顯示。

使用模擬器調(diào)試項(xiàng)目代碼

既然是開發(fā)，那就免不了要進(jìn)行代碼調(diào)試。

在上一步的基礎(chǔ)上，點(diǎn)擊 HBuilderX 右下角的 “debug” 圖標(biāo)：

image-20220223164326121

如果之前沒有安裝過 App 調(diào)試工具，那就會(huì)自動(dòng)安裝調(diào)試工具，安裝完成后自動(dòng)運(yùn)行，其內(nèi)容如下：

image-20220223164525338

然后就可以在調(diào)試工具中使用 JavaScript 的斷點(diǎn)調(diào)試等功能了。

總結(jié)

以上就是使用 HBuilderX 、微信開發(fā)者工具和 Android 模擬器進(jìn)行 ui-app 開發(fā)的調(diào)試環(huán)境搭建步驟。

學(xué)習(xí)有趣的知識(shí)，結(jié)識(shí)有趣的朋友，塑造有趣的靈魂！

大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號(hào)是『編程三昧』，歡迎關(guān)注，希望大家多多指教！