Vincent5588 Wiki

小程序開發工具鏈

閱讀時間約 6 分鐘

小程序開發工具鏈

寫戶外探險小程序需要的開發 / 除錯 / 部署工具——官方 IDE + VS Code 補強 + 山區現場 debugger 三層配置。

三層工具配置

層 1：官方 IDE（必裝）

微信開發者工具

模擬器測得到：UI、邏輯、API call、本地存儲、條件編譯 模擬器測不到：真實 GPS、微信支付、推送、藍牙、相機 / 相簿原生表現

→ 真機測試是必經之路。

層 2：VS Code 補強

minapp（VS Code Extension）

  • 自動補全微信原生 API（wx.xxx）
  • WXML / WXSS 語法高亮 + 跳轉
  • Component prop 提示

裝法：VS Code → Extensions → 搜尋「minapp」→ Install

對 戶外探險旅遊小程序核心功能清單 中常用的 API（wx.getLocation、wx.chooseImage、wx.uploadFile、wx.requestPayment）特別有用——不用一直翻官方文件。

層 3：山區現場 debug

weconsole（運行時 debugger）

  • 在小程序內疊加 Chrome DevTools 風格面板
  • 看 console.log、network 請求、storage 內容
  • 可以在山上——客戶端 debug，不需要連電腦

裝法：以 npm 引入或拉 source。生產環境 disable（透過環境變數）。

對戶外探險特別重要：真的會在山上發現 bug，weconsole 能不依賴電腦現場 debug。

三層配置整體

┌─ 層 1：微信開發者工具（必裝）
│   - 寫代碼 + 模擬器
│   - 上傳 + 提交審核
├─ 層 2：VS Code + minapp
│   - 寫代碼更舒服（自動補全）
│   - 大型 codebase 跳轉
└─ 層 3：weconsole
    - 真機 / 山上 debug
    - 生產環境異常排查

層 1 是唯一強制的。層 2、3 視個人 / 團隊習慣。

對開發階段的工具決定

階段必要工具可選工具
寫 v1（MVP）層 1層 2
v1 上線測試層 1層 3（測試現場 / 山區）
v2 進入離線 / 相簿層 1 + 2層 3（debug 同步問題）
生產維運層 1 + 3—

Mac mini M4 環境特化（v2 補）

開發機是 Mac mini M4 → 工具鏈要選 Apple Silicon (ARM64) 版本，避免 Rosetta 2 翻譯效能折損。

安裝清單

  • 微信開發者工具：官方下載 ARM64 dmg，安裝後在「設置 → 安全設置」開啟「服務端口」（VS Code 連動需要）
  • VS Code：推薦插件 WXML - Language Service、wxss、minapp
  • Node.js：用 brew install node（Apple Silicon 原生）或 nvm 管多版本
  • Git：git --version 確認預裝版本，或 brew install git 升級

Mac mini M4 專屬注意

項目建議
多版本 Node用 nvm 隔離不同專案的 Node 版本（避開全局衝突）
多帳號隔離公司專案 vs 私人專案：在專案目錄各自設 .gitconfig 的 user.email
編譯效能M4 晶片編譯快，建議開啟 框架的「熱重載（Hot Reload）」加速迭代
電源Mac mini 桌機沒電池焦慮，可開「Performance」分析跑久一點

反模式

❌ 用 x86 版工具走 Rosetta 2 — 編譯慢一倍 ❌ 共用全局 Node 版本 — 多專案互相踩踏 ❌ Git config 沒切 — 公司 commit 推到私人帳號

額外工具（依需求）

CI / CD

微信小程序官方有 miniprogram-ci SDK：

  • 命令行工具
  • 可從 GitHub Actions / GitLab CI 自動上傳
  • 對 v2 後自動化部署有用，v1 階段手動上傳就好

性能分析

  • 微信開發者工具內建 Performance tab
  • 看 setData call 數、render 時間、JS 執行
  • 戶外場景特別關注包大小（首次下載速度）和 setData 頻率（電量）

Mock server

對戶外探險：

  • 開發階段假資料：用本地 mock JSON
  • 跟前端合作：建議用 Mock.js 或 JSON Server
  • Demo 給客戶看：可用 imageslr/weapp-library 範例的 mock 結構

跟其他 lib 的位置

工具鏈跟 lib 是不同層：

層例子
工具鏈（本頁）微信開發者工具 / VS Code minapp / weconsole
UI libVant Weapp
State libwenaox 離線狀態管理
影像 libwe-cropper 圖片裁切上傳
框架原生 / Taro

工具鏈是寫代碼的人用的，lib 是寫進 app 的代碼。

反模式

❌ 不裝 minapp 用記事本寫 wxml（自動補全才不會打錯 API 名） ❌ 純靠模擬器測試（GPS / 支付 / 推送都得真機） ❌ 生產環境忘了 disable weconsole（內部資料外露） ❌ CI 用前期就投資（v1 階段手動上傳更靈活）

相關概念

強連結（戶外探險專屬）

深入閱讀（外部資源）

← 回到 wiki

關係圖譜

反向連結