微信小程序微信小程序开发者

初识小程序-组件

2018-03-28  本文已影响12人  勇敢的_心_

视图容器(View Container):

组件名 说明
view 视图容器
scroll-view 可滚动视图容器;使用竖向滚动时,需要给<scroll-view/>一个固定高度
swiper 滑块视图容器 ;可放置<swiper-item/>组件,否则会导致未定义的行为
movable-view 可移动的视图容器,在页面中可以拖拽滑动;movable-view必须在<movable-area/>组件中,并且必须是直接子节点,否则不能移动。
cover-view 覆盖在原生组件之上的文本视图,可覆盖的原生组件包括map、video、canvas、camera,只支持嵌套cover-view、cover-image。

基础内容(Basic Content):

组件名 说明
icon 图标
text 文本 ;除了文本节点以外的其他节点都无法长按选中。
progress 进度条
rich-text 富文本;nodes 不推荐使用 String 类型,性能会有所下降。

表单(Form):

标签名 说明
button 按钮
form 表单;将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交
input 输入框
checkbox 多项选择器 ;checkbox-group多项选择器,内部由多个checkbox组成
radio 单项选择器;radio-group单项选择器,内部由多个<radio/>组成
picker 列表选择器;从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。
picker-view 内嵌列表选择器
slider 滚动选择器
switch 开关选择器
label 标签;用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。
textarea 多行输入框。

导航(Navigation):

组件名 说明
navigator 应用链接 ;■wx.navigateTo(OBJECT):保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面。■wx.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面。■wx.navigateBack():关闭当前页面,回退至前一页面。

多媒体(Media):

组件名 说明
audio 音频
image 图片
video 视频
camera 系统相机
live-player 实时音视频播放
live-pusher 实时音视频录制

地图(Map):

组件名 说明
map 地图

画布(Canvas):

组件名 说明
canvas 画布

扩展:

组件名 说明
web-view web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。
open-data 用于展示微信开放的数据;多用于转发,只有当前用户在此群内才能拉取到群名称
上一篇下一篇

猜你喜欢

热点阅读