微信小程序开发 组件认识

• 能够给view组件绑定tap事件

• 能够给事件传递参数 data-

• 能会使用scroll-view和view容器组件

• 能够自定义组件并且使用自定义组件

一、事件

1.1 事件绑定

事件 | 微信开放文档

小程序事件绑定是在组件中以属性的形式来完成的，例【bind/catch事件名="方法名"】

注：小程序中绑定方法名不能用括号，直接写方法名即可

事件名bind【冒泡】或catch【非冒泡】开头，然后跟上事件的类型，如bindtap、catchtap

tap 手指触摸后马上离开 类似于 html中的click事件

自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart

原生组件【camera、canvas、input、live-player、live-pusher、map、textarea、 video】

value 是一个字符串，需要在对应的页面逻辑文件JS文件中定义对应的实现方法。 在wxml中定义一个事件

key=value bind:tap=”click” 注意，事件名不能用括号

js中实现对应的事件方法

事件绑定

1.2 事件对象

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象

BaseEvent 基础事件对象属性列表：

属性	类型	说明
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳
currentTarge	Object	当前组件的一些属性值集合(对象) 在组件中 data- 开头定义的属性

使用data-开头的的自定义属性来进行参数的传递

在js中通过 event对象中的 target或currentTarget中的dataset来获取

二、常用小程序组件

2.1 概念及语法

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发

什么是组件：

组件是视图层的基本组成单元

一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内

注意：所有组件与属性都是小写，连接字符用中横线【-】连接

2.1.1 属性值类型

类型	描述	注解
Boolean	布尔值	组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型{{}}
Number	数字	1, 2.5{{}}
String	字符串	"string"
Array	数组	[ 1, "string" ]{{}}
Object	对象	{ key: value }{{}}
EventHandler	事件处理函数名	"handlerName" 是 Page中定义的事件处理函数名

wxml中属性类型传递

js类型判断

2.1.2 共同属性类型

所有组件都有的属性：

属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean [false]	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind* / catch*	EventHandler	组件的事件	详见事件

tab切换

在wxml中定义对应的数据和事件

wxss样式

js文件

效果

2.2 视图容器组件

2.2.1 swiper

滑块视图容器

swiper | 微信开放文档

tab案例

wxml循环数据和swiper

wxss定义样式

js中实现swiper的tab切换

使用了小程序提供的模块化功能

导出 
	module.exports  = {对象}
导入 
	var/let/const 变量 = require(相对地址)

定义公共函数

在js逻辑层中导入引用

2.2.2 scroll-view

可滚动视图区域。使用竖向滚动时，需要给<scroll-view>一个固定高度，通过 WXSS 设置 height，同时还需要在组件属性中定义允许纵向滚动 scroll-y=”{{true}}”

注意点

tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件

一定要设置高度，事件触发，必须是大于了你设置的高度才能被触发到事件

wxml定义滚动组件

wxss中设置高度

js中实现相关的事件和回到顶部

加载更多

wxml中循环出数据

js中实现加载更多

三、自定义组件

自定义组件 | 微信开放文档

开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。 说白了就是自定义一些标签，然后这些标签能帮助我们实现一些功能且可以重复的使用

3.1 创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

{
  "component": true
}

WXML文件代码

JSON文件代码

WXSS文件代码

3.2 使用自定义组件

使用已注册的自定义组件前，首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径：

{
  "usingComponents": {
	// 在父模板中调用的标签名    组件的路径
    "component-tag-name": "path/to/the/custom/component"
  }
}