[小程序开发]Vant组件使用

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

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

1. Vant组件安装

组件有多种方式进行安装,本次介绍通过npm方式进行安装。

1.1 通过npm方式安装

先去node.js官网下载安装,构建npm命令,在cmd中执行npm -v,如图所示,即完成安装:

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

npm初始化

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

安装Vant组件

1.2 构建npm包

打开微信开发者工具,点击工具→构建npm,并勾选使用npm模块选项,构建完成后,在目录树生成“miniprogram_npm”文件夹,即可引入组件。

构建npm模块

1.3 修改app.json

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

1.4 使用测试

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

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

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

在windows文件夹目录下,把miniprogram_npm@vant\weapp里的文件都删除,下图所示:

修改前文件夹目录

之后再打开vant weapp(https://codechina.csdn.net/mirrors/youzan/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"
}

2. Vant组件使用示例

2.1 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("点击危险按钮")}

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

Button效果演示界面

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

调试栏信息

2.2 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);
},
});

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

Filed效果演示界面

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

调试栏信息

2.3 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,
});
},
});

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

2.4 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>

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

Layout效果演示界面

通过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>

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

gutter属性效果演示界面

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

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