小程序開發 lib 選型
從 awesome-wechat-weapp 裡挑出對戶外探險小程序最相關的 lib。最小依賴 + 最大實用——3 個 dep + 1 個 devDep 起步。
設計原則
戶外探險小程序的 lib 選型有 3 個約束：
- 最小 surface 過審：微信小程序審核對 lib 來源敏感，越少 dep 越好
- 離線優先：選的 lib 不能假設網路恆在（多日離線行程設計）
- 電量友好：不能背景持續耗電（戶外探險旅遊小程序的挑戰 維度 2）
起步 dependencies
{
"dependencies": {
"@vant/weapp": "^1.10.0",
"wenaox": "latest",
"we-cropper": "latest"
},
"devDependencies": {
"minapp-vscode": "latest"
}
}3 個生產 dep，分別對應 UI / 狀態 / 影像三個維度。
8 + 7 個功能對應 lib
對 戶外探險旅遊小程序核心功能清單 的 15 項功能：
| # | Feature | 推薦 lib | 為什麼 |
|---|---|---|---|
| 1 | 出團列表 + 行程詳情 | Vant Weapp | List / Card 組件 |
| 2 | 行前 Q&A | Vant Weapp Form / Collapse | FAQ + 私訊入口 |
| 3 | 報名 + 微信支付 | 原生 wx.requestPayment() | 不用 lib |
| 4 | 行前確認流程 | Vant Weapp Stepper / Form | 5 步表單 |
| 5 | 行程公告 | 原生 wx.subscribeMessage() | 一次性訂閱訊息，配 wenaox 離線狀態管理 cache |
| 6 | 領隊資歷頁 | Vant Weapp Card | 標準展示 |
| 7 | SOS（離線） | 原生 + wenaox 離線狀態管理 | outbox queue 模式 |
| 8 | 離線地圖 + 軌跡 | 原生 wx.openLocation() + wenaox 離線狀態管理 | 軌跡寫本地時序 buffer |
| 9 | 活動相簿 | we-cropper 圖片裁切上傳 + Canvas 壓縮 | 上傳前壓 + 裁 |
| 10 | 團員簽到 | 原生 wx.scanCode() | QR Code 掃描 |
| 11 | 裝備清單 | Vant Weapp Checkbox | 簡單 list |
| 12 | 天氣整合 | 第三方 API（自己接） | 沒 lib，呼叫和風天氣等 |
| 13 | 費用分擔 | Vant Weapp Form | v3 才做 |
| 14 | 過往團員社群 | — | v3 才做 |
| 15 | 保險方案整合 | — | 商業合作，無 lib |
→ 3 個 lib 涵蓋 11/15 功能。剩下 4 個用原生 API 或第三方服務。
框架層的選擇
微信小程序框架選擇 決策維持「原生為主」，加 Vant Weapp 作為 UI 層。完整對照：
| 層 | 選什麼 | 用途 |
|---|---|---|
| 框架 | 原生（WXML/WXSS/JS） | 應用骨架 |
| UI 組件 | Vant Weapp | 70+ 組件，過審友善 |
| 狀態管理 | wenaox 離線狀態管理 | offline outbox queue |
| 影像處理 | we-cropper 圖片裁切上傳 + Canvas（原生） | 裁 + 壓 |
| 開發工具 | 微信開發者工具 + 小程序開發工具鏈 | IDE + debugger |
不選 / 跳過的
| Lib / Framework | 為什麼不選 |
|---|---|
| uni-app / Taro | 跨端框架，戶外專案只做小程序不需要 |
| mpvue | 已停止維護 |
| chameleon / kbone / Remax | 過度設計 |
| redux / mobx 直接用 | 對小程序太重，wenaox 離線狀態管理 更輕 |
| 任何 2019 後沒更新的 repo | 兼容性風險 |
投資時序
| 階段 | 加哪些 lib |
|---|---|
| MVP（v1） | Vant Weapp + 原生 API（不需 wenaox / we-cropper） |
| v2 補強 | + wenaox 離線狀態管理（做離線地圖、SOS、相簿） |
| v2 影像 | + we-cropper 圖片裁切上傳（活動相簿） |
| v3 進階 | 視需求加（如即時聊天 webview、AI Q&A 推薦） |
→ MVP 階段不投資任何離線 lib——驗證商業模式優先，技術深度 v2 再做。
跟 戶外探險旅遊小程序的挑戰 的對應
| 挑戰 | 對應的 lib 解法 |
|---|---|
| 訊號（多日離線） | wenaox 離線狀態管理 的 outbox queue |
| 電量（GPS / 推送） | 原生 API + 不背景輪詢 |
| 安全（SOS / 緊急） | 原生 + outbox 寫本地 |
| 法律（同意書離線） | Vant Weapp Form + 本地 cache |
| 信任（內容呈現） | Vant Weapp Card + we-cropper 圖片裁切上傳 |
業界範例 repo（抄作業）
| Repo | 用途 |
|---|---|
| imageslr/weapp-library | 30+ 頁完整範例 + mock server |
| WeTravel | 景點預約模板，騰訊雲開發 |
相關概念
強連結（hub 指各 lib entity）
- Vant Weapp — UI 組件主力
- wenaox 離線狀態管理 — offline state（v2 起）
- we-cropper 圖片裁切上傳 — 影像處理（v2 起）
- 小程序開發工具鏈 — IDE / debugger / VS Code
強連結（戶外探險專屬）
- 戶外探險旅遊小程序核心功能清單 — 15 項功能對應的 lib
- 戶外探險旅遊小程序的挑戰 — 5 維度反推 lib 需求
- 微信小程序框架選擇 — 框架層決策（lib 在框架之上）
- 多日離線行程設計 — wenaox 服務的核心場景
深入閱讀（外部資源）
- awesome-wechat-weapp — 完整 lib / 工具清單
- 微信小程序官方文件
← 回到 wiki