Skip to content

📱 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構建的企業級移動端解決方案