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对应的路径即可
1 | //通过npm安装 |
如果这种情况下没有出现报错情况,就可以正常使用了;如若出现错误,请按照下面方式修改:
在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对应的路径即可导入组件使用
1 | //通过npm安装 |
Vant组件使用示例
Button按钮
在index.json中修改配置Button对应的路径,用于定位Button组件的位置
1 | "usingComponents": |
在wxml中添加如下代码,“van-button”为定义的标签名,“type”为当前按钮的样式类型,“bind:click”用于绑定当前按钮的点击事件。
1 | <!--index.wxml--> |
在js中添加点击执行事件的函数代码(console.log用于在控制台输出信息,这个后面会经常用到,方便于调试):
1 | click_default(){console.log("点击默认按钮")}, |
可以在模拟器当中看到效果界面,如下图所示:
点击按钮后在输出栏会打印出信息,如下图所示:
Field输入框
在index.json中修改配置Field对应的路径,用于定位Field组件的位置
1 | "usingComponents": |
在wxml中添加如下代码,“van-field”为定义的标签名,“placeholder”当输入框为空时显示的文本,“bind:change”为输入框添加修改绑定事件:
1 | <van-field |
在js中添加点击执行事件的函数代码,打印当前的输入值:
1 | Page({ |
可以在模拟器当中看到效果界面,如下图所示:
在输入框输入文本后,会在调试栏实时打印出来,如下图所示:
Checkbox复选框
在index.json中修改配置Checkbox对应的路径,用于定位Checkbox复选框组件的位置
1 | "usingComponents":{ |
在wxml中添加如下代码,“van- checkbox”为定义的标签名,“value”绑定当前复选框的值,“bind:change”为复选框添加修改绑定事件:
1 | <van-checkbox value="{{checked}}" bind:change="onChange"> |
在js中添加点击执行事件的函数代码,用于改变当前复选框的状态:
1 | Page({ |
可以点击复选框修改当前的状态,如下图所示:
Layout布局
Layout提供了van-row和van-col两个组件来进行行列布局,在index.json中修改配置Layout对应的路径
1 | "usingComponents":{ |
Layout组件提供了24列栅格,通过在Col上添加span属性设置列所占的宽度百分比;此外,添加offset属性可以设置列的偏移宽度,计算方式与span相同,在wxml中添加如下代码:
1 | <van-row> |
其布局最终效果如下图所示:
通过gutter属性可以设置列元素之间的间距,默认间距为0,在wxml中添加如下代码:
1 | <van-row gutter="20"> |
其布局最终效果如下图所示:
更多相关组件的使用方法可以在Vant的官方说明文档中查看