小程序组件是视图层的基本组成单元，它自带微信风格UI样式和特定功能效果。例如，我们在小程序页面上所看到的图片、文本、按钮等都属于小程序组件。小程序为开发者提供了一系列基础组件，通过组合这些组件可以进行更高效地开发。
< text id= "demo" > 这是一段文本内容。< / text>
其中id属性是一个通用属性，可以被所有组件使用。小程序目前提供七类通用属性，如表所示。
属性名称 类型 解释 备注 id String 组件的唯一标示 在同一个页面中用id值标示唯一组件，因此同一页不能有多个id值相同 elass String 组件的样式类 该属性值在wXSS中进行定义和样式内客的设置 style String 组件的内联样式 可以动态设晋内联样式 data-* Any 自定义属性 当组件触发事件时，会附带将该厘性和值发送给对应的事件处理函数 bind*/cateh* EventHandler 组件的事件 绑定/捕获组件事件
基础组件按照功能主要分类如下：
视图容器组件主要包含5种，如表所示。
组件名称 解释 view 视图容器 scroll-view 可滚动视图容器 swiper 滑块视图容器 movable-view 可移动视图容器 cover-view 可覆盖在原生组件之上的文本视图容器
1.view是静态的视图容器，通常用和首尾标签来表示一个容器区域。需要注意的是，view容器本身没有大小和颜色，需由开发者自行进行样式设置。
属性名 类型 默认值 说明 hover-elass String none 指定按下去的样式类。如果是默认值none，则没有点击状态 hover-stop-propagation Boolean false 指定是香阻止本容器的祖先节点出现点击状态(1.5.O以上版本有效) hover-start-time Number 50 按住本容器后多久出现点击状态〔单位:毫秒) hover-stay-time Number 400 手指松开后点击状态保留时长〔单位:笔秒)
2.滚动视图scroll-view 是可滚动视图区域，对应的属性如表所示。 注：使用竖向滚动时，需要给一个固定高度，并且通过 WXSS 设置 height。
属性名 类型 默认值 说明 screll-x Boolean FALSE 允许横向滚动 screll-y Boolean FALSE 允许纵向滚动 upper-threshold Number 50 距顶部/左边多远时(单位px)，触发scrolltoupper事件 lower-threshold Number 50 距底部/右边多远时(单位px)，触发scrolltolower事件 scroll-top Number 设置竖向滚动条位置 scroll-left Number 设置横向邃动条位置 seroll-into-view String 值应为某子元素id(id不能以数字开头)。设置哪个方向可该动，则在哪个方向滚动到该元素 scroll-with-animatian Boolean FALSE 在设置滚动条位置时使用动画过波 enable-back-to-top Boolean FALSE iOS点击顶部状态栏、安卓双击标题栏时。滚动条返回顶部，只支持竖向 bindlserolltoupper EventHandle 滚动到顶部/左边，会触发scrolltoupper事件 bindseroll EventHandle 滚动到底部/右边，会触发scrolltolower事件
3.滑块视图swiper-view 也称为滑块视图容器，通常使用该组件制作幻灯片切换播放效果。组件的可用属性如表所示。
< swiper indicator- dots autoplay> < / swiper>
上述代码表示希望实现一个带有指示点的滑块视图容器，并且需要自动播放。但是仅凭这一句代码是不够的，标签必须配合组件一起使用，该组件才是用于切换的具体内容。 中可以包含文本或图片，其宽高默认为100%。并且需要注意的是，组件中可直接放置的只有组件，否则会导致未定义的行为。
4.可移动视图movable-view 也称为可移动的视图容器，该组件可以在页面中拖拽滑动。该组件不能独立使用，必须放在组件中且是直接子节点，否则无效。
属性名 类型 默认值 说明 seale-area Boolean FALSE 当里面的movable-view设置为支持双指缩放时，设董此伯可格绾放手势生效区域修改为整个movable-area
注：movable-area 可以自定义width和height属性，其默认值均为10px。
5.是可以覆盖在原生组件上的文本视图，可覆盖的原生组件包括：map、video、canvas、camera、live-player、live-pusher等。其内部只允许嵌套使用、和。
属性名 类型 说明 scroll-top Number 设置顶部滚动烷移量。仅在设置了overflow-y: scroll成为滚动元素后生效 sre String 安标路径，支持临时路径、网络地址〔1.6.0起支持》，暂不支持base64格式 binelead EventHandle 图片加越成功时触发 bindlerrer EventHandle 图片加载失败时触发
基础组件主要包含4种
组件名称 解释 icon 图标组件 text 文本组件 rich-text 富文本组件 progress 进度条组件
1.为图标组件，开发者可以自定义其类型、大小和颜色。该组件对应的属性如表所示。
属性名 类型 默认值 说明 type String none 图标类型 size Number 23 图标大小，单位: px color Color 无 图标颜色，柄败color="red
例如，依次生成红、黄、蓝色的信息图标。代码如下：
< ! -- WXML -- >
< view>
< block wx: for = "{{iconColor}}" >
< icon type= "info" color= "{{item}}" / >
< / block>
< / view>
Page ( {
data: {
iconColor: [ 'red' , 'yellow' , 'blue' ]
} )
2.text为文本组件，该组件对应的属性如表所示。
属性名 类型 默认值 说明 selectable Boolean FALSE 文本是否可选 space string FALSE 显示连续空格 decode Boolean FALSE 是否解码
3.为富文本组件，该组件对应的属性如表所示。
属性名 类型 默认值 说明 nodes Array / stringo [] 节点列表/HTML String
例如，在WXML中声明一个富文本组件，代码如下：
< rich- text nodes= '{{nodes}}' > < / rich- text>
其中{{nodes}}为自定义名称的变量，用于定义HTML内容。 如果是用纯字符串（String类型）描述HTML代码，在JS中表示如下：
Page ( {
data: {
nodes: '<div style="line-height: 60px; color: red;">Hello World!</div>'
}
} )
4.progress为进度条组件，该组件对应的属性如表所示。
属性名 类型 默认值 说明 percent Float 无 百分比0~100 show-info Boolean FALSE 在进度条右侧显示百分比 stroke-width Number 6 进度条线的宽度，单位px color Color #09BBO7 进度条颜色(请使用activeColor) activeColor Color 已远择的进度条的顿色 backeroundColor Color 未选择的进度条的频色 baekerounelColor Color 未选择的进度条的顿色 active Boolean FALSE 进度条从左往右的动画
例如，声明一个目前正处于80%刻度，并且宽20px的进度条组件。WXML代码如下：
< progress percent= "80" stroke- width= "20" / >
表单组件主要包含10种，如表所示。
组件名称 解释 button 按钮组件 checkbox 复选框组件 form 表单组件 input 输入框组件 picker 从底刻部单起的滚动选择器 picker-view 嵌入页面的滚动选择器 radio 单选框组件 slider 滑动条组件 switch 开关选择器 textarea 文本框组件
为按钮组件，该组件对应的常用属性如表所示。
属性名 类型 默认值 说明 size String default 按钮的大小 type String default 按钮的样式类型 plain Boolean FALSE 按钮是否镂空，背景色透明 cisabledl Boolean FALSE 是否禁用 loading Boolean FALSE 名称前是否带loading图标 form-type String 用于组件，点击分别会触发组件的submit/reset事件 open-type String 微信开放能力 hover-elass String button-hover 指定按钮按下去的样式类。当hover-class="none”时，没有点击态效果 hover-stop-prepagation Boolean FALSE 指定是否阻止本节点的祖先节点出现点击态 hover-start-time Number 20 按住后多久出现点击生态，单位毫秒 hover-stay-time Number 70 手指松开后点击态保留时间，单位毫秒
注：hover-class 的属性值button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}
组件的属性值如表所示。
属性名 类型 解释 备注 value string 组件所携带的标识值 当的change事件被触发时。会携带该值 checked Boolean 是否选中该组件 其默认值为false disabled Boolean 是否禁用该组件 其默认值为false color color 组件的颜色 与css中的color效果相同
为输入框组件，其属性值如表所示。
属性名 类型 默认值 说明 value String 输入框的初始内容 type String “text” input的类型 password Boolean FALSE 是否是密码类型 placeholder String 输入框为空时占位符 placeholder-style String 指定placeholder的样式 placeholder-class String “input-placeholder” 指定 placeholder的样式类 disabled Boolean FALSE 是否禁用 maxlength Number 140 最大输入长度，设置为-1的时候不限制最大长度 cursor-spacing Number 0 指定光标与键盘的距离，单位px。取input距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离 auto-focus Boolean FALSE (即将废弃，请直接使用focus )自动聚焦，拉起键盘 focus Boolean FALSE 获取焦点 confirm-type String “done” 设置健盘右下角按钮的文字。(最低版本1.1.0) confirm-hold Boolean FALSE 点击键盘右下角按钮时是否保持键盘不收起.(最低版本1.1.0) cursor Number 指定focus时的光标位置。(最低版本1.5.0) selection-start Number -1 光标起始位置，自动聚集时有效，需与selection-end搭配使用。(最低版本1.9.0) selection-end Number -1 光标结束位置，自动聚集时有效，需与selection-start搭配使用。〔最低版本1.9.0) adjust-position Boolean TRUE 键糕弹起时，是否自动上推页面。(最低版本1.9.90) bindinput EventHandle 键盘输入时触发,event.detail = fvalue, cursor, keyCode}.
keyCode为键值，2.1.0起支持，处理函数可以直接return 一个字符串，将替换输入框的内容。
以多选框为例，使用标签的for属性代码如下：
< checkbox- group>
< checkbox id= 'apple' value= 'apple' checked / >
< label for = 'apple' > 苹果< / label>
< / checkbox- group>
也可以将组件直接放在内：
< checkbox- group>
< label>
< checkbox value= 'apple' checked / > 苹果
< / label>
< / checkbox- group>
是从底部弹起的滚动选择器组件，目前根据mode属性值的不同共支持五种选择器：
普通选择器
开发者可以自由更改数组内容和元素个数，运行效果如图所示。
对应的JS代码片段如下：
Page ( {
data: {
selectorItems: [ '苹果' , '香蕉' , '葡萄' ]
} ,
selectorChange : function ( e ) {
let i = e. detail. value;
let value = this . data. selectorItems[ i] ;
this . setData ( { selector: value} ) ;
}
} )
多列选择器
对应的JS代码片段如下：
Page ( {
data: {
multiSelectorItems: [ [ '智' , '慧' ] , [ '云' , '工' , '具' ] , [ '箱' , '' ] ]
} ,
multiSelectorChange : function ( e ) {
let arrayIndex = e. detail. value;
let array = this . data. multiSelectorItems;
let value = new Array ( ) ;
for ( let i= 0 ; i< arrayIndex. length; i++ ) {
let k = arrayIndex[ i] ;
let v = array[ i] [ k] ;
value. push ( v) ;
}
this . setData ( { multiSelector: value } ) ;
}
} )
时间选择器
对应的JS代码片段如下：
Page ( {
timeChange : function ( e ) {
let value = e. detail. value;
this . setData ( { time: value } ) ;
}
} )
日期选择器
对应的JS代码片段如下：
Page ( {
dateChange : function ( e ) {
let value = e. detail. value;
this . setData ( { date: value } ) ;
}
} )
省市区选择器
对应的JS代码片段如下：
Page ( {
regionChange : function ( e ) {
let value = e. detail. value;
this . setData ( { region: value } ) ;
}
} )
是嵌入页面的滚动选择器，相关属性如表所示
属性名 类型 说明 value NumberArray 数组中的数字依次表示 picker-view内的 picker-view-column 选择的第几项(下标从О开始)，数字大于 picker-view-column可选项长度时，选择最后一项 indicator-style String 设置选择器中间选中框的样式 indicator-class String 设置选择器中间选中框的类名 mask-style string 设置蒙层的样式 mask-class String 设置蒙层的类名 bindchange EventHandle 当滚动选择，value改变时触发change 事件，event.detail = {value: value};value为数组，表示 picker-view内的 picker-view-column当前选择的是第几项(下标从0开始)
为单选项目组件，往往需要与单项选择器组件配合使用，其中首尾标签之间可以包含若干个组件。
组件只有一个属性，如表所示。
属性名 类型 解释 备注 bindchange EventHandle 当内部<radio组件选中与否发生改变时触发change事件。 携带值为:event.detail(value:被选中radio组件的value值}
组件的属性值如表所示。
属性名 类型 解释 备注 value string 组件所携带的标识值 当的change事件被触发时，会携带该值 checked Boolean 是香选中该组件 其默认值为false disabled Boolean 是否禁用该组件 其默认值为false color color 组件的颜色 与c5s中的color效果相同
为滑动选择器。该组件对应的属性如表所示。
属性名 类型 默认值 说明 min Number 0 最小值，允许是负数 max Number 100 最大值 step Number 1 步长,取值必须大于0，并且可被(max - min)整除 disabled Boolean FALSE 是否禁用 value Number 0 当前取值 color Color #e9e9e9 背景条的颜色(请使用backgroundColor) selected-color Color #1aad19 已选择的颜色(请使用activeColor) activeColor Color #1aad19 已选择的颜色 backgroundColor Color #e9e9e9 背景条的颜色 block-size Number 28 滑块的大小，取值范围为12- 28 block-color Color #ffffff 滑块的颜色 show-value Boolean FALSE 是否显示当前value bindchange EventHandle 完成—次拖动后触发的事件,event.detail = {value: value} bindchanging EventHandle 拖动过程中触发的事件，event.detail = {value: value}
导航组件用于点击跳转页面链接，其对应的属性如表所示。
属性名 类型 默认值 说明 target String 在哪个目标上发生跳转，默认当前小程序 url string 当前小程序内的跳转链接地址 open-type string navigate 跳转方式，共有5种方式
在新页面JS文件的onLoad函数中可以获取到该参数，代码如下：
Page ( {
onLoad : function ( options ) {
console. log ( options. date) ;
}
} )
媒体组件目前主要包含4种，如表所示。
组件名称 解释 audio 音频组件 image 图片组件 video 视频组件 camera 相机组件
可以用于播放本地或网络音频
可以用于显示本地或网络图片，其默认宽度为300px、高度为225px。
可用于播放本地或网络视频资源，其默认宽度为300px、高度为225px
系统相机组件，基础库 1.6.0 开始支持，低版本需做兼容处理。在真机测试时，需要用户授权 scope.camera
是地图组件，根据指定的中心经纬度可以使用腾讯地图显示对应的地段。
属性名 类型 说明 longitude Number 中心经度 latitude Number 中心纬度 scale Number 缩放级别，取值范围为5-18。默认值为16 markers Array 标记点 covers Array 即将移除，请使用markers替代。 polyline Array 路线 circles Array 圆 controls Array 即将废弃，请使用cover-view替代。 inelude-points Array 缩放视野以包含所有给定的坐标点 show-location Boolean 显示带有方向的当前定位点 bindmarkertap EventHandle 点击标记点时触发，会返回marker的id bindcallouttap EventHandle 点击标记点对应的气泡时触发。会返回marker的id bindcontroltap EventHandle 点击控件时触发，会返回control的id bindregionehange EventHandle 视野发生变化时触发 bindtap EventHandle 点击地图时触发 bindupdated EventHandle 在地图渲染更新完成时触发
例题
map.js文件
data: {
latitude: 39.917940 ,
longitude: 116.397140 ,
markers: [ {
id: '001' ,
latitude: 39.917940 ,
longitude: 116.397140 ,
iconPath: '/images/zhygjx/location.png' ,
label: {
content: '故宫博物院'
}
} ]
} ,
regionChange : function ( e ) {
console. log ( 'regionChange被触发，视野发生变化。' ) ;
} ,
map.wxml文件
< view class = 'page-body' >
< view class = 'title' > 地图组件map的简单应用< / view>
< view class = 'demo-box' >
< view class = 'title' > 北京故宫博物院< / view>
< map latitude= '{{latitude}}' longitude= '{{longitude}}' markers= '{{markers}}' bindregionchange= 'regionChange' >
< / map>
< / view>
< / view>
mao.wxss文件
map{
width: 100 % ;
height: 600 rpx;
}
为画布组件，其默认尺寸是宽度300px、高度225px。 该组件对应的常用属性如表所示。
属性名 类型 默认值 说明 canvas-iel String canvas组件的唯一标识符 eisable-seroll Boolean FALSE 当在canvas中移动时且有绑定手势事件时，禁止屏慕邃动以及下拉刷所 lbindltouehstart EventHandle 手指触摸动作开始 bindltouehmove EventHandle 手指触摸后移动 bindltouchend EventHandle 手指触摸动怍作结束 bindtoucheancel EventHandle 手指触摸动作被打断，如来电提醒，弹奋 bindlongtap EventHandle 手指长按500ms之后,发，社发了长按事件后进行移动不会触发屏慕的滚动 bsindlerrer EventHandle 当发生错误时触发error事件，detail =ierMsg: "something wrong’}
在组件声明完毕后，一个简单的画图工作主要分为三个步骤：
步骤一：声明画布上下文（CanvasContext）。
步骤二：使用画布上下文进行绘图描述（例如设置画笔颜色）。
步骤三：画图。
Page ( {
onLoad : function ( options ) {
const ctx = wx. createCanvasContext ( 'myCanvas' )
ctx. setFillStyle ( 'orange' )
ctx. fillRect ( 20 , 20 , 150 , 80 )
ctx. draw ( )
}
} )
本文详细介绍了微信小程序的基础组件，包括视图容器、基本内容、表单组件、导航组件、媒体组件、地图组件、画布组件，以及如何使用这些组件创建交互丰富的页面。例如，视图容器中的滚动视图容器可实现页面滚动，表单组件如按钮、输入框、选择器用于用户交互，媒体组件则涵盖了音频、图片和视频的展示。同时，文章还提供了各个组件的属性、事件和用例，帮助开发者更好地理解和应用小程序组件。
扫一扫
4258
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
