小程序学习笔记四：页面文件详解之视图层组件与自定义组件-优快云博客

本文详细介绍微信小程序中的各类组件，包括视图容器、基础组件、多媒体组件等七大类基础组件及自定义组件的创建与使用方法。

视图层组件：

组件是视图层的基本组成单元。
组件自带一些功能与微信风格的样式。
一个组件通常包括开始标签和结束标签、属性用来修饰这个组件，内容在两个标签之内。

使用格式为：

<tagname property="value">
  内容...
</tagname>

组件的通用属性：所有组件都拥有的属性

属性名	类型	描述	注解
id	String	组件的唯一标示	保持整个页面唯一
class	String	组件的样式类	在对应的 WXSS 中定义的样式类
style	String	组件的内联样式	可以动态设置的内联样式
hidden	Boolean	组件是否显示	所有组件默认显示
data-*	Any	自定义属性	组件上触发的事件时，会发送给事件处理函数
bind* / catch*	EventHandler	组件的事件	详见事件

组件分类：组件分为微信小程序基础组件和自定义组件。

基础组件

基础组件分为七大类：

一：视图容器类

基本容器：view

滚动视图容器：scroll-view（

tip: 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
tip: scroll-into-view 的优先级高于 scroll-top
tip: 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
tip: 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。）

滑块视图容器（轮播器）：swiper

可拖动组件：movable-area指定一个区域，movable-view创建一个容器，该视图容器可以在movable-area内自由拖动。

覆盖视图容器：覆盖在原生组件之上的文本视图，可覆盖的原生组件包括map、video、canvas、camera，只支持嵌套cover-view、cover-image。【例如：我们可以在video上覆盖两个按钮图片，定义点击事件控制video的播放与暂停】

二：基础组件

图标组件：icon。【通过type属性，指定图标的类型。主要有：success, success_no_circle, info, warn, waiting, cancel, download, search, clear】

文本组件：text。

富文本组件：rich-text。富文本组件通过树结构来组织内容。nodes 类型有三种：Array / HTML String。节点类型：

- 结点类型：type = node
  name 标签名 String 是支持部分受信任的HTML结点
  attrs 属性 Object 否支持部分受信任的属性，遵循Pascal命名法
  children 子结点列表 Array 否结构和nodes一致
- 结点类型：type = text
  text 文本 String 是支持entities

 nodes: "<h1 style='color:red;'>html标题</h1>", //html字符串类型
    nodes1: [{ //简单数组类型：有一个子节点
      name: "h1",
      attrs: {
        style: "color:red",
        class: "red"
      },
      children: [{
        type: "text",
        text: '结点列表标题'
      }]
    }],
    nodes2: [{//复杂数组类型：有多个子节点
      name: "ul",
      attrs: {
        style: "padding:20px;border:1px solid blue;",
        class: "red"
      },
      children: [
        {
          name: "li",
          attrs: {
            style: "color:red",
            class: "red"
          },
          children: [{
            type: "text",
            text: '多层结点 无序列表'
          }],
        }, {
          name: "li",
          attrs: {
            style: "color:red",
            class: "red"
          },
          children: [{
            type: "text",
            text: '多层结点 无序列表1'
          }],
        }]
    }]

进度条组件：progress。通过改变属性值来改变进度条状态。

三：导航组件

页面跳转组件：navigator。

属性：

url	String		应用内的跳转链接
open-type	String	navigate	跳转方式
delta	Number		当 open-type 为 'navigateBack' 时有效，表示回退的层数
hover-class	String	navigator-hover	指定点击时的样式类，当`hover-class="none"`时，没有点击态效果
hover-stop-propagation	Boolean	false	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	Number	50	按住后多久出现点击态，单位毫秒
hover-stay-time	Number	600	手指松开后点击态保留时间，单位毫秒

open-type：

navigate	对应 `wx.navigateTo` 的功能，跳转
redirect	对应 `wx.redirectTo` 的功能，重定向
switchTab	对应 `wx.switchTab` 的功能，切换tab
reLaunch	对应 `wx.reLaunch` 的功能，重新加载
navigateBack	对应 `wx.navigateBack` 的功能，返回

四：多媒体组件

