Vant组件开发使用

Vant是有赞前端团队开源的移动端组件库，于2016年开源，已持续维护4年时间。Vant对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前Vant官方提供了Vue版本和微信小程序版本，并由社区团队维护React版本。

Vant组件安装

通过npm方式安装

先去node.js官网（https://nodejs.org/en/download/）下载安装，构建npm命令，在cmd中执行npm -v，如下图所示，即完成安装：

进入小程序的项目中，如图打开小程序的项目路径的终端，在终端输入：npm init，如下图所示：

紧接着在终端继续输入：npm i @vant/weapp -S –production，用于安装Vant组件，出现下图所示及代表下载完成

构建npm包

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

此时在目录树生成“miniprogram_npm”文件夹，如下图所示，Vant组件就下载完成了

修改app.json

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

使用测试

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

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

如果这种情况下没有出现报错情况，就可以正常使用了；如若出现错误，请按照下面方式修改：

在windows文件夹目录下，把miniprogram_npm@vant\weapp里的文件都删除

之后再打开vant weapp下载一份vant，将dist文件夹（vant-weapp-dev\vant-weapp-dev\dist）把dist文件夹复制到miniprogram_npm@vant\weapp下即可。

在app.json或index.json中修改配置Button对应的路径即可导入组件使用

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

Vant组件使用示例

Button按钮

在index.json中修改配置Button对应的路径，用于定位Button组件的位置

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

在wxml中添加如下代码，“van-button”为定义的标签名，“type”为当前按钮的样式类型，“bind:click”用于绑定当前按钮的点击事件。

<!--index.wxml-->
<van-button type="default" bind:click="click_default">默认按钮</van-button>
<van-button type="primary"bind:click="click_primary" >主要按钮</van-button>
<van-button type="info" bind:click="click_info" >信息按钮</van-button>
<van-button type="warning" bind:click="click_warning">警告按钮</van-button>
<van-button type="danger" bind:click="click_danger" >危险按钮</van-button>

在js中添加点击执行事件的函数代码（console.log用于在控制台输出信息，这个后面会经常用到，方便于调试）：

click_default(){console.log("点击默认按钮")},
click_primary(){console.log("点击主要按钮")},
click_info(){console.log("点击信息按钮")},
click_warning(){console.log("点击警告按钮")},
click_danger(){console.log("点击危险按钮")}

可以在模拟器当中看到效果界面，如下图所示：

点击按钮后在输出栏会打印出信息，如下图所示：

Field输入框

在index.json中修改配置Field对应的路径，用于定位Field组件的位置

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

在wxml中添加如下代码，“van-field”为定义的标签名，“placeholder”当输入框为空时显示的文本，“bind:change”为输入框添加修改绑定事件：

<van-field
value="{{value}}"
placeholder="请输入用户名"
bind:change="onChange"
/>

在js中添加点击执行事件的函数代码，打印当前的输入值：

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

可以在模拟器当中看到效果界面，如下图所示：

在输入框输入文本后，会在调试栏实时打印出来，如下图所示：

Checkbox复选框

在index.json中修改配置Checkbox对应的路径，用于定位Checkbox复选框组件的位置

"usingComponents":{
"van-checkbox":"@vant/weapp/dist/checkbox/index",
}

在wxml中添加如下代码，“van- checkbox”为定义的标签名，“value”绑定当前复选框的值，“bind:change”为复选框添加修改绑定事件：

<van-checkbox value="{{checked}}" bind:change="onChange">
复选框
</van-checkbox>

在js中添加点击执行事件的函数代码，用于改变当前复选框的状态：

Page({
data:{
checked:true,
},
onChange(event){
this.setData({
checked:event.detail,
});
},
});

可以点击复选框修改当前的状态，如下图所示：

Layout布局

Layout提供了van-row和van-col两个组件来进行行列布局，在index.json中修改配置Layout对应的路径

"usingComponents":{
"van-row":"@vant/weapp/dist/row/index",
"van-col":"@vant/weapp/dist/col/index"
}

Layout组件提供了24列栅格，通过在Col上添加span属性设置列所占的宽度百分比；此外，添加offset属性可以设置列的偏移宽度，计算方式与span相同，在wxml中添加如下代码：

<van-row>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>

<van-row>
<van-col span="4">span: 4</van-col>
<van-col span="10"offset="4">offset: 4, span: 10</van-col>
</van-row>

<van-row>
<van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>

其布局最终效果如下图所示：

通过gutter属性可以设置列元素之间的间距，默认间距为0，在wxml中添加如下代码：

<van-row gutter="20">
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
<van-col span="8">span: 8</van-col>
</van-row>

其布局最终效果如下图所示：

更多相关组件的使用方法可以在Vant的官方说明文档中查看