【微信小程序实战教程】之微信小程序核心组件详解

微信小程序核心组件

组件化开发并不是小程序所特有的，一些其他编程语言中都有组件化的概念，准确来讲，只有UI视图层的展示，就必定要用到组件化。组件是UI视图层的最基本组成单元，组件中包含了一些基础功能和基础样式，一个组件就类似于一个自定义的标签。

小程序框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发，那么微信小程序提供的基础组件肯定是要完成小程序开发的基础功能与微信风格保持一致的样式。

1 视图容器组件

视图容器组件主要用于控制页面的内容，与HTML中的<div>标签功能类似，可以把小程序的容器组件理解为一个盒子容器，可以将其他组件填充在该容器组件中。小程序提供的视图容器组件主要包括以下几种：

• view 视图容器，这是在开发中最常用的一种容器组件；
• scroll-view 可滚动视图容器；
• swiper 轮播组件；
• movable-view 可移动容器；
• cover-view 覆盖在原生组件之上的文本视图。

小程序提供的视图容器组件除了上述的一些常用组件之外，还有其他的组件，例如 cover-image、match-media、page-container等。每个组件的应用场景不同，但是在实际开发中，最常用的只有视图容器view组件、滑块视图容器swiper组件、可滚动视图容器 scroll-view 组件、可移动视图容器 movable-view 组件、原生视图容器 cover-view 组件等五大视图容器组件。

1.1 视图容器

view作为小程序最基础的视图容器组件，其被使用的机会非常多。view组件的作用和HTML代码中的 <div> 容器标签相似，都是用于管理页面中的元素。

view视图容器组件上可以定义以下属性：

• hover-class，值为字符串类型，用于指定组件被按下时的样式；
• hover-stop-propagation，值为boolean类型，用于指定是否阻止本节点的祖先节点出现点击状态；
• hover-start-time，值为数字类型，用于指定按住后多久出现点击状态，单位为毫秒；
• hover-stay-time，值为数字类型，用于指定手指松开后点击状态保留的时长，单位为毫秒；

view组件可以和WXSS配合，完成页面布局效果，示例代码如例1所示。

【例1】view实现宫格布局

// index.wxml
<view class="row">
    <view class="col">A</view>
    <view class="col">B</view>
    <view class="col">C</view>
    <view class="col">D</view>
    <view class="col">E</view>
    <view class="col">F</view>
</view>

