欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-05 10:52:26
首先看一下目录结构在miniprogram中执行 首先要有nodejs环境npm init 执行完过后会有一系列的回车,在这里注意一下,在第二的回车的时候有一个版本的选择。这里默认是的1.0.0,官网的不是,根据官网的来选择,否则的话会缺少一些组件,我就遇到过这种问题。执行完npm initnpm i @vant/weapp -S --production生成如下目录节构然后在微信小程序中选择使用npm然后在app.json中引入,这里组件是按需引入 "usin....

首先看一下目录结构

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

在miniprogram中执行 首先要有nodejs环境

npm init 

执行完过后会有一系列的回车,在这里注意一下,在第二的回车的时候有一个版本的选择。这里默认是的1.0.0,官网的不是,根据官网的来选择,否则的话会缺少一些组件,我就遇到过这种问题。

执行完

npm init

npm i @vant/weapp -S --production

生成如下目录节构

微信小程序使用vant-weapp的UI库
然后在微信小程序中选择使用npm

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

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

本文地址:https://blog.csdn.net/qq_40183281/article/details/107198759