一、前言

小程序中的组件其实相当于网页中的HTML标签，只不过标签名字不一样，接下来我们一起来看下微信小程序都给我们提供了哪些组件吧。

二、容器组件

可以存放其它组件的容器组件，目前主要有如下几种：

<pre spellcheck="false" lang="cmd" cid="n7" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">cover-image覆盖在原生组件之上的图片视图
cover-view覆盖在原生组件之上的文本视图
match-media 匹配检测节点
movable-area的可移动区域
movable-view可移动的视图容器，在页面中可以拖拽滑动
page-container页面容器
scroll-view可滚动视图区域
share-element共享元素
swiper滑块视图容器
swiper-item仅可放置在swiper组件中，宽高自动设置为100%
view视图容器</pre>

这里小编来和大家说说常用的一些容器组件。

图片

三、基础内容组件

这里给我们提供了常见的几种图标还有进度条，如果你想用HTML中的标签请在富文本组件中使用，另外，小程序中的文本组件是text，如下：

<pre spellcheck="false" lang="cmd" cid="n13" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">icon图标
progress进度条
rich-text富文本
text文本</pre>

图片

四、表单组件

<pre spellcheck="false" lang="cmd" cid="n17" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">button按钮
checkbox多选项目
checkbox-group多项选择器，内部由多个checkbox组成
editor富文本编辑器，可以对图片、文字进行编辑
form表单
input输入框
keyboard-accessory设置 input / textarea 聚焦时键盘上方 cover-view / cover-image 工具栏视图
label用来改进表单组件的可用性
picker从底部弹起的滚动选择器
picker-view嵌入页面的滚动选择器
picker-view-column滚动选择器子项
radio单选项目
radio-group单项选择器，内部由多个 radio 组成
slider滑动选择器
switch开关选择器
textarea多行输入框</pre>

图片

五、导航组件

本项目内的页面跳转，不过不支持外部链接的跳转。

<pre spellcheck="false" lang="cmd" cid="n22" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">functional-page-navigator仅在插件中有效，用于跳转到插件功能页
navigator页面链接</pre>

图片

六、媒体组件

<pre spellcheck="false" lang="cmd" cid="n26" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">audio音频
camera系统相机
image图片
live-player实时音视频播放（v2.9.1 起支持同层渲染）
live-pusher实时音视频录制（v2.9.1 起支持同层渲染）
video视频（v2.4.0 起支持同层渲染）
voip-room多人音视频对话</pre>

图片

七、地图

<pre spellcheck="false" lang="cmd" cid="n30" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">map地图（v2.7.0 起支持同层渲染，相关api wx.createMapContext</pre>

八、画布

<pre spellcheck="false" lang="" cid="n33" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">canvas 画布</pre>

九、开放组件

<pre spellcheck="false" lang="cmd" cid="n37" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">web-view承载网页的容器
adBanner 广告
ad-custom原生模板 广告
official-account公众号关注组件
open-data用于展示微信开放的数据</pre>

专门用来做广告或者获取小程序的用户的数据。

十、原生组件

<pre spellcheck="false" lang="cmd" cid="n41" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">native-component小程序中的部分组件是由客户端创建的原生组件</pre>

小程序的原生组件为：

• camera

• canvas

• input（仅在focus时表现为原生组件）

• live-player

• live-pusher

• map

• textarea

• video

原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。原生组件还无法在 picker-view中使用。

原生组件的事件监听不能使用 bind:eventname 的写法，只支持 bindeventname。原生组件也不支持 catch 和 capture 的事件绑定方式。原生组件会遮挡 vConsole 弹出的调试面板。为了解决原生组件层级最高的限制。小程序专门提供了 cover-view和 cover-image组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。

十一、无障碍访问

<pre spellcheck="false" lang="cmd" cid="n63" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">aria-component满足视障人士对于小程序的访问需求</pre>

十二、导航栏

