微信小程序踩坑记——Vant Weapp组件的使用

组件名称

vant weapp

官方文档：Vant Weapp文档

预览

组件介绍

Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。

Vant 是有赞的一套移动端组件库，而Vant Weapp则是Vant的小程序版本，使用体验相对来说还是很不错的。

下载安装

Vant 组件的使用方法在文档里面写得很清楚了。可以通过使用npm来安装，也可以下载vant源文件，将源文件中的dist文件夹直接放到自己项目的根目录即可。

npm安装

​x
1
# npm
2
npm i vant-weapp -S --production
3
​
4
# yarn
5
yarn add vant-weapp --production

git clone 安装

使用组件

以按钮组件为例，只需要在 json 文件中引入按钮对应的自定义组件即可。如果想全局使用的话，在那就在app.json文件里放入对应组件即可。示例如下：

6
1
// app.json
2
{
3
  "usingComponents": {
4
    "van-button": "/path/to/vant-weapp/dist/button/index"
5
  }
6
}

接着就可以在 wxml 中直接使用组件

3
1
<!--index.wxml-->
2
​
3
<van-button type="primary">按钮</van-button>

基础库版本

需要注意的是，Vant Weapp 最低支持到小程序基础库 1.9.9 版本

需要注意的地方

由于vant 主要是组件，因此需要用的地方直接按照规则引入即可。但需要注意的是，vant组件为方便大家使用，将一些常用的参数与接口都开放出来。

我在开发的时候用到了vant组件里的时间选择器，尽管微信官方文档已经提供了picker组件，但是由于我没有找到可以修改那原谅绿的办法，因此选择了放弃，从而投奔了vant组件。这里就拿vant 组件库里的时间选择器来举例说明一下使用vant组件需要注意的地方。

前言

文档中建议该组件和弹出层一起使用，这里就和弹出层一起使用。

引入

引入的时候需要注意路径，由于我这里是将dist文件直接复制到了与app.json同级目录，因此，这里只需要从dist开始即可。

7
1
// app.json
2
{
3
 "usingComponents": {
4
    "van-datetime-picker": "/dist/datetime-picker/index", 
5
    "van-popup": "/dist/popup/index"
6
  },
7
}

22
1
<!--index.wxml-->
2
​
3
// 触发时间选择器
4
<button bindtap="showTimePicker">时间选择器</button>
5
​
6
<!--弹出层-->
7
<van-popup 
8
    show="{{ show }}" 
9
    bind:close="onClose">
10
    position="bottom"            // 底部弹出 (复制代码时将这条注释删掉)
11
    overlay="{{ true }}"         // 显示黑色遮罩层 (复制代码时将这条注释删掉)
12
    
13
    <!--将时间选择器作为内容放在弹出层里面-->
14
    <van-datetime-picker
15
        type="time"
16
        value="{{ currentDate }}"
17
        min-hour="{{ minHour }}"
18
        max-hour="{{ maxHour }}"
19
        bind:input="onInput"
20
    />
21
</van-popup>
22
​

27
1
// page.js
2
​
3
Page({
4
  data: {
5
    show: false,                        // 弹出层的控制开关
6
    currentDate: '12:00',
7
    minHour: 9,
8
    maxHour: 23,
9
  },
10
​
11
  // 时间选择器绑定输入
12
  onInput(event) {
13
    this.setData({
14
      currentDate: event.detail;
15
    });
16
  },
17
   // 关闭弹出层
18
   onClose() {
19
    this.setData({ show: false });
20
  }
21
  // 更改弹出层开关显示时间选择器
22
  showTimePicker(){
23
      this.setData({
24
          show: true,
25
      })
26
  }
27
});

最终效果

参数的使用（Props）

每一个组件内都有相应可自定义修改的参数，参数的使用，直接在wxml组件部分直接加上即可。

例如在上面的基础上加上一个顶部栏标题，选项格式化，和一个确认按钮事件

Props

Events

24
1
<!--index.wxml-->
2
​
3
// 触发时间选择器
4
<button bindtap="showTimePicker">时间选择器</button>
5
​
6
<!--弹出层-->
7
<van-popup 
8
    show="{{ show }}" 
9
    bind:close="onClose">
10
    position="bottom"             
11
    overlay="{{ true }}" 
12
    
13
    <!--将时间选择器作为内容放在弹出层里面-->