// index.wxss
.row{
   
   
  display: flex;
  flex-wrap: wrap;
}
.col{
   
   
  border: 1px solid #000;
  min-height: 150rpx;
  width: 30%;
  margin: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

上面示例代码运行后的效果如图1所示。

图1 view实现宫格效果

1.2 滑块视图容器

很多购物商城类小程序中，经常会在首页放置一些轮播图的特效，用于循环播放热销商品信息，小程序基础组件中的swiper滑块视图容器就可以实现这种图片轮播的效果。swiper滑块视图容器组件的属性如表1所示。

swiper滑块组件容器组件中要放置swiper-item组件，否则将无法实现轮播效果，每个swiper-item组件为轮播中的一个滑块元素，宽高默认均为100%。在swiper-item组件上可以定义两个属性：

• 一个是item-id，表示该swiper-item的唯一标识符；
• 另一个属性是skip-hidden-item-layout，值为boolean类型，用于表示是否跳过未显示的滑块布局，如果值为 true时，可以优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息。

swiper滑块容器组件上除了上述的一些属性之外，还可以定义三个事件，分别是：

• bindchange事件，当组件上的current属性改变时触发该事件；
• bindtransition事件，当swiper-item的位置发生改变时触发该事件；
• bindanimationfinish事件，当动画结束时会触发该事件。

组件上的change事件函数有两个默认参数，一个是current，表示当前改变的current属性值；另一个参数是source，表示导致变更的原因，原因的值又存在三种情况：

• 值为autoplay，表示由于自动播放导致swiper的current属性发生改变；
• 值为touch，表示用户手动滑动屏幕导致swiper发生变化；
• 值为空字符串，由于其他原因引起的swiper发生变化；

如果在bindchage的事件回调函数中使用setData()函数改变current的值，会导致setData()函数不停的被调用，引起程序死循环。如果开发者想要通过代码来改变current的值，在调用setData()方法之前应该先检查一下source字段的值是否是由于用户触摸引起的，这样就可以避免程序死循环的情况出现。

在小程序页面中实现轮播图效果的示例代码如例2所示。

【例2】实现轮播图代码

// index.wxml
<view class="swiper-body">
    <swiper 
        indicator-dots
        autoplay
        circular
        indicator-color="#fff"
        indicator-active-color="#666"
    >
        <swiper-item class="swiper-item-a">A</swiper-item>
        <swiper-item class="swiper-item-b">B</swiper-item>
        <swiper-item class="swiper-item-c">C</swiper-item>
    </swiper>
</view>

// index.wxss
.swiper-body {
   
   
  color: #fff;
}
swiper-item {
   
   
  display: flex;
  justify-content: center;
  align-items: center;
}
.swiper-item-a {
   
   
  background-color: blue;
}
.swiper-item-b {
   
   
  background-color: pink;
}
.swiper-item-c {
   
   
  background-color: #ccc;
}

上面代码运行后的效果如图2所示。

图2 轮播效果

在例2的代码中，为swiper组件添加的indicator-dots、autoplay、circular三个属性没有设置属性值，如果当属性的值为boolean类型是，只要在组件中定义了该属性，即默认表示该属性的值为true。所以，swiper组件标签上添加的这三个属性，表示在轮播面板中显示滑块元素的指示点，并设置当前轮播为自动切换效果，采用衔接滑动的效果。然后又在swiper组件上定义了indicator-color属性和indicator-active-color属性，用于设置指示点的默认颜色值为“#fff”，当前选中的指示点颜色值为“#666”。

1.3 可滚动视图容器

在传统的前端Web开发中，如果当页面内容元素过多时，超出了视图容器边界范围，可以通过CSS设置该元素超出范围的部分使用滚动样式，那么在小程序中同样可以使用滚动容器组件来实现这样的效果。小程序的视图容器组件中提供了scroll-view组件，表示可滚动的视图区域组件。
scroll-view组件为开发者提供了两种滚动的方式，一种是横向滚动，另一种是纵向滚动，可以通过scroll-view组件上的属性来进行控制。scroll-view组件的可用属性如表2所示。

scroll-view组件上还可以定义一系列事件，如表3所示。

在scroll-view组件被滚动时，系统会阻止页面的回弹，所以在scroll-view中滚动时无法触发在Page构造器参数中定义的onPullDownRefresh() 页面事件处理函数，即无法使用小程序提供的接口监听用户下拉刷新事件。如果需要在滚动视图容器中监听用户的下拉刷新行为，需要使用scroll-view组件提供的相关事件来监听。

如果开发者使用的是2.4.0以下版本的基础库，在scroll-view组件中不支持嵌套textarea、map、canvas、video等组件。使用scroll-view组件实现纵向滚动的示例代码如例3所示。

【例3】纵向滚动示例

// index.wxml
<view class="scroll-container">
    <scroll-view scroll-y bindscrolltolower="onScrollBottom">
        <view class="row-item" wx:for="{
    
    {nums}}" wx:key="index">
            {
  
  {item}}
        </view>
    </scroll-view>
</view>

// index.js
Page({
   
   
  data: {
   
   
    nums: 100
  },
  onScrollBottom() {
   
   
    // 滚动区域触底时触发
    wx.showToast({
   
   
      title: '已经触底了！',
    })
  }
})

// index.wxss
.scroll-container {
   
   
  background-color: #eee;
  height: 500rpx;
}
scroll-view {
   
   
  border: 1px solid #999;
  height: 100%;
}
.row-item {
   
   
  line-height: 60rpx;
  text-align: center;
}

