微信小程序使用vant-weapp的UI庫

首先看一下目錄結構

在miniprogram中執行 首先要有nodejs環境

npm init 

執行完過後會有一系列的回車，在這裏注意一下，在第二的回車的時候有一個版本的選擇。這裏默認是的1.0.0，官網的不是，根據官網的來選擇，否則的話會缺少一些組件，我就遇到過這種問題。

執行完

npm init

npm i @vant/weapp -S --production

生成如下目錄節構

然後在微信小程序中選擇使用npm

然後在app.json中引入，這裏組件是按需引入

  "usingComponents": {
    "van-button": "../../miniprogram/miniprogram_npm/@vant/weapp/button/index",
    "van-cell": "../../miniprogram/miniprogram_npm/@vant/weapp/cell/index",
    "van-row": "../../miniprogram/miniprogram_npm/@vant/weapp/row/index",
   "van-col": "../../miniprogram/miniprogram_npm/@vant/weapp/col/index",
     "van-action-sheet": "../../miniprogram/miniprogram_npm/@vant/weapp/action-sheet/index",
    "van-notice-bar": "../../miniprogram/miniprogram_npm/@vant/weapp/notice-bar/index",
     "van-tree-select": "../../miniprogram/miniprogram_npm/@vant/weapp/tree-select/index",
     "van-card": "../../miniprogram/miniprogram_npm/@vant/weapp/card/index",
     "van-submit-bar": "../../miniprogram/miniprogram_npm/@vant/weapp/submit-bar/index",
     "van-panel": " ../../miniprogram/miniprogram_npm/@vant/weapp/panel/index",
    "van-field": " ../../miniprogram/miniprogram_npm/@vant/weapp/field/index",
      "van-dropdown-menu": "../../miniprogram/miniprogram_npm/@vant/weapp/dropdown-menu/index",
      "van-dropdown-item": "../../miniprogram/miniprogram_npm/@vant/weapp/dropdown-item/index",
      "van-icon": "../../miniprogram/miniprogram_npm/@vant/weapp/icon/index"
  }

這樣就可以在頁面中使用了

 <van-button type="info" wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
  授權登錄
  </van-button>