<pre spellcheck="false" lang="cmd" cid="n66" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">navigation-bar 页面导航条配置节点，用于指定导航栏的一些属性</pre>

十三、页面属性配置节点

<pre spellcheck="false" lang="cmd" cid="n69" mdtype="fences" style="margin: 15px 0px; padding: 8px 4px 6px; user-select: text !important; outline: 0px; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word !important; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: 0.544px; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial; overflow: visible; font-family: var(--monospace); font-size: 0.9em; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); border-width: 1px; border-style: solid; border-color: rgb(231, 234, 237); border-radius: 3px; width: inherit;">page-meta页面属性配置节点，用于指定页面的一些属性、监听页面事件</pre>

十四、可视化

如果你觉得一个个写组件很麻烦，那么你可以使用可视化的方式来使用组件，如图：

图片

这样可以帮助我们快速构建页面。

十五、ui组件

虽然微信给我们提供了一些组件，但是这些组件并不是特别美观，于是乎，小编决定使用一些已经写好了三方的组件，这里推荐腾讯团队做的一个ui组件库-----WeUI。这里小编已经下载好了，给大家一个地址：https://url18.ctfile.com/f/7715018-519360361-ee1b16（访问密码：6511），下载好了之后，我们将其放入到项目中去，然后添加到项目的全局样式文件，如图：

图片

然后就可以使用了，如图：

图片

虽然说weui的组件做的还不错，基本上不用我们自己写样式，但是文档写的不适合小白学习，所以这里小编给大家推荐一款新的小程序组件库，他就是iview weapp，下载地址：https://url18.ctfile.com/f/7715018-519360357-566602（访问密码：6511），由于iview weapp和weui的样式文件不一样，因此我们只有一个个导入，需要什么导入什么，首先打开页面配置文件，如下：

图片

然后使用自定义的组件名来使用这个组件，如下：

图片

注：这里我们需要删除example和build，否则会报错。

十六、自定义组件

在实际开发中，并不是所有的组件都能满足我们的需求，我们总有需要自己写组件的时候，微信小程序可以让我们轻松实现自定义组件，首先我们创建一个自定义的组件文件夹，然后分别写入页面，样式和脚本，如图：

图片

image.gif

图片

然后我们将该组件导入到我们要应用到该组件的页面配置文件中去，如图：

图片

然后引入该组件bb，如图：

image.gif

十七、数据传递

很多时候，咱们组件中的数据并不全是静态的，有的时候也要做成动态的响应式的组件，这个时候需要我们进行数据传递，首先我们需要在页面文件夹的js文件中去添加需要传递的数据的键值对，如图：

图片

图片

十八、条件渲染

还是使用上面的d1数据，条件渲染是将我们所设置的条件进行对比，哪个组件的条件符合就显示哪个组件，如图：

图片

十九、列表渲染

主要是通过遍历的方式来输出一些数组字典对象，如下：

图片

图片

二十、模板

使用模板增加了代码的复用性，想用哪个就用哪个，如图：

图片

图片

这里的模板中的data属性我们也可以直接在里面给他赋值，如图：

图片

二十一、引入模板

虽然我们可以自己制作模板，但是很多时候为了代码的简洁性，我们需要进行拆分代码，这个时候就可以使用引入的概念，在此之前，我们需要写一个模板文件，如图：

图片

然后导入它，如图：

image.gif

当然，除此之外还有一个更简单的导入方法，如图：

图片

图片

可以看到，template中的内容他是不会包含进去的，也就是说他只会引入除模板以外的组件和内容。

二十二、总结

本文主要讲到了关于微信小程序中的组件的应用，其实也就是我们熟知的页面标签，通过他们我们可以在页面中嵌入一些元素，由于现在很多三方组件的崛起，建议大家尽量用三方框架去做。感兴趣请关注小编公众号“简易编程网”。

注：文中组件的来历及解释部分参考微信开放文档