上面代码运行后的效果如图3所示。

图3 scroll-view组件的区域滚动效果

在例3中，为scroll-view组件添加了bindscrolltolower事件来监听滚动区域触底行为，并在index.js文件中定义onScrollBottom() 事件方法。当滚动区域触底时，弹出Toast提示，效果如图4所示。

图4 scroll-view组件滚动触底时触发Toast提示

1.4 可移动视图容器

小程序除了提供一些常用的视图容器组件之外，还提供了一个可移动的视图容器movable-view组件，用户可以在页面中使用手指滑动实现组件的拖拽滑动。movable-view组件必须要放置在movable-area组件中，并且是其直接的子节点才能实现拖拽，否则将不能移动。

movable-area组件用于定义可移动区域，该组件上有一个scale-area属性，值为boolean类型，用于设置当movable-view为双指缩放时，是否将缩放手势生效区域修改为整个movable-area容器。而且movable-area组件必须设置width和height属性，如果不设置这两个属性的话，默认宽和高的值均为10px。当movable-view组件尺寸小于movable-area容器时，movable-view组件的移动范围是在movable-area容器内；当movable-view组件尺寸大于movable-area容器时，movable-view组件的移动范围必须包含movable-area容器。

movable-view组件的属性如表4所示。

movable-view组件的事件如表5所示。

movable-view组件上的bindchange事件函数有三个默认参数，分别是x、y、source，其中，参数x和y表示组件移动的坐标位置，source表示组件产生移动的原因，其原因包括以下几个范围值：

• 当值为touch时，表示用户拖动；
• 当值为touch-out-of-bounds时，表示超出了移动的范围；
• 当值为out-of-bounds时，表示超出移动范围后的回弹；
• 当值为friction时，表示移动时的惯性；
• 当值为空字符串时，表示使用setData()函数修改了组件的位置。

在使用movable-view组件时，必须设置组件的width和height属性，如果不设置宽高属性的话，系统会默认设置movable-view组件的宽高为10px。movable-view组件默认为绝对定位，其top和left属性的值均为0px。基于movable-view组件实现页面元素的可拖拽功能示例代码如例4所示。

【例4】实现页面元素的可拖拽功能

// index.wxml
<movable-area>
    <movable-view 
        direction="all"
        inertia
        bindchange="onViewChange"
    >
        Hello
    </movable-view>
</movable-area>

// index.js
Page({
   
   
  onViewChange(options) {
   
   
    // 可移动容器位置改变事件
    const {
   
   x, y, source} = options.detail
    console.log("移动后X坐标：", x);
    console.log("移动后Y坐标：", y);
    console.log("移动原因：", source);
  }
})

// index.wxss
movable-area {
   
   
  border: 1px solid #000;
  width: 100%;
  height: 500rpx;
}
movable-view {
   
   
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #999;
  color: #fff;
}

上面代码运行后的效果如图5所示。

图5 页面元素拖拽后的效果

当拖拽页面元素时，会触发movable-view组件上的bindchange事件绑定的函数，在当前页面的Page构造器参数中定义了onViewChange() 方法，该方法上声明了options参数，可以通过该方法上的参数获取到拖拽后的坐标值以及元素移动的原因。onViewChange() 方法执行后，微信开发者工具控制台打印的效果如图6所示。

图6 元素拖拽后的参数打印效果

1.5 原生视图容器

小程序提供了cover-view和cover-image两个原生组件，帮助开发者实现对map、video、camera以及canvas等小程序原生组件的控制，可以使用cover-view和cover-image组件覆盖在其他原生组件上，从而修改这些原生组件的表现。

cover-view组件是覆盖在原生组件上的文本视图，cover-image组件是覆盖在原生组件之上的图片视图，两个组件都可以覆盖map、video、canvas、camera、live-player、live-pusher等原生组件。例如，我们可以使用cover-view组件与map组件，来实现地图上的自定义提示内容，示例代码如例5所示。

