Vant Weapp
有讚（Youzan）出品的微信小程序 UI 組件庫，戶外探險小程序的 UI 主力。70+ 組件、設計乾淨、過審友善。
為什麼選它
對戶外探險小程序，UI 層的需求重點是：
- 覆蓋面廣（list / form / modal / stepper / picker / image grid 等都要）
- 過審風險低（自家寫 component 容易被退件）
- 輕（包大小要小，戶外場景不該下載很久）
- 更新活（微信平台 API 變動時要跟得上）
Vant Weapp 全部勝出。12.3k stars，有讚商業化使用，更新頻繁。
GitHub
https://github.com/youzan/vant-weapp
對 戶外探險旅遊小程序核心功能清單 的對應
| 功能 | 用什麼 Vant 組件 |
|---|---|
| #1 出團列表 | Card + List |
| #1 行程詳情 | Image + Tag + Cell |
| #2 行前 Q&A | Collapse（FAQ 摺疊）+ ContactCard（私訊入口） |
| #3 報名表單 | Form + Field + Picker（日期） |
| #4 行前確認流程 | Stepper（多步進度）+ Form + Checkbox |
| #5 行程公告 | NoticeBar + Notify（重要變動） |
| #6 領隊資歷頁 | Card + Tab + Image |
| #11 裝備清單 | Checkbox + Cell |
| 12 天氣顯示 | Cell + Icon |
安裝
npm i @vant/weapp -S --production或不用 npm，直接拉 source 進 miniprogram_npm/。
詳見：https://vant-contrib.gitee.io/vant-weapp/#/quickstart
在 app.json 註冊
{
"usingComponents": {
"van-button": "@vant/weapp/button/index",
"van-cell": "@vant/weapp/cell/index"
}
}戶外探險專屬的設計考量
圖片組件（重要）
戶外照片是核心內容，但 Vant 的 Image 組件不會自動壓縮——必須在上傳端用 we-cropper 圖片裁切上傳 + Canvas 壓縮。Vant Image 只負責顯示。
表單組件
Form 配 Picker 處理日期 / 緊急聯絡人關係下拉等。避開複雜的自訂 input，Vant 標準組件審核風險最低。
Notice 組件
NoticeBar（跑馬燈）跟 Notify（彈窗）對應 戶外探險旅遊小程序核心功能清單 的 #5 行程公告。離線時不能 push，靠出發前 cache 顯示。
vs Weui-wxss
| Vant Weapp | Weui-wxss | |
|---|---|---|
| stars | 12.3k | 12.4k |
| 風格 | 微信生態通用設計 | 微信官方 UI 規範 |
| 組件數 | 70+ | 15+ |
| 客製空間 | 大（CSS 變數豐富） | 小（盡量原生風格） |
| 戶外場景適合度 | ✅ 主力 | 補充用 |
→ Vant 為主，遇到 Vant 沒有的標準微信元件補 Weui-wxss。
反模式
❌ 自寫所有 component（過審地雷） ❌ 用其他組件庫（如 ColorUI 風格太花，商業氣不足） ❌ 直接改 Vant source 文件（next 升級會 conflict，要透過 CSS variable）
何時不用
- 想做 design system 級客製化 → 改用 Weui-wxss + 自寫補充
- 包大小極度敏感 → 看哪些組件可以剝（Vant 支援按需引入）
相關概念
強連結（戶外探險專屬）
- 小程序開發 lib 選型 — 為什麼選 Vant
- 戶外探險旅遊小程序核心功能清單 — 15 項功能對應 Vant 組件
- 微信小程序框架選擇 — 原生 + Vant 的組合
推斷連結
深入閱讀（外部資源）
- 官方文件：https://vant-contrib.gitee.io/vant-weapp/
- GitHub：https://github.com/youzan/vant-weapp
- 原文：微信小程序開發指南 - 旅遊攝影團
← 回到 wiki