MogoH5+ 如何真機除錯(一)

MogoH5+之前的教程有點簡略,因此再出一個比較詳細的分段教程來說明如何使用MogoH5+.

續上文 用vue快速開發app的腳手架工具,如果還不瞭解可以先看上一篇.

下載腳手架

首先下載腳手架 腳手架專案地址MogoH5+

Git clone

git clone https://github.com/tyaqing/mogo-h5plus.git
複製程式碼

直接下載

下載地址

下載後把目錄直接匯入到Hbuilder.

執行腳手架

// 1 進入專案主目錄
cd mogo-h5plus
// 2 安裝npm依賴
npm i  // 或者 yarn
// 3 除錯執行
npm start

// 執行結果如下
ℹ ｢wds｣: Project is running at http://192.168.199.155:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wdm｣: Hash: e597725cca065f694fbd
Version: webpack 4.10.2
Time: 4959ms
複製程式碼

真機除錯

將列印出來的ip地址,我們列印出來的是http://192.168.199.155:8080/,將這個填入頁面入口.

然後使用Hbuilder基座進行除錯測試.

常見問題

常見問題一般來說就是白屏問題,或者頁面不存在,可能有以下幾種情況

1. 電腦和除錯的手機需要在同一個區域網下面
2. 腳手架會自動熱更新,無需在冊真機除錯
3. 安裝軟體後可以直接不插線除錯,因為同在區域網下
4. npm start後如果區域網ip地址有變,請同時在manifest.json中修改頁面入口

注意

這個針對的是除錯,如果要釋出,請看如何釋出打包app