小程序组件简明说明

小程序组件基础了解

• 不支持标签定义样式,只允许内联样式和class样式
• 不支持ul li 等html标签
• 小程序中是XML写法,不是HTML,所以大多数标签在小程序中无法使用
• 小程序自身支持的标签,是一种组件化的标签.有如下组件可以使用

---

• 视图容器(View Container)：

组件名	用途
view	视图,相当于HTML中div,快级元素
scroll-view	支持左右,上下滑动模式
swiper	轮播组件,常用来做广告栏使用
movable-area	可移动的视图容器，在页面中可以拖拽滑动,1.2新加入的组件

• 基础组件

组件名	用途
navigator	导航 相当于超链接a
icon	图标组件,微信自定义些简单图标,很少用到
text	文字组件,有点像html中的span
progress	进度条

• 表单组件(基本和HTML类似

组件名	用途
form	表单,将组件内的用户输入的switch input checkbox slider radio picker 提交。
button	按钮,内置一些方法事件绑定
input	输入框
checkbox	多项选择器
radio	单项选择器
picker	列表选择器,这个组件封装了普通选择器，时间选择器，日期选择器，默认是普通选择器
picker-view	嵌入页面的滚动选择器,与上面的scroll-view配合使用
slider	滑动组件,通过滑动改变数值大小,此组件应用场景较灵活
switch	开关切换标签, 常用来切换页面的2种不同样式效果,数据筛选的排列方式,视图的显示隐藏等
label	标签.目前可以绑定的控件有：button, checkbox, radio, switch。使用for属性找到对应的id

• 多媒体类

组件名	用途
audio	音频
image	图片组件,此控件应用频率高
video	视频控件

• 地图控件

组件名	用途
map	高级化的组件,用来做地图标记,路线规划等

• 画布控件

组件名	用途
canvas	画布,常用来绘制数据统计(饼图,柱状图,K线图,雷达图等),游戏开发

• 会话控件

组件名	用途
contact-button	用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。

上面组件认识完后,我会在下一专题中写一些常见的布局技巧结合,以及发布一个融合aui样式和antdesign样式的CSS框架,方便在写样式时直接饮用,减少重复时间