📱 Vant Weapp - 小程式開發的得力助手
讓小程式開發變得簡單而優雅!Vant Weapp 是有贊行動端元件庫 Vant 的微信小程式版本,兩者基於相同的視覺規範,提供一致的 API 介面,助力開發者快速搭建小程式應用程式。
無論你是小程式開發新手還是資深開發者,Vant Weapp 都能讓你的開發效率翻倍!它不僅繼承了 Vant 的優秀基因,更針對小程式環境進行了深度最佳化,讓你在小程式的世界裡也能享受到現代化元件庫的便利。
✨ 核心特性
- 🚀 元件豐富 - 70+ 個高品質元件,涵蓋行動端主流場景,從基礎到複雜,應有盡有
- 🚀 型別安全 - 使用 TypeScript 編寫,提供完整的型別定義,讓程式碼更健壯
- 🚀 零依賴 - 不依賴第三方 npm 套件,輕量純淨,告別依賴地獄
- 💪 主題定製 - 支援主題定製,內建 700+ 個主題變數,打造專屬視覺風格
- 💪 暗黑模式 - 原生支援暗黑模式,跟上時代潮流
- 💪 國際化 - 支援國際化,內建 30+ 種語言包,走向世界不是夢
- 📖 文件完善 - 提供豐富的中英文文件和元件範例,學習無障礙
- 🍭 建置靈活 - 支援 npm 建置模式和原生建置模式,適應不同開發習慣
🚀 快速安裝
方式一:透過 npm 安裝(推薦)
選擇你喜歡的套件管理器,一鍵安裝即可:
bash
# 透過 npm 安裝
npm i @vant/weapp -S --production
# 透過 yarn 安裝
yarn add @vant/weapp --production
# 透過 pnpm 安裝
pnpm add @vant/weapp --production方式二:下載程式碼
如果你更喜歡傳統方式,也可以直接下載原始碼:
bash
git clone https://github.com/youzan/vant-weapp.git然後將 dist 目錄複製到你的專案中即可。
🎯 使用元件
使用 Vant Weapp 就像搭積木一樣簡單!以按鈕元件為例,只需要在 json 檔案中引入按鈕對應的自訂元件即可。
json
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}接著就可以在 wxml 中直接使用元件:
xml
<van-button type="primary">按鈕</van-button>就是這麼簡單!一個漂亮的按鈕就出現在你的小程式裡了。
📱 線上體驗
想要快速體驗 Vant Weapp 的魅力?掃描下方小程式碼,立即感受元件庫的強大功能:
[小程式碼圖片]
🔗 相關連結
📚 相關內容
- Vant 4 - Vue 3 行動端元件庫 - 了解最新版本的 Vant
- Vant 3 - Vue 3 元件庫 - 穩定可靠的 Vue 3 版本
- Vant 2 - Vue 2 元件庫 - 經典的 Vue 2 版本
- 快速開始 - 開始你的 Vant 之旅
- 設計規範 - 了解設計理念和規範
- 常見問題 - 解決開發中的疑惑