一、前言

小程序中的组件其实相当于网页中的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文本
微信小程序从入门到学会第三天——-小程序的组件插图1

四、表单组件

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多行输入框
微信小程序从入门到学会第三天——-小程序的组件插图2

五、导航组件

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

functional-page-navigator仅在插件中有效,用于跳转到插件功能页 navigator页面链接
微信小程序从入门到学会第三天——-小程序的组件插图3

六、媒体组件

audio音频camera系统相机image图片live-player实时音视频播放(v2.9.1起支持同层渲染)live-pusher实时音视频录制(v2.9.1起支持同层渲染)video视频(v2.4.0起支持同层渲染)voip-room多人音视频对话
微信小程序从入门到学会第三天——-小程序的组件插图4

七、地图

map地图(v2.7.0起支持同层渲染,相关apiwx.createMapContext

八、画布

canvas画布

九、开放组件

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

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

十、原生组件

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

小程序的原生组件为:

cameracanvasinput(仅在focus时表现为原生组件)live-playerlive-pushermaptextareavideo

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

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

十一、无障碍访问

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

十二、导航栏

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

十三、页面属性配置节点

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

十四、可视化

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

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

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

十五、ui组件

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

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

然后可以使用了,如图:

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

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

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

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

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

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

十六、自定义组件

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

微信小程序从入门到学会第三天——-小程序的组件插图10
微信小程序从入门到学会第三天——-小程序的组件插图11
微信小程序从入门到学会第三天——-小程序的组件插图12

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

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

然后引入该组件bb,如图:

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

十七、数据传递

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

微信小程序从入门到学会第三天——-小程序的组件插图15
微信小程序从入门到学会第三天——-小程序的组件插图16

十八、条件渲染

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

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

十九、列表渲染

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

微信小程序从入门到学会第三天——-小程序的组件插图18
微信小程序从入门到学会第三天——-小程序的组件插图19

二十、模板

使用模板增加了代码的复用性,想用哪个用哪个,如图:

微信小程序从入门到学会第三天——-小程序的组件插图20
微信小程序从入门到学会第三天——-小程序的组件插图21

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

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

二十一、引入模板

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

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

然后导入它,如图:

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

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

微信小程序从入门到学会第三天——-小程序的组件插图25
微信小程序从入门到学会第三天——-小程序的组件插图26

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

二十二、总结

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

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

作者 nasiapp

在线客服
官方客服
我们将24小时内回复。
12:01
您好,有任何疑问请与我们联系!

选择聊天工具: