小程序的组件小程序的组件有哪些 _小知识

一、前言小程序中的组件其实相当于网页中的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小程序中的部分组件是由客户端创建的原生组件小程序的原生组件为：

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组件，可以覆盖在部分原生组件上面。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。
十一、无障碍访问aria-component满足视障人士对于小程序的访问需求

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

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

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

文章插图
这样可以帮助我们快速构建页面。

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

小程序的组件 小程序的组件有哪些

小程序的组件小程序的组件有哪些