14
    <van-datetime-picker
15
        type="time"
16
        value="{{ currentDate }}"
17
        min-hour="{{ minHour }}"
18
        max-hour="{{ maxHour }}"
19
        bind:input="onInput"
20
        title="testTimePicker"
21
        bind:confirm="timeConfirm"
22
        formatter="{{ formatter }}"
23
    />
24
</van-popup>

44
1
// page.js
2
​
3
Page({
4
  data: {
5
    show: false,                        // 弹出层的控制开关
6
    currentDate: '12:00',
7
    minHour: 9,
8
    maxHour: 23,
9
      
10
    // 时间格式化
11
    formatter(type, value) {
12
      if (type === 'hour') {
13
        return `${value}小时`;
14
      } else if (type === 'minute') {
15
        return `${value}分钟`;
16
      }
17
      return value;
18
    },
19
  },
20
​
21
  // 时间选择器绑定输入
22
  onInput(event) {
23
    this.setData({
24
      currentDate: event.detail
25
    });
26
  },
27
   // 关闭弹出层
28
   onClose() {
29
    this.setData({ show: false });
30
  },
31
  // 更改弹出层开关显示时间选择器
32
  showTimePicker(){
33
      this.setData({
34
          show: true,
35
      })
36
  },
37
  // 时间选择器确定事件
38
  timeConfirm(e){
39
      console.log(e);
40
      this.setData({
41
          show: false,
42
      })
43
  }
44
});

结果如下：

不过，在我的项目里，并不需要细化到每一分钟，因此我利用现有参数对分钟做了筛选。

15
1
<!--index.wxml-->
2
​
3
  <!--将时间选择器作为内容放在弹出层里面-->
4
    <van-datetime-picker
5
        type="time"
6
        value="{{ currentDate }}"
7
        min-hour="{{ minHour }}"
8
        max-hour="{{ maxHour }}"
9
        bind:input="onInput"
10
        title="testTimePicker"
11
        bind:confirm="timeConfirm"
12
        formatter="{{ formatter }}"
13
        min-minute="0"                // 利用最大最小值控制分钟区间
14
        max-minute="3"
15
    />

15
1
// page.js
2
​
3
Page({
4
  data: {
5
    // 时间格式化
6
    formatter(type, value) {
7
      if (type === 'hour') {
8
        return `${value}小时`;
9
      } else if (type === 'minute') {
10
        return `${value * 15}分钟`;        // 将原本原来时间乘以15
11
      }
12
      return value;
13
    },
14
  },
15
});

结果如下：

外部样式类

当然有时候我们希望可以自定义样式来满足各种各样的需求，Vant组件提供了外部样式类，使用方法和Props一样。

21
1
<!--index.wxml-->
2
​
3
<!--由于担心优先级不够，所以在外面加了一个壳子-->
4
<view class="timePicker">
5
  <!--将时间选择器作为内容放在弹出层里面-->
6
    <van-datetime-picker
7
        type="time"
8
        value="{{ currentDate }}"
9
        min-hour="{{ minHour }}"
10
        max-hour="{{ maxHour }}"
11
        bind:input="onInput"
12
        title="testTimePicker"
13
        bind:confirm="timeConfirm"
14
        formatter="{{ formatter }}"
15
        min-minute="0"                // 利用最大最小值控制分钟区间
16
        max-minute="3"
17
        active-class="active-class"
18
        toolbar-class="toolbar-class"
19
        column-class="column-class"
20
    />
21
</view> 

8
1
/**index.wxss**/
2
.timePicker .active-class,    /**选中项样式类**/
3
.timePicker .toolbar-class {  /**顶部栏样式类**/
4
  color: skyblue;
5
}
6
.timePicker .column-class {
7
  color: yellowgreen;
8
}

结果如下：

修改外部样式类以外部分

经过上图修改后发现，并不能更改“取消”“确定”按钮的样式。那怎么能行！

由于vant组件属于自定义组件，所以我们只需要找到该样式的类名，然后设置优先级高于原有的类名即可。

然后通过在wxss设置类名实现想要的效果

4
1
/**index.wxss**/
2
.timePicker .van-picker__confirm {  // 确定按钮
3
  color: coral;
4
}

可以看到已经成功修改了：

其余组件的使用方法大致相似，这里就不一一介绍了。