微信小程序引入第三方UI（vant-weapp）

轉載自vant-weapp，侵刪

輕量、可靠的小程序 UI 組件庫

🔥 文檔網站（國內）   🌈 文檔網站（GitHub）   🚀 Vue 版

---

預覽

掃描下方小程序二維碼，體驗組件庫示例：

使用之前

使用 Vant Weapp 前，請確保你已經學習過微信官方的 小程序簡易教程 和 自定義組件介紹。

安裝

方式一. 通過 npm 安裝 (推薦)

小程序已經支持使用 npm 安裝第三方包，詳見 npm 支持

# 通過 npm 安裝
npm i @vant/weapp -S --production

# 通過 yarn 安裝
yarn add @vant/weapp --production

# 安裝 0.x 版本
npm i vant-weapp -S --production

方式二. 下載代碼

直接通過 git 下載 Vant Weapp 源代碼，並將dist目錄拷貝到自己的項目中

git clone https://github.com/youzan/vant-weapp.git

使用組件

以按鈕組件為例，只需要在 json 文件中引入按鈕對應的自定義組件即可

{
  "usingComponents": {
    "van-button": "/path/to/vant-weapp/dist/button/index"
  }
}

接着就可以在 wxml 中直接使用組件

<van-button type="primary">按鈕</van-button>

在開發者工具中預覽

# 安裝項目依賴
npm install

# 執行組件編譯
npm run dev

打開微信開發者工具，把vant-weapp/example目錄添加進去就可以預覽示例了。

PS：關於 van-area Area 省市區選擇組件，地區數據初始化可以直接在雲開發環境中導入vant-weapp/example/database_area.JSON文件使用

基礎庫版本

Vant Weapp 最低支持到小程序基礎庫 2.2.3 版本