微信小程序从入门到学会第三天-------小程序的组件

一、前言

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

二、容器组件

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

cover-image覆盖在原生组件之上的图片视图
cover-view覆盖在原生组件之上的文本视图
match-media 匹配检测节点
movable-area的可移动区域
movable-view可移动的视图容器，在页面中可以拖拽滑动
page-container页面容器
scroll-view可滚动视图区域
share-element共享元素
swiper滑块视图容器
swiper-item仅可放置在swiper组件中，宽高自动设置为100%
view视图容器

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

三、基础内容组件

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

icon图标
progress进度条
rich-text富文本
text文本

四、表单组件

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多行输入框

五、导航组件

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

functional-page-navigator仅在插件中有效，用于跳转到插件功能页
navigator页面链接

六、媒体组件

audio音频
camera系统相机
image图片
live-player实时音视频播放（v2.9.1 起支持同层渲染）
live-pusher实时音视频录制（v2.9.1 起支持同层渲染）
video视频（v2.4.0 起支持同层渲染）
voip-room多人音视频对话

七、地图

map地图（v2.7.0 起支持同层渲染，相关api wx.createMapContext

八、画布

canvas   画布

九、开放组件

web-view承载网页的容器
adBanner 广告
ad-custom原生模板 广告
official-account公众号关注组件
open-data用于展示微信开放的数据

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

十、原生组件

native-component小程序中的部分组件是由客户端创建的原生组件

小程序的原生组件为：

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

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

十一、无障碍访问

aria-component满足视障人士对于小程序的访问需求

十二、导航栏

navigation-bar  页面导航条配置节点，用于指定导航栏的一些属性

十三、页面属性配置节点

page-meta页面属性配置节点，用于指定页面的一些属性、监听页面事件

十四、可视化

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

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

十五、ui组件

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

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

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

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

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

十六、自定义组件

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

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

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

十七、数据传递

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

十八、条件渲染

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

十九、列表渲染

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

二十、模板

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

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

二十一、引入模板

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

然后导入它微信小程序组件传值，如图：

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

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

二十二、总结

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

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