Vant Weapp是有赞前端团队开源的移动端微信小程序组件库，组件丰富，生态活跃，应该是目前最火的微信小程序UI组件库

一、安装

1、npm安装

npm i @vant/weapp -S --production

2、修改app.json

将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱

3、修改project.config.json

开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可

4、构建npm包

打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

npm构建

二、使用

以 Button 组件为例，只需要在app.json或index.json中配置 Button 对应的路径即可。

所有组件文档中的引入路径均以 npm 安装为例，如果你是通过下载源代码的方式使用 @vant/weapp，请将路径修改为项目中 @vant/weapp 所在的目录。

// 通过 npm 安装
// app.json
"usingComponents": {"van-button": "@vant/weapp/button/index"
}

组件使用

引入组件后，可以在 wxml 中直接使用组件

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

三、常用组件事例

1、按钮

引入

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

按钮类型

// 支持default、primary、info、warning、danger五种类型，默认为default
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

朴素按钮

// 通过plain属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为白色
<van-button plain type="primary">朴素按钮</van-button>
<van-button plain type="info">朴素按钮</van-button>

按钮事例

2、Icon图标

组件引入

"usingComponents": {
  "van-icon": "@vant/weapp/icon/index"
}

基本使用

<van-icon name="close" />
<van-icon name="https://b.yzcdn.cn/vant/icon-demo-1126.png" />

3、时间选择器

组件引入

"usingComponents": {
  "van-datetime-picker": "@vant/weapp/datetime-picker/index"
}

基本使用

<van-datetime-picker
  type="datetime"
  value="{{ currentDate }}"
  min-date="{{ minDate }}"
  max-date="{{ maxDate }}"bind:input="onInput"
/>
Page({
  data: {
    minHour: 10,
    maxHour: 20,
    minDate: new Date().getTime(),
    maxDate: new Date(2019, 10, 1).getTime(),
    currentDate: new Date().getTime(),
  },

  onInput(event) {
    this.setData({
      currentDate: event.detail,
    });
  },
});

时间选择组件

4、Field组件

组件引入

"usingComponents": {
  "van-field": "@vant/weapp/field/index"
}

基本使用

<van-cell-group>
  <van-field
    value="{{ value }}"
    placeholder="请输入用户名"
    border="{{ false }}"
    bind:change="onChange"
  />
</van-cell-group>
Page({
  data: {
    value: '',
  },

  onChange(event) {
    // event.detail 为当前输入的值
    console.log(event.detail);
  },
});

Field组件

还有很多实用的组件，细节上大家可以去官网查看，我平时项目的业务开发基本上都能满足

觉得效果不错的请帮忙加个关注点个赞，每天分享前端实用开发技巧