微信小程序开发入门教程（十）

背景

前几篇文章我们已经学习了WXML相关的数据绑定与几种渲染方式，还学习了与WXSS相关的样式绑定、浮动定位和Flex布局，其中无论是WXML的页面布局还是WXSS的样式都是基于元素而言的，而这些元素就是组件，微信团队已经为我们封装了很多功能齐全的组件，这些组件可以满足绝大多数开发的需求，从这篇文章开始，我们将系统的学习微信小程序的组件，虽然不需要将每一个组件和属性都牢牢记住，但是至少要有一个概念，知道微信团队已经提供了哪些能力，你不需要知道所有问题的答案，但是你需要知道去哪找到你问题的答案。

组件定义

微信小程序组件类似于HTML元素，每一个标签代表一个组件，官方对于组件的定义如下：

• 组件是视图层的基本组成单位
• 组件自带一些功能与微信风格样式
• 一个组件通常包括开始标签和结束标签。属性用来修饰这个组件，内容在开始标签之内

按类型可以将组件划分为七大类：视图容器、基础内容、表单、导航、多媒体、地图、画布。每个组件都有共同属性和自己特有的属性，组件共有的属性如下：

• id：组件的唯一表示，保持整个页面唯一
• class：组件里的样式类，对应WXSS中定义的样式类
• style：组件的内联样式，可以动态设置样式
• data-* ：自定义属性，组件上触发事件时，会发送给事件处理函数，事件处理函数可以通过datascl获取
• bind*/catch*：组件的事件，绑定逻辑层的相关事件处理函数，bind为冒泡事件，catch为非冒泡事件

每个属性都有其对应的属性值，属性值的类型有以下几种：

• Boolean
• Number：数字
• String：字符串
• Array：数组
• Object：对象
• EventHandler：事件处理函数
• Any：任意属性

视图容器

在微信小程序中提供了一套类似于<div/>的容器组件，那就是<view/> <scroll-view> <swiper/>,在HTML中大部分的标签都能嵌套任何标签，但是小程序中大部分组件都有其自己特定的功能和意义，标签有特定的用法，内部也只能嵌套指定的组件&#