執行uni-app到微信開發者工具

D 發表於 2021-09-01

1、工具及環境

  • HBuilder X
  • 微信開發者工具
  • Node.js,測試:node -v(node安裝) 和 npm -v(自帶的npm也安裝成功)

2、建立uni-app專案:

在點選工具欄裡的檔案 -> 新建 -> 專案,選擇uni-app,輸入工程名,如:hello-uniapp,點選建立,即可成功建立 uni-app。點選模板裡的 Hello uni-app 即可,如下圖:

執行uni-app到微信開發者工具

一個uni-app專案,預設包含如下目錄及檔案:

執行uni-app到微信開發者工具

3、執行uni-app到微信開發者工具

1、填寫微信小程式的AppID:

執行uni-app到微信開發者工具

2、在HBuilder X,配置 ‘微信開發者工具’ 的安裝路徑:

執行uni-app到微信開發者工具

3、在微信開發者工具中,通過 設定 》安全皮膚,開啟微信開發者工具的服務埠:

執行uni-app到微信開發者工具

4、在HBuilder X,點選執行 -> 執行到小程式模擬器 -> 微信開發者工具,將當前uni-app專案編譯之後,自動執行到微信開發者工具中,從而方便檢視專案效果與除錯:

執行uni-app到微信開發者工具

微信開發者工具會將uni-app專案程式碼自動編碼為微信小程式識別的程式碼。非常方便。

注意:編譯執行uni-app前,在專案目錄下執行:npm i。

每個專案都有一個package.json檔案,裡面有很多元件資訊。使用npm i將按照package.json安裝所需要的元件放在生成的node_modules資料夾中,專案下的每一個檔案中都可以通過import引入node_modules的元件來加以使用。

4、其他問題

1、使用git管理專案:在專案根目錄中新建 .gitignore 忽略檔案 , 並配置如下:

node_modules/
dist/
unpackage/dist\

在專案根目錄中新建 .gitignore 忽略檔案 , 並配置如下:

注意:此時我們忽略了 unpackage 目錄中僅有的 dist 目錄 , 因此預設情況下 , unpackage 目錄不會被 git 追蹤。此時, 為了讓 git 能夠正常追蹤 unpackage 目錄 , 按照慣例 , 我們可以在 unpackage 目錄下建立一個叫做 .gitkeep 的檔案進行佔位

2、微信開發工具執行小程式報錯:WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.Module object

解決方法:詳情 》本地設定 》除錯基礎版本調為:2.14.4 \color{red}{2.14.4}2.14.4

3、npm run dev

當我們執行npm run dev時,系統就會跑到package.json檔案中執行scripts中對應的指令碼。如下圖,可以看到start對應的是npm run dev

執行uni-app到微信開發者工具

4、在 src -> common -> config.js檔案中,修改服務地址