为了更好地理解微信小程序,我们先梳理一下框架提供的基础组件体系。
基础组件概览
框架内置了一系列基础组件,通过组合它们可以快速构建页面。
什么是组件
简单来说,组件是视图层的基本单元。它们自带功能与微信风格的样式,通常由开始标签和结束标签包裹,中间包含具体内容,属性则用于修饰组件。
<tagname property="value"> Content goes here ... </tagname>
属性类型
| 类型 | 描述 | 注解 |
|---|---|---|
| Boolean | 布尔值 | 组件写上该属性即视为 true,未写则为 false。若为变量会自动转换 |
| Number | 数字 | 如 1, 2.5 |
| String | 字符串 | 如 "string" |
| Array | 数组 | 如 [ 1, "string" ] |
| Object | 对象 | 如 { key: value } |
| EventHandler | 事件处理函数名 | Page 中定义的处理函数 |
| Any | 任意属性 | 无特定限制 |
共同属性
除了组件特有属性外,大部分组件还支持以下通用设置:
| 属性 | 类型 | 描述 | 注解 |
|---|---|---|---|
| id | String | 唯一标识 | 页面内保持唯一 |
| class | String | 样式类 | 对应 WXSS 中定义的类 |
| style | String | 内联样式 | 支持动态设置 |
| hidden | String | 显示控制 | 默认显示 |
| data-* | Any | 自定义数据 | 触发事件时传递给处理函数 |
| bind*/catch* | EventHandler | 事件绑定 | 具体事件类型依组件而定 |
组件分类列表
基础组件主要分为七大类,涵盖了从布局到交互的各个场景。
视图容器 (View Container)
负责页面的布局结构:
| 组件名 | 说明 |
|---|---|
| view | 普通视图容器 |
| scroll-view | 可滚动视图容器 |