【例5】地图上的自定义提示

// index.wxml
<map
    latitude="{
    
    {latitude}}"
    longitude="{
    
    {longitude}}"
>
    <cover-view class="body">
        <cover-view class="tip">
            腾讯总部
        </cover-view>
    </cover-view>
</map>

// index.js
Page({
   
   
  data: {
   
   
    latitude: 23.099994,
    longitude: 113.324520,
  }
})

// index.wxss
map {
   
   
  width: 100%;
  height: 500rpx;
}
.body {
   
   
  height: 100%;
  width: 100%;
}
.tip {
   
   
  position: absolute;
  width: 250rpx;
  height: 80rpx;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  bottom: 90rpx;
  left: 250rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

上面代码运行后的效果如图7所示。

图7 地图的自定义提示效果

2 基础组件

小程序提供的基础组件主要用于表示页面上的基础元素，一共有四种基础组件，包括text文本组件、rich-text富文本组件、progress进度条组件、icon图标组件。

2.1 文本组件

小程序的text文本组件提供了最基础的文本展示，与HTML中的 <span> 标签类似，属于行内元素。text文本组件提供了三个属性如表6所示。

在text文本组件的属性中，decode属性比较特殊，用于标签语言中转义字符文本的解码操作。由于各个操作系统的差异，某些转义字符的解析标准有所不同，例如空格的解析在各个系统中执行的标准不一致。decode属性可以解析以下常见的转移字符：

• “ ”，表示半角的不断行空格
• “<”，表示左尖括号
• “>”，表示右尖括号
• “&”，表示特殊符号&
• “'”，表示单引号
• “ ”，表示半角的空格
• “ ”，表示全角的空格

text组件属于行内元素，与view组件不同，在text组件中只能嵌套text组件，不能嵌套view或其他组件。text文本组件的space属性有三个合法值，分别是ensp、emsp、nbsp，这三个值都是用来修饰文本中空格显示效果的，但是每个值显示的效果又不相同，具体可以参考decode转义字符中的“ ”、“ ”、“ ”。

2.2 富文本组件

我们已经学习了view视图容器组件和text文本组件，这两个组件主要起到容器的作用，view相当于一个块级元素，text相当于一个行内元素，但是在开发过程中如果遇到了一些HTML中很常用的容器，而小程序基础组件中又没有定义的话，该如何实现呢？

在小程序中如果需要用到一些传统的HTML标签，例如使用到Table标签渲染一个表格，我们可以使用小程序基础组件提供的rich-text富文本组件来实现。rich-text富文本组件上有一个nodes属性，该属性的值有两种类型，一种是Array数组类型，一种是是String字符串类型。当值为Array数组类型时，数组中的元素是每个HTML节点对象，当值为String类型时，值的内容为字符串HTML标签。

当nodes属性的值为数组时，数组中的元素为node类型的节点对象，然后再通过rich-text富文本组件将node节点对象渲染成小程序的WXML组件。node节点对象有三个字段，分别是name（标签名）、attrs（属性）、children（子节点列表）。使用node节点对象渲染HTML的示例代码如例6所示。

【例6】使用node节点对象渲染HTML

// index.wxml
<view class="body">
    <view class="title">渲染后：</view>
    <rich-text nodes="{
    
    {nodes}}"></rich-text>
</view>

// index.js
Page({
   
   
  data: {
   
   
    nodes: [{
   
   
        name: 'div',
        attrs: {
   
   
          style: 'border: 1px dashed #000'
        },
        children: [
          {
   
    type: 'text', text: 'Hello World' }
        ]
    }]
  }
})

// index.wxss
.body {
   
   
  padding: 30rpx;
}
.title {
   
   
  margin-bottom: 30rpx;
}

上面代码运行后的效果如图8所示。

图8 使用node节点对象渲染HTML的效果<