音频组件：audio，可以通过按钮组件等绑定事件来控制播放、暂停、停止。

视频组件：video，可以通过一系列属性来设置播放器。

图片组件：image，支持多种缩放模式、懒加载等。

相机组件：camera，调用系统相机（前置摄像头、后置摄像头）

观看直播组件：live-player，实时音视频播放。

直播推流组件：live-pusher，实时音视频录制、推送，进行直播。

五：地图组件

map：地图组件，可以在上面标记地点、绘制气泡等。

六：绘图组件

canvas：画布，可以在上面进行涂鸦，主要是通过跟踪手指动作事件来实现的。

canvas-id	String		canvas 组件的唯一标识符
disable-scroll	Boolean	false	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart	EventHandle		手指触摸动作开始
bindtouchmove	EventHandle		手指触摸后移动
bindtouchend	EventHandle		手指触摸动作结束
bindtouchcancel	EventHandle		手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	EventHandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}

七：开放组件

开放数据：open-data，用于展示微信开放的数据。

内置浏览器：web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。

八：表单组件

表单：form。将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

按钮组件：button。

单选按钮组件：radio-group、radio。

多选框组件：checkbox-group、check-box。

输入组件：input。

多行输入文本框组件：textarea。

标签组件：label。

底部弹起的选择器（列表选择器）：picker，支持五种选择器，通过mode来区分，分别是普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认是普通选择器。

嵌入页面的滚动选择器：picker-view，可以上下滚动选择内容的选择器。

滑动选择器（拖动进度条来选择）：slider。

开关组件：switch。

自定义组件

将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

一：创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。

1：配置自定义组件

创建自定义组件后，json文件会自动生成，其中会包含组件的配置信息：

{
  "component": true
}

2：编写组件wxml模版文件

<view class="">
  <view>组件内部view内容</view>
  <slot></slot> //用于承载组件引用时提供的子节点。
</view>

这里需要注意的是slot：slot为组件提供了一个空间，可以在页面wxml引用组件模版时，嵌入一个view到slot处。

<view>
  <组件名 参数1=值1，参数2=值2...> //标签属性键值对是自定义组件wxml中用到的变量
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </组件名>
</view>

【slot可以不要，删掉即可】

3：编写组件的wxss样式文件

组件样式需要注意的是:在组件wxss中不应使用ID选择器、属性选择器和标签名选择器，而是采用 class选择器。

4：编写组件的构造器（js文件）

在js文件中定义组件的属性、数据、方法等。

properties	Object Map	否	组件的对外属性，是属性名到属性设置的映射表，属性设置中可包含三个字段， `type` 表示属性类型、 `value` 表示属性初始值、 `observer` 表示属性值被更改时的响应函数
data	Object	否	组件的内部数据，和 `properties` 一同用于组件的模版渲染
methods	Object	否	组件的方法，包括事件响应函数和任意的自定义方法，关于事件响应函数的使用，参见组件事件
behaviors	String Array	否	类似于mixins和traits的组件间代码复用机制，参见 behaviors
created	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用 `setData`
attached	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行
ready	Function	否	组件生命周期函数，在组件布局完成后执行，此时可以获取节点信息（使用 SelectorQuery ）
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行
relations	Object	否	组件间关系定义，参见组件间关系
options	Object Map	否	一些组件选项，请参见文档其他部分的说明

5：组件事件同页面事件：在wxml中绑定，在js文件中实现事件响应函数。

二：使用自定义组件

1：在页面配置文件page.json中引入组件

{
  "usingComponents": {
    "组件名": "组件路径"
  }
}

2：在页面wxml文件中使用组件名创建组件，并且在标签中通过属性配置组件需要用到的数据

<view class="">
    <组件名 参数1=值1，
               参数2=值2，
               。。。。。。>
    </组件名>
</view>

3：在页面js文件中获取组件对象，并且调用组件函数

const app = getApp()

Page({

  /**
 * 生命周期函数--监听页面初次渲染完成
 */
  onReady: function () {
    //获得组件对象
    this.组件名 = this.selectComponent("#组件名");
  },
  
  /**
  *定义函数：调用组件的方法
  */
  funcName:function(){
    this.组件名.func(param...)
  },
})