微信小程序使用Vant組件庫

Vant Weapp組件庫：https://youzan.github.io/vant-weapp/#/intro

預覽體驗

 

 

 下面介紹下，如何在微信小程序使用Vant組件庫

1、cd 切換到小程序項目目錄

 

 

 2、初始化一個package.json文件，命令：npm init，一路回車即可

 

 

 項目中的package.json文件

 

 

 3、安裝Vant組件庫，命令：npm i vant-weapp -S --production

 

 

 4、構建npm：在微信開發者工具的菜單欄中找到工具欄的選項“構建npm”

 

 

 構建完會生成一個miniprogram_npm文件夾，里面就是vant-weapp組件庫

 

 

 5、在微信開發者工具的詳情，本地設置里面將“使用npm模塊"勾選上

 

 

 6、引用和使用Vant組件，詳見官方文檔

1）在相應頁面的.json文件里添加引用：

 

{
  "usingComponents": {
    "van-button": "../../miniprogram_npm/vant-weapp/button/index"
  }
}

 

 

2）在WXML文件里直接使用

<view class="container">
    <van-button type="primary">Vant按鈕</van-button>
  </view>

 7、最后，修改 app.json

將 app.json 中的 "style": "v2" 去除，小程序的新版基礎組件強行加上了許多樣式，難以去除，不關閉將造成部分組件樣式混亂。