uniapp真機調試詳解

一、環境準備

在正式開始uniapp真機調試之前，我們需要做好一些環境準備。首先，確保你的開發環境已經安裝好了uni-app命令行工具。如果沒有安裝，可以通過以下命令進行安裝：

npm install -g uni-cli

其次，需要確保你的真機設備和電腦處於同一個局域網內，並且你的電腦可以訪問到真機設備。可以通過打開瀏覽器輸入設備IP地址進行測試。

uniapp默認是關閉了調試功能的，需要手動開啟。在開發調試過程中，你需要在uniapp的manifest.json文件中設置“debug:true”屬性，如下所示：

{
  "debug": true,
  "pages":[
    //...
  ]
}

注意，在發布正式版時，一定要將“debug:true”設置為“debug:false”，否則會出現安全問題。

使用USB連接手機實現調試，需要手機支持USB調試功能。如果你的手機系統是Android，可以在開發者選項中找到該選項進行打開。連接好USB後，執行以下命令進行編譯：

npm run dev:app-plus

在編譯成功後，即可將應用安裝到手機上，並打開應用，然後在瀏覽器中輸入“chrome://inspect/#devices”，選擇對應的應用，點擊“inspect”按鈕即可進行調試。

如果不想使用USB線進行調試，可以選擇使用WiFi來實現。首先需要在manifest.json文件中配置“debug”:true，並運行以下命令進行編譯：

npm run dev:app-plus-h5 --port=端口號

然後瀏覽器中輸入“localhost:端口號/debug.html”進入調試界面，選擇“debug一機調試”，輸入手機IP地址，點擊“連接”按鈕即可進行調試。需要注意的是，在手機上需要同時打開該應用，並保證處於同一個局域網內。

uniapp支持將應用編譯成小程序，進行調試也非常簡單。首先需要在微信開發者工具中進行設置，勾選“空安全域名”，並輸入uniapp的調試地址，如下所示：

https://localhost:端口號

然後在uniapp的項目根目錄中運行以下命令：

npm run dev:mp-weixin

接着在微信開發者工具中導入該小程序，即可在開發者工具中進行調試。

通過本文的介紹，你已經學會了使用USB、WiFi和小程序等多種方式進行uniapp真機調試。通過這些方法，可以方便地進行調試工作，提高開發效率。

原創文章，作者：RHLOV，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/369210.html