微信小程序组件

文章目录

微信小程序组件
一、小程序组件
- 1.组件介绍
- 2.组件分类
二、视图容器
三、基本内容
四、表单组件
五、导航组件
六、媒体组件
七、地图组件
八、画布组件
九、推荐小程序（欢迎各位大佬指导）

一、小程序组件

1.组件介绍

小程序组件是视图层的基本组成单元，它自带微信风格UI样式和特定功能效果。例如，我们在小程序页面上所看到的图片、文本、按钮等都属于小程序组件。小程序为开发者提供了一系列基础组件，通过组合这些组件可以进行更高效地开发。

<text id="demo">这是一段文本内容。</text>

其中id属性是一个通用属性，可以被所有组件使用。小程序目前提供七类通用属性，如表所示。

属性名称	类型	解释	备注
id	String	组件的唯一标示	在同一个页面中用id值标示唯一组件，因此同一页不能有多个id值相同
elass	String	组件的样式类	该属性值在wXSS中进行定义和样式内客的设置
style	String	组件的内联样式	可以动态设晋内联样式
data-*	Any	自定义属性	当组件触发事件时，会附带将该厘性和值发送给对应的事件处理函数
bind/cateh	EventHandler	组件的事件	绑定/捕获组件事件

2.组件分类

基础组件按照功能主要分类如下：
1.视图容器（View Container）：主要用于规划布局页面内容；
2.基础内容（Basic Content）：用于显示图标、文字等常用基础内容；
3.表单组件（Form）：用于制作表单；
4.导航组件（Navigation）：用于跳转指定页面；
5.媒体组件（Media）：用于显示图片、音频、视频等多媒体内容；
6.地图组件（Map）：用于显示地图效果；
7.画布组件（Canvas）：用于绘制图画内容。

二、视图容器

视图容器组件主要包含5种，如表所示。

组件名称	解释
view	视图容器
scroll-view	可滚动视图容器
swiper	滑块视图容器
movable-view	可移动视图容器
cover-view	可覆盖在原生组件之上的文本视图容器

1.视图容器

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.可滚动视图容器

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.滑块视图容器

3.滑块视图swiper-view 也称为滑块视图容器，通常使用该组件制作幻灯片切换播放效果。组件的可用属性如表所示。

<swiper indicator-dots autoplay></swiper>

上述代码表示希望实现一个带有指示点的滑块视图容器，并且需要自动播放。但是仅凭这一句代码是不够的，标签必须配合组件一起使用，该组件才是用于切换的具体内容。中可以包含文本或图片，其宽高默认为100%。并且需要注意的是，组件中可直接放置的只有组件，否则会导致未定义的行为。

4.可移动视图容器

4.可移动视图movable-view 也称为可移动的视图容器，该组件可以在页面中拖拽滑动。该组件不能独立使用，必须放在组件中且是直接子节点，否则无效。

属性名	类型	默认值	说明
seale-area	Boolean	FALSE	当里面的movable-view设置为支持双指缩放时，设董此伯可格绾放手势生效区域修改为整个movable-area

注：movable-area 可以自定义width和height属性，其默认值均为10px。

5.可覆盖在原生组件之上的文本视图容器

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.图标组件

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>

//JS
Page({
    
    
  data: {
    
    
    iconColor: ['red', 'yellow', 'blue']
})

2.文本组件

2.text为文本组件，该组件对应的属性如表所示。

属性名	类型	默认值	说明
selectable	Boolean	FALSE	文本是否可选
space	string	FALSE	显示连续空格
decode	Boolean	FALSE	是否解码

3.富文本组件

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.进度条组件

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	文本框组件

1.按钮组件

为按钮组件，该组件对应的常用属性如表所示。

属性名	类型	默认值	说明
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;}

2.复选框组件

组件的属性值如表所示。

属性名	类型	解释	备注
value	string	组件所携带的标识值	当的change事件被触发时。会携带该值
checked	Boolean	是否选中该组件	其默认值为false
disabled	Boolean	是否禁用该组件	其默认值为false
color	color	组件的颜色	与css中的color效果相同

