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

Posted 2022-12-07 春风又一季

首先看一下目录结构

在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>