微信小程序基本组件概述

为了更好的理解微信小程序，本文90%文字描述来源于官网的介绍。官网原链接https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20161222
本文是基本组件介绍的第一篇，主要介绍微信小程序给我们提供的小组件有哪些，并举一个简单的例子，第二篇将详细介绍各小组件的使用。

基础组件

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

什么是组件：

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

<tagname property="value">  Content goes here ...</tagename>

属性类型

类型 描述 注解 Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true，只有组件上没有写该属性时，属性值才为false。如果属性值为变量，变量的值会被转换为Boolean类型 Number 数字 1, 2.5 String 字符串 “string” Array 数组 [ 1, “string” ] Object 对象 { key: value } EventHandler 事件处理函数名 “handlerName” 是 Page中定义的事件处理函数名 Any 任意属性 ## 共同属性类型 属性 类型 描述 注解 id String 组件的唯一标示 保持整个页面唯一 class String 组件的样式类 在对应的 WXSS 中定义的样式类 style String 组件的内联样式 可以动态设置的内联样式 hidden String 组件是否显示 所有组件默认显示 data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数 bind* / catch* EventHandler 组件的事件

基本组件列表

基础组件分为以下七大类：

视图容器(View Container)：

组件名 注释 view 视图容器 scroll-view 可滚动视图容器 swiper 滑块视图容器

基础内容(Basic Content)：

组件名 注释 icon 图标 text 文字 progress 进度条

表单(Form)：

组件名 注释 button 按钮 form 表单 input 输入框 checkbox 多项选择器 radio 单项选择器 picker 列表选择器 picker-view 内嵌列表选择器 slider 滚动选择器 switch 开关选择器 label 标签

导航(Navigation)：

组件名 注释 navigator 应用链接

多媒体(Media)：

组件名 注释 audio 音频 image 图片 video 视频

地图(Map)：

组件名 注释 map 地图

画布(Canvas)：

组件名 注释 canvas 画布

客服会话：

组件名 注释 contact-button 进入客服会话按钮