一、Vant Weapp 组件
Vant组件介绍和使用具体参考Vant Weapp官网
1、下载Vant Weapp
步骤（1）npm包初始化
初始化包，自动生成package.json文件。
npm init
步骤（2）通过 npm 安装 Vant Weapp
npm i @vant/weapp -S --production
步骤（3）修改 app.json
将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
步骤（4）构建 npm 包
在详情-本地设置中勾选 使用 npm 模块 选项，并点击 工具 -> 构建 npm，构建完成后，即可引入组件。
构建完成后，会自动生成miniprogram_npm文件夹，表示构建完成。
2、引入组件
在.json文件中配置使用的组件，可以在全局中配置，也可以在单独页面中配置。
在app.json或index.json中引入某个组件。
"usingComponents": {
"van-field": "@vant/weapp/field/index"
},
3、Field 输入框组件
label：输入框左侧文本
value：当前输入的值
type：可设置为任意原生类型, 如 number idcard textarea digit
border：是否显示内边框
readonly：是否只读
title-width：标题宽度
placeholder：输入框为空时占位符
custom-style：自定义样式
autosize：是否自适应内容高度，只对 textarea 有效，可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px
效果图：
4、Button 按钮组件
type：按钮类型，支持default、primary、info、warning、danger五种类型，默认为default。
size：按钮尺寸，可选值为 normal、large、small、mini，默认为normal。
color：按钮颜色，支持传入linear-gradient渐变色。
custom-style：自定义样式
loading：是否显示为加载状态
loading-text：加载状态提示文字
icon：左侧图标名称或图片链接。可选值参考，支持Icon组件里的所有图标，也可以传入图标 URL。
round：是否为圆形按钮
square：是否为方形按钮
disabled：是否禁用按钮
事件bind:click 点击按钮，且按钮状态不为加载或禁用时触发。使用bindclick 配合loading属性使用，可以实现节流效果。
添加
效果图：
5、Popup 弹出层组件
弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。
show：是否显示弹出层
position：弹出位置，可选值为top、bottom、right、left。
custom-style：自定义弹出层样式
事件bind:close 关闭弹出层时触发
弹出内容
效果图：
6、Picker 选择器组件
columns：对象数组，配置每一列显示的数据
value-key：选项对象中，文字对应的 key。
show-toolbar：是否显示顶部栏
toolbar-position：顶部栏位置，可选值为bottom、top
title：顶部栏标题
loading：是否显示加载状态
defaultIndex：初始选中项的索引，默认为 0
item-height：选项高度
confirm-button-text：确认按钮文字
cancel-button-text：取消按钮文字
事件bind:confirm 点击确认按钮时触发。
事件bind:cancel 点击取消按钮时触发。
事件bind:change 选项改变时触发。
注意：Picker选择器组件必须配合Popup弹出层组件使用，不能单独使用。
Page({
data: {
isLoading:false,
isShow:false,
activeIndex:0,
columns: [
{ Name: '杭州' },
{ Name: '宁波' },
{ Name: '温州' },
]
}
})
效果图：
7、CountDown 倒计时组件
time：倒计时时长，单位毫秒
format：时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒，默认为HH:mm:ss
auto-start：是否自动开始倒计时，默认为true
use-slot：是否使用自定义样式插槽，默认为false
timeData 格式：days-剩余天数；hours-剩余小时；minutes-剩余分钟；seconds-剩余秒数；milliseconds-剩余毫秒
限购
1杯
{{ timeData.days }}
天
{{ timeData.hours }}
:
{{ timeData.minutes }}
:
{{ timeData.seconds }}
Page({
data: {
time: 310 * 67 * 60 * 1000,
timeData: {},
},
onChange(e) {
let {detail:{days, hours, minutes,seconds}}=e
this.setData({
timeData: {
days:wx.$formatNumber(days),
hours:wx.$formatNumber(hours),
minutes:wx.$formatNumber(minutes),
seconds:wx.$formatNumber(seconds)
}
});
},
})
效果图：
8、Grid 宫格组件
宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。
column-num：列数
gutter：格子之间的间距，默认单位为px，默认值为0
border：是否显示边框，默认为true
center：是否将格子内容居中显示，默认为true
square：是否将格子固定为正方形，默认为false
direction：格子内容排列的方向，可选值为 horizontal、vertical
use-slot：是否使用自定义内容的插槽。自定义宫格的所有内容，需要设置use-slot属性。
{{item.coffeename}}
{{item.coffeeprice}}
到手价
{{item.coffeenowprice}}
Page({
data: {
coffeedata: [{
coffeeimg: 'https://img2.baidu.com/it/u=49756185,3106025596&fm=26&fmt=auto',
coffeename: '厚乳拿铁',
coffeeprice: '￥ 28',
coffeenowprice: '￥9.9'
},
{
coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp7.itc.cn%2Fimages01%2F20200729%2Ffd60a84256e5495aba620a0116346bdc.jpeg&refer=http%3A%2F%2Fp7.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123029&t=779c7275557e3ddcd867b6d909330b36',
coffeename: '陨石拿铁',
coffeeprice: '￥ 28',
coffeenowprice: '￥9.9'
},
{
coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F1affff12-dc7f-4319-4180-55a193c443d3%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123114&t=15ec823e0e7d9478c3e4dfd5a51b9384',
coffeename: '芋泥一起大红袍',
coffeeprice: '￥ 28',
coffeenowprice: '￥9.9'
}, {
coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.doubanio.com%2Fview%2Fgroup_topic%2Fl%2Fpublic%2Fp275163182.jpg&refer=http%3A%2F%2Fimg2.doubanio.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123140&t=262a7dc689229f9905cba8d0000d8b0e',
coffeename: '抹茶瑞纳冰',
coffeeprice: '￥ 28',
coffeenowprice: '￥9.9'
}, {
coffeeimg: 'https://img1.baidu.com/it/u=2792718596,1723163661&fm=26&fmt=auto',
coffeename: '小鹿料多多',
coffeeprice: '￥ 28',
coffeenowprice: '￥9.9'
}, {
coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqcloud.dpfile.com%2Fpc%2FLIpUEFVtAGyPgWr-yqgeJQb7fTtvawZ5sAInNXNpiScGuEGVW4L3mx2SmXf5pwCL5g_3Oo7Z9EXqcoVvW9arsw.jpg&refer=http%3A%2F%2Fqcloud.dpfile.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123277&t=f9835f88b99afd9014352799cf8c6dc3',
coffeename: '冲绳黑糖拿铁',
coffeeprice: '￥ 28',
coffeenowprice: '￥9.9'
}, {
coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_origin_min_pic%2F16%2F10%2F04%2F2157f3b2880c792.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123376&t=0c7120755f992fa26ddf398d3bd92ae1',
coffeename: '摩卡',
coffeeprice: '￥ 28',
coffeenowprice: '￥9.9'
}, {
coffeeimg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqcloud.dpfile.com%2Fpc%2F4zrG0tCu-if32NP4qPJ843CmN584sw6-jCZTOA6ZLg4HEjJJXBYQjVbJZhnXA8kE5g_3Oo7Z9EXqcoVvW9arsw.jpg&refer=http%3A%2F%2Fqcloud.dpfile.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639123407&t=d2530897a42d20199479f5ceeb6089ae',
coffeename: '焦糖玛奇朵',
coffeeprice: '￥ 28',
coffeenowprice: '￥9.9'
}, {
coffeeimg: 'https://img1.baidu.com/it/u=3530766208,3669403873&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
coffeename: '小陨石厚乳',
coffeeprice: '￥ 28',
coffeenowprice: '￥9.9'
}
]
},
})
效果图：
二、自定义组件
1、介绍
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。具体参考自定义组件官方文档
2、实现自定义组件
步骤（1）新建存放组件的目录
在项目中新建一个 components 文件夹，用于存放我们以后开发中的组件。
步骤（2）新建组件文件夹
以实现一个自定义tab菜单为例子，我们需要在components目录下新建一个tabMenu文件夹来存放tab菜单组件。然后 右击tabMenu下新建 Component 并命名为tabMenu。
tabMenu文件夹会生成对应的js、json、wxml、wxss4个文件，也就是一个自定义组件的组成部分。
步骤（3）在tabMenu.wxml文件中编写组件模版
{{label}}
{{item}}
步骤（4）在tabMenu.wxss文件中编写组件样式
.tabMenu {
display: flex;
align-items: center;
margin: 10rpx 0;
}
.tabMenu .label{
font-weight: bold;
}
.tabMenu .item{
border: 2rpx solid #ccc;
padding: 5rpx 10rpx;
margin: 0 5rpx;
color: #8fb2c9;
}
.tabMenu .item.active{
background-color: #8fb2c9;
color: white;
}
步骤（5）编写tabMenu.js文件
js文件中，使用Component 构造器定义组件，并提供组件的属性、数据、方法等。组件的属性值和内部数据将被用于组件 wxml 的渲染。
properties：组件的属性列表，用于定义组件需要传递的属性。属性设置中可包含三个字段，type表示属性类型、value表示属性初始值、observer表示属性值被更改时的响应函数。
data：组件的内部数据，和properties一同用于组件的模板渲染。
methods：组件的方法列表，包括事件响应函数和任意的自定义方法。（在页面js文件中定义方法不需要写在methods中，注意区分。）
triggerEvent方法： 触发一个自定义事件，将值通过事件对象的方式回传出去。（因为组件内部的值发生变化时，页面内部的数据并不会随之改变。所以就需要通过触发自定义事件，将值回传出去）
Component({
/**
* 组件的属性列表，定义组件需要传递的属性
*/
properties: {
// 菜单标题
label:{ // 属性名
type:String, // 类型（必填），类型包括String、Number、Boolean、Object、Array、null（表示任意类型）
value:'' // 默认值，设置为空
},
// 菜单选项内容
list:{
type:Array // 类型是数组
},
// 高亮索引
activeIndex:{
type:Number, // 类型是Number
value:0 // 默认值是0
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 选项点击事件
click(e) {
let {index} = wx.$key(e) // 获取数据参数index
this.setData({
activeIndex: index // 更新高亮索引
})
// 触发一个自定义事件，将值通过事件对象的方式回传出去
this.triggerEvent('syncData',index)
}
}
})
步骤（6）页面中引入tabMenu组件
引入组件有两种方式：① 全局引入，在app.json文件中引入组件；② 局部引入，只在需要使用该组件的页面json文件中引入。
我选择了局部引入，在需要使用组件的shopcart页面中引用。
引用格式："组件名":"组件路径"
shopcart.json文件：
{
"usingComponents": {
"tabMenu":"/components/tabMenu/tabMenu"
}
}
shopcart.wxml文件：
注意：在组件中通过triggerEvent定义的触发事件，在页面中调用格式为bind:事件名=""。例如bind:syncData="syncData"。
{{sugarActive}}--{{plActive}}--{{wdActive}}
shopcart.js文件：
Page({
data: {
// 定义一个甜度数组
sugars: ['全糖', '半糖', '少糖', '无糖'],
// 甜度高亮索引
sugarActive: 0,
// 定义一个配料数组
pls: ['珍珠', '红豆', '椰果', '布丁'],
// 配料高亮索引
plActive: 0,
// 定义一个温度数组
wds: ['常温', '多冰', '少冰', '去冰'],
// 温度高度索引
wdActive: 0,
},
//同步组件回传的数据
syncData(e){
//获取data参数（获取指定的active）
let {active} = e.currentTarget.dataset
//获取组件内部回传的值
let {detail} = e
this.setData({
//给指定的active重新赋值
[active]: detail
})
}
})
步骤（7）自定义tab菜单效果
3、slot插槽的使用
使用组件时，如果要显示两个组件标签中间的内容，需要使用slot插槽。
（1）tabMenu.wxml文件
组件中的slot标签，用于定义插槽。使用组件时，两个组件标签中间的内容都会放到插槽中。
{{label}}
{{item}}
（2）shopcart.wxml文件
调用组件的页面，在自定义组件标签中添加slot属性，就可以使用插槽。
插槽内容