3.输入框组件

为输入框组件，其属性值如表所示。

属性名	类型	默认值	说明
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 一个字符串，将替换输入框的内容。
bindfocus|EventHandle||输入框聚焦时触发,event.detail = { value, height }. height为键盘高度，在基础库1.9.90起支持
bindblur|EventHandle||输入框失去焦点时触发,event.detail = {value: value}
bindconfirm|EventHandle||点击完成按钮时触发,event.detail = {value: value}

4.标签label

以多选框为例，使用标签的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>

5.从底部单起的滚动选择器

是从底部弹起的滚动选择器组件，目前根据mode属性值的不同共支持五种选择器：普通选择器开发者可以自由更改数组内容和元素个数，运行效果如图所示。对应的JS代码片段如下：

Page({
    
    
  data: {
    
    
    selectorItems:['苹果','香蕉','葡萄']
  },
  selectorChange: function (e) {
    
    
    let i = e.detail.value;//获得选项的数组下标
    let value = this.data.selectorItems[i];//获得选项的值
    this.setData({
    
    selector:value});//将选项名称更新到WXML页面上
  }
})

多列选择器对应的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];//第i个数组的元素下标
      let v = array[i][k];//获得第i个数组的元素值
      value.push(v);//往数组中追加新元素
    }
    this.setData({
    
     multiSelector: value });//将选项名称更新到WXML页面上
  }
})

时间选择器对应的JS代码片段如下：

Page({
    
    
  timeChange: function (e) {
    
    
    let value = e.detail.value;//获得选择的时间
    this.setData({
    
     time: value });//将选项名称更新到WXML页面上
  }
})

日期选择器对应的JS代码片段如下：

Page({
    
    
  dateChange: function (e) {
    
    
    let value = e.detail.value;//获得选择的日期
    this.setData({
    
     date: value });//将选项名称更新到WXML页面上
  }
})

省市区选择器对应的JS代码片段如下：

Page({
    
    
  regionChange: function (e) {
    
    
    let value = e.detail.value;//获得选择的省市区
    this.setData({
    
     region: value });//将选项名称更新到WXML页面上
  }
})

6.嵌入页面的滚动选择器

是嵌入页面的滚动选择器，相关属性如表所示

属性名	类型	说明
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开始)

7.单选框组件

为单选项目组件，往往需要与单项选择器组件配合使用，其中首尾标签之间可以包含若干个组件。组件只有一个属性，如表所示。

属性名	类型	解释	备注
bindchange	EventHandle	当内部<radio组件选中与否发生改变时触发change事件。	携带值为:event.detail(value:被选中radio组件的value值}

组件的属性值如表所示。

属性名	类型	解释	备注
value	string	组件所携带的标识值	当的change事件被触发时，会携带该值
checked	Boolean	是香选中该组件	其默认值为false
disabled	Boolean	是否禁用该组件	其默认值为false
color	color	组件的颜色	与c5s中的color效果相同

8.滑动条组件

为滑动选择器。该组件对应的属性如表所示。

属性名	类型	默认值	说明
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);//将在控制台打印输出20180803
  }
})

六、媒体组件

媒体组件目前主要包含4种，如表所示。

组件名称	解释
audio	音频组件
image	图片组件
video	视频组件
camera	相机组件

1.音频组件

可以用于播放本地或网络音频

2.图片组件

可以用于显示本地或网络图片，其默认宽度为300px、高度为225px。

3.视频组件

可用于播放本地或网络视频资源，其默认宽度为300px、高度为225px

4.相机组件

系统相机组件，基础库 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: 600rpx;
}

在这里插入图片描述

八、画布组件

为画布组件，其默认尺寸是宽度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) {
    
    
    //1.创建画布上下文
    const ctx = wx.createCanvasContext('myCanvas')
    //2.设置填充颜色
    ctx.setFillStyle('orange')
    //3.设置填充区域为矩形
    ctx.fillRect(20, 20, 150, 80)
    //4.画图
    ctx.draw()
  }
})

九、推荐小程序（欢迎各位大佬指导）