第61篇
极客时间《9小时搞定微信小程序开发》第四课:原生组件。
组件是框架为开发者提供的基本工具,可以通过组合这些组件进行快速开发。
什么是组件?
- 组件是视图层的基本组成单元。
- 组件自带一些功能与微信风格一致的样式。
- 一个组件通常包括
开始标签
和结束标签
,属性
用来修饰这个组件,内容
在两个标签之内。 - 所有组件与属性都是小写,以连字符
-
连接。
表单组件

button: https://developers.weixin.qq.com/miniprogram/dev/component/button.html




从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
普通选择器:mode = selector
多列选择器:mode = multiSelector
时间选择器:mode = time
日期选择器:mode = date
省市区选择器:mode = region





导航组件



媒体组件



video: https://developers.weixin.qq.com/miniprogram/dev/component/video.html



地图组件

map: https://developers.weixin.qq.com/miniprogram/dev/component/map.html
画布组件

canvas: https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html
开放能力组件




自定义组件

网友评论