自定义组件

无特殊说明，下列的组件均指自定义组件

创建组件

自定义组件由json、wxml、wxss、js四个文件构成，和page类似。

定义自定义组件，需在其json文件中添加键值"component": true，表明其为自定义组件。

在js文件中使用Component()函数注册组件，其参数为一个对象，和page类似。

在其他地方使用组件，需在使用该组件的json文件中添加引用声明字段"usingComponents": { "component-tag-name": "path" }，全局组件可在app.json中一次引用，后续所有地方都可直接引入该组件。

自定义组件和页面所在项目根目录名不能以"wx-"开头，否则会报错文档(存疑，指南-自定义组件-介绍)

组件模板（wxml）

自定义组件的标签名，只能包含小写字母、中划线、下划线，所以引用组件（json声明组件、wxml引用组件）时，应当注意。

组件样式（wxss）

构建样式时，应该使用class选择器：

1. 不应该使用id（#a）、属性（[a]）、标签选择器，否则无效。
2. 避免使用后代选择器（.a .b），可能会出现非预期效果，且该选择器只能用于view组件与其子组件之间。

样式的继承：

1. 继承样式类型（font、color等），会自动从组件外继承
2. 非继承样式类型，不会自动继承，除非更改组件样式隔离选项

组件样式隔离；

1. 默认情况下，组件的样式只受组件自身wxss影响
2. 当在app.wxss或者页面的wxss中使用了标签名以及其他的一些特殊选择器直接指定样式时，会影响到全部组件或者页面内的组件（不推荐）
3. 当指定了样式隔离选项（js或者json中），组件的样式会受到相应的影响：

// 样式隔离选项
Component({
  options: {
    // addGlobalClass：该选项为true等同于styleIsolation：isolated（优先级更高，会覆盖addGlobalClass）
    addGlobalClass: true,

    // isolated：启用样式隔离（默认值），组件的样式只受组件自身wxss影响
    styleIsolation: 'isolated'
    // apply-shared（申请分享样式）：表示页面样式会影响到组件
    styleIsolation: 'apply-shared'
    // shared（分享样式）：表示页面样式会影响组件，组件样式会影响页面和其他设置了apply-shared或shared的组件
    styleIsolation: 'shared'

    // 当Component构造器用于构造页面时，shared为默认值，同时还有下列隔离选项
    // page-isolated：表示页面禁用app.wxss的样式，同时页面样式不会影响到组件
    styleIsolation: 'page-isolated'
    // page-apply-shared：表示页面禁用app.wxss的样式，同时页面样式不会影响到组件，但设为shared的组件会影响页面
    styleIsolation: 'page-apply-shared'
    // page-shared：表示页面禁用app.wxss的样式，同时页面样式会影响到其他设置了apply-shared或shared的组件，也会受其他设为shared的组件样式的影响
    styleIsolation: 'page-shared'
  }
})

// 也可以在json中设置样式隔离选项
{
  "styleIsolation": "isolated"
}

:host选择器：组件可以使用:host选择器指定所在根节点的默认样式，相当于该组件的全局样式

组件的结构

<!-- 组件的结构 -->
<text class="cus-t">这是一段文本</text>

组件的样式

/* 指定默认样式 */
:host {
  color: red;
  background-color: yellow;
  border: 1px solid green;
}

引用组件

<!-- 引用组件 -->
<custom-com></custom-com>

dom最终解析结果

<!-- :host选择器渲染的内容，作用在custom-com上 -->
<custom-com is="component-path">
#shadow-root
  <!-- .cus-t渲染的内容 -->
  <text class="cus-t">这是一段文本</text>
</custom-com>

外部样式类：

使用场景：组件希望接受外部传过来的样式

用法：在Component中externalClasses定义一个接受的外部样式的类是数组

// 定义接受的样式类数组
Component({
  externalClasses: ['red-text', 'large-text']
})

<!-- 页面或其他组件中使用组件 -->
<custom-com class="red-text"></custom-com>
<custom-com class="large-text"></custom-com>
<!-- 定义多个样式类 -->
<custom-com class="red-text large-text"></custom-com>

注意：

1. 同一个节点上使用普通样式类和外部样式类时，没有优先级之分，所以应当避免同时使用具有相同功能的两种样式

其他方法引用页面、父组件的样式：

场景：在启用了样式隔离isolated，同时未引入外部样式类的情况下，还想引用父级的类样式

使用：

1. 引用页面的样式类：直接在组件内部使用形如class="~page-red-text"的方式，就能在该元素上引入页面的page-red-text样式类
2. 引用父组件的样式：直接在组件内部使用形如class="^的方式，就能在该元素上引入父组件的parent-red-text"的方式，就能在该元素上引入父组件的parent-red-text样式类，若想引用祖先组件的样式类，根据层级数来确定^的数量，比如祖组件为^^，曾祖组件为^^^

注意：

1. 若组件是独立通用的组件，优先使用外部样式类的方式

虚拟化组件节点：

知识点：

1. 默认情况下，组件本身那个节点（比如custom-com）是一个普通的节点，使用时可以在其上面设置class、style等，如同view组件一样

场景：若自定义组件不希望该节点本身进行设置样式，而是希望内部的第一层节点响应该样式时，可以将该组件节点设置为虚拟节点

使用：在Component中的options选项设置virtualHost: true

注意：设置了虚拟节点后，若想使用自定义节点上的style和class，应当将，

1. 在properties中添加style属性，以获取style设置的值
2. 在externalClasses中添加值为class的元素，让组件wxml内部可以使用class值(未实现，指南-自定义组件-组件模板和样式)

Component构造器

知识点：

1. Component构造器可用于定义组件，调用该构造器可以指定组件的属性、数据、方法
2. Component还可用于构造页面，用法和定义组件类似，此时：
   1. 需要在json文件中包含usingComponents字段
   2. 组件的属性properties可以用于接收访问页面的参数page/index?paramA=10，若properties中声明了paramA，该值会被初始化为10
   3. 页面的生命周期方法（以on开头的）应该写在methods中

组件中的实例this：

• 组件实例可以在组件的methods、lifetimes、observers中通过this进行访问
• 生命周期函数无法在组件methods中通过this访问到

组件实例的通用属性：

• is：组件的文件路径
• id：节点id
• dataset：节点的dataset值，即在wxml中以data-开头的属性
• properties：外部传入的组件属性数据
• data：组件内部数据
• router：相对于当前组件的Router对象
• pageRouter：相对于当前组件所在页面的Router对象
• renderer：渲染当前组件的渲染后端

组件实例的通用方法：

• setData：设置data并将其渲染在视图层
• triggerEvent：触发事件，传递数据给父组件，参数为(name, detail, options)
• createSelectorQuery: 创建一个SelectorQuery对象，范围是该组件内
• selectComponent：使用选择器选中组件实例节点，返回匹配到的第一个组件实例，参数为(selector)
• selecAllComponents：返回匹配到的所有组件实例，参数为(selector)
• selectOwnerComponent：返回当前组件节点实例
• getRelationNodes：获取这个关系对应的所有关联节点，参数为(relationKey)
• hasBehavior：检查组件是否具有behavior
• getTabBar：返回当前页面自定义的tabBar
• animate、clearAnimation：动画

// Component构造器
Component({
  // 组件选项
  options: {},
  // 公有的行为
  behaviors: [],
  // 组件接受的外部样式类，之后可以在组件内部使用该样式类
  externalClasses: [string],
  // 组件外部传入的属性（类似vue的props）
  properties: {
    // 属性名采用驼峰写法，而在wxml中使用中划线写法
    propertyName: {
      // 表示属性的类型，为null表示任意类型
      // 当指定了一个确切的类型后，在wxml中设置值时，字符串的内容会规定为该确切的内容，而非字符串形式
      type: Number,
      // 若属性类似有多种，可指定该属性，为array，表示属性是Number、String、Object三者中的一种
      optionalTypes: [String, Object],
      // 属性初始值
      value: null,
      // 属性变化时的回调函数，不推荐，现推荐使用监听器observers监听
      observer (newV, oldV) {}
    }
  },
  // 组件内部数据
  data: {},
  // 监听器，类似vue中的watch，用于监听properties和data
  observers: {
    'dataName' (val) {}
  }
  // 生命周期函数
  lifetimes: {
    created () {},
    // 生命周期函数的值可以是函数，或者是定义的方法名，同时这些函数可以写在和lifetimes同级下
    attached () {},
    moved () {},
    detached: 'detachedM',
    ready () {}
  },
  // 组件的关系
  relations: {},
  // 生命周期函数的值可以是函数，或者是定义的方法名，同时这些函数可以写在和lifetimes同级下
  // 此处的生命周期函数会被lifttimes下同名函数覆盖
  attached () {},
  // 组件所在页面的生命周期函数
  pageLifetimes: {
    show () {},
    hide () {}
  },
  // 组件方法，包括事件响应函数和其他自定义方法
  methods: {
    detachedM () {},
    // 内部方法建议以_开头
    _showDialog () {}
  }
})

注意：

1. 使用构造器构造页面的好处是可以使用behaviors提取所有页面公用的代码段（公用的属性、方法、生命周期等）

使用插槽

在组件的wxml中使用slot标签，承载引用该组件时，插入到该组件内部的内容，和vue类似，其中：

1. 在组件的js文件中，在options字段上添加multipleSlots: true，可启用多slot支持，此时slot需要有确定的name属性
2. 在引用该组件时，该组件内部，在元素中添加slot="slot-name"可将该代码块插入到对应的slot上

定义组件

<view class="container">
  <slot name="first"></slot>
  <text>内容</text>
  <slot name="last></slot>
</view>

javascript

Component({
  options: {
    multipleSlots: true
  }
})

使用组件

{
  "usingComponents": {
    "show-content": "./path/path"
  }
}

xml

<view>
  <show-content>
    <view slot="first">
      <text>这是slot为first的内容</text>
    </view>
    <view slot="last">
      <text>这是slot为last的内容</text>
    </view>
  </show-content>
</view>

组件通信

组件通信的方式：

• 父组件向子组件传递数据：使用WXML数据绑定的方式，向子组件的指定属性（data-开头的、子组件设置了properties的）设置数据（json格式）
• 子组件向父组件传递数据：使用事件激发的方式（triggerEvent('event-name', data, eventOptions)），其中事件选项对象包括（bubbles：是否冒泡，capturePhase：是否有捕获阶段，composed：事件是否可以穿越组件边界，为false时，只能在引用组件的节点链上触发，不会深入嵌套组件的内部根节点）
• 父组件获取子组件实例对象：通过this.selectComponent(selector)获取子组件实例对象(this)，这样可以直接访问子组件任意数据和方法

组件结构

<!-- 页面page.wxml -->
<parent-com bind:getdata="getDataListenerOnParent">
  <child-com bind:getdata="getDataListenerOnChild">
    <!-- 此处的按钮不会触发事件，因为事件传递是从组件传给他的父组件的，此处是页面，类似根，所以不会传递 -->
    <button bindtap="onTap">开始测试点击事件</button>
  </child-com>
<parent-com>

<!-- parent-com.wxml -->
<view bind:getdata="getDataListenerOnParentRoot">
  <slot></slot>
</view>

<!-- child-com.wxml -->
<view bind:getdata="getDataListenerOnChildRoot">
  <slot></slot>
  <button bindtap="onTap">这个才会触发事件传递</button>
</view>

事件激发

// child-com.js
Compoent({
  methods: {
    onTap () {
      // 当前触发事件：getDataListenerOnChild
      this.triggerEvent('getdata', {data: {}}, {}),
      // 当前触发事件冒泡：getDataListenerOnChild、getDataListenerOnParent
      this.triggerEvent('getdata', {data:{}}, { bubbles: true }),
      // 当前会触发事件冒泡和突破组件边界：getDataListenerOnChild、getDataListenerOnParentRoot、getDataListenerOnParent
      this.triggerEvent('getdata', {data: {}}, {bubbles: true, composed: true})
    }
  }
})

注意：

1. 默认情况下，小程序和插件、插件和插件之间的组件无法通过selectComponent获取组件实例（返回null），若想获取需要自定义返回结果：
   1. 使用内置的behavior：behaviors: ['wx://component-export']
   2. Component一级字段使用export：export () { return { xxx } }
   3. 此时引用该组件时，通过selectComponent获取到的就是{ xxx }的内容

组件生命周期

定义：

• 指的是在一些特殊的时间点或遇到一些特殊的框架事件时被自动触发的函数
• 在Component中一级字段lifetimes上定义的
• 同时，在behaviors中也可以定义生命周期，且它不会和其他的behaviors的同名生命周期相互覆盖。但若一个组件多次直接/间接引用同一个behavior，该behavior的生命周期在一个触发时机内只会触发一次

常用的生命周期函数：

• created：组件实例被创建好时触发，此时this.data是组件定义时的数据，不能使用setData
• attached（连接的，附属于）：组件完全初始化完毕、进入页面节点树后触发，大多数初始化工作可以在这里进行
• detached（独立的，分离的，拆下的）：组件离开页面节点树后，即退出一个页面时，若组件还在页面节点树中，会触发

其他生命周期函数：

• ready：组件在视图层布局完成后触发
• moved：组件实例被移动到节点树另一个位置时触发
• error：组件方法抛出错误时触发

组件所在页面的生命周期，与组件并非很强的关联性，在组件有需要时方便处理，它们在pageLifetimes中定义，有：

• show：组件所在页面被展示时触发
• hide：组件所在页面被隐藏时触发
• resize：组件所在页面尺寸变化时触发

生命周期的执行顺序：

1. created：创建组件实例
2. attached：组件实例进入节点树
3. show：展示页面
4. ready：组件结构在页面布局完成

behaviors

定义：

• behaviors用于组件间代码共享，类似vue中的mixins
• behavior包含属性（properties）、数据（data）、生命周期（lifetimes）、方法（methods）
• 组件引用它时，其内容会被合并/调用
• 组件可引用多个behavior，behavior可以引用其他behavior

// behavior实例：my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {},
  data: {},
  lifetimes: {},
  methods: {}
})

// 组件引用behavior：my-component.js
const myBehavior = require('./my-behavior.js')
Component({
  behaviors: [myBehavior],
  properties: {},
  // xxx
})

组件引入behaviors时，其结构为：

1. properties：包括组件和behaviors的properties，若有同名property，引用的会覆盖被引用的（即组件的会覆盖behaviors的、behaviors会覆盖它引入的其他behaviors的）、后引入的会覆盖先引入的behaviors（数组先后顺序）
2. methods：同上
3. data：若是对象类型，会进行对象合并，其他情况同上
4. lifetimes、observers：
   1. 不同生命周期之间，遵循各自的执行顺序
   2. 相同生命周期/observer之间，与上面三个（properties、methods、data）的规则相反
   3. 同一个behavior被引用多次，其生命周期/observe只会执行一次

内置的behaviors，会为组件添加一些属性，无特殊说明时组件可以覆盖这些属性来改变它的type/添加observer：

• 'wx://form-field'：使组件有类似表单控件的行为，form组件可以识别这些子组件，在submit事件中可以获取数据
• 'wx://form-field-group'：使form组件可以识别到这个自定义组件内部所有的表单控件，在submit事件中可以获取数据
• 'wx://form-field-button'：使form组件可以识别到自定义组件内部的button，若该button设置了form-type，他将被form组件接受，效果和直接写在form内部的一样
• 'wx://component-export'：使自定义组件支持export字段，该字段函数返回用于指定组件被selectComponent调用时的返回值

wx://form-field

// sub-com.wxml
<input value="{{value}}" bindinput="onChange"/>

// sub-com.js
Component({
  behaviors: ['wx://form-field'],
  methods: {
    onChange (e) {
      this.setData({
        value: e.detail.value
      })
    }
  }
})

// 引入sub-com：com.wxml
<form bindsubmit="formSubmit">
  <sub-com name="sub-com-name"/>
  <sub-com name="sub-com-name-2"/>
  // 点击提交时，会触发事件formSubmit
  <button form-type="submit">提交</button>
</form>

// com.json
{
  "usingComponents": "./sub-com/"
}

// com.js
Page({
  formSubmit (e) {
    // 值为：{ "sub-com-name": "xxx", "sub-com-name-2": "xxx" }
    console.log(e.detail.value)
  }
})

wx://form-field-group

// sub-com.wxml
<input name="name" value="{{value}}" bindinput="onChange"/>
<switch name="sex" value="{{value2}}" xxx/>


// sub-com.js
Component({
  behaviors: ['wx://form-field-group'],
  methods: {
    onChange (e) {
      this.setData({
        value: e.detail.value
      })
    }
  }
})

// 引入sub-com：com.wxml
<form bindsubmit="formSubmit">
  <sub-com/>
  // 点击提交时，会触发事件formSubmit
  <button form-type="submit">提交</button>
</form>

// com.json
{
  "usingComponents": "./sub-com/"
}

// com.js
Page({
  formSubmit (e) {
    // 值为：{ "name": "xxx", "sex": "xxx" }
    console.log(e.detail.value)
  }
})

wx://form-field-button

// sub-com.wxml
// 点击提交时，会触发事件formSubmit
<button form-type="submit">提交</button>


// sub-com.js
Component({
  behaviors: ['wx://form-field-button']
})

// 引入sub-com：com.wxml
<form bindsubmit="formSubmit">
  <input name="name"/>
  <sub-com/>
</form>

// com.json
{
  "usingComponents": "./sub-com/"
}

// com.js
Page({
  formSubmit (e) {
    // 值为：{ "name": "xxx" }
    console.log(e.detail.value)
  }
})

组件间关系

场景：解决组件间相互通信复杂的问题

使用：

• 在具有关联性的各方组件定义时都加入relations一级字段

ralation字段属性：

• type：表示关联节点多方之间的关系，有parent、child、ancestor（祖先）、descendant（后代）
• 关联生命周期函数：linked、linkChanged、unlinked
• target：设置了该项，表示各关联方是通过一个公有的behavior关联的，所有拥有这个behavior的组件都会被关联

父子关联

// 引入父子组件
<parent-com>
  <child-com/>
</parent-com>

// parent-com.js
Component({
  relations: {
    // 字段名为路径名
    './child-com': {
      // 表示关联的child-com节点为它的子节点
      type: 'child',
      // child-com每次插入到该组件内部时执行，target是child-com节点实例对象，该函数在child-com节点的attached后触发
      linked (target) {},
      // child-com每次被移动时执行，target是child-com节点实例对象，该函数在child-com节点的moved后触发
      linkChanged (target) {},
      // child-com每次被移除时执行，target是child-com节点实例对象，该函数在child-com节点的detached后触发
      unlinked (target) {},
      
    }
  },
  methods: {
    _getAllChildCom () {
      // 使用 getRelationNodes 获取所有关联的child-com的有序的nodes数组
      console.log(this.getRelationNodes('./child-com'))
    }
  },
  ready () {
    this._getAllChildCom()
  }
})

// child-com.js
Component({
  relations: {
    './parent-com': {
      type: 'parent',
      // 每次插入到child-com组件内部时执行，target是parent-com节点实例对象，该函数在attached后触发
      linked (target) {},
      // 每次被移动时执行，target是parent-com节点实例对象，该函数在moved后触发
      linkChanged (target) {},
      // 被移除时执行，target是parent-com节点实例对象，该函数在detached后触发
      unlinked (target) {},
    }
  }
})

组件通过相同behavior关联

// 引入组件
<parent-com>
  <child-com1/>
  <child-com2/>
</parent-com>

// child-com1.js、child-com2.js
const commonControl = require('./common-control')
Component({
  behaviors: [commonControl],
  relations: {
    './parent-com': {
      // 表示commonControl关联的目标节点是祖先节点
      type: 'ancestor'
    }
  }
})

// parent-com.js
const commonControl = require('./common-control')
Component({
  behaviors: [commonControl],
  relations: {
    'commonControl': {
      // 表示parent-com关联的目标节点commonControl是后代节点
      type: 'descendant',
      target: commonControl
    }
  }
})

数据监听器（observers）

定义：用于监听和响应任何属性和数据字段的变化，功能和vue的watch类似

使用：

• 在observers一级字段中定义
• 监听语法为：field (newV) {}、arr[3] (newV) {}、obj.field (newV) {}
• 可以同时监听多个属性，比如监听属性a和b：'a, b' (newA, newB) {}，在属性a或b用setData进行设置时，会触发该监听函数
• 使用通配符**监听全部setData的值设置

注意：

• observer监听到的数据是setData涉及到的数据字段，即使他们的值没有变化，监听也会被触发
• 若在监听器中进行setData当前值，会导致死循环
• 数据监听器比属性的observer更强大，性能更好

Component({
  observers: {
    '**' () {
      // 此处会监听所有的setData调用
    },
    'a, b' () {
      // 当使用setData设置a、b的值时，会触发当前监听
    },
    'arr[1]' () {
      // 当设置数组arr的第2个元素，触发
    },
    'obj.name' () {
      // 当设置对象obj的name属性时，触发
    }
  }
})

纯数据字段

定义：

• 纯数据字段是一些不会用在界面渲染（wxml）、不会传递给其他组件、仅在当前组件中使用的data字段或properties字段，它有助于提升页面更新性能
• 换句话说，仅在当前组件的js文件中生效，用在其他地方不生效

使用：

• 指定纯数据字段应该在options一级字段中指定pureDataPattern为一个正则表达式，比如pureDataPattern: /^_/，此时所有以_开头的data/property都是纯数据字段
• 也可在json文件中指定一级字段pureDataPattern，其值为字符串形式，比如"pureDataPattern": "^_"

注意：

• 属性（property）中的纯数据字段的observer不会触发，此时可用监听器监听该属性

抽象节点

场景：当自定义组件中的节点model不是由其本身决定的，而是由调用该组件者决定的，则可以将该节点model声明为抽象节点

使用，下面的model-name可以是任意的合法节点标识字段：

1. 首先在组件的json文件中声明节点model的名称，在一级字段componentGenerics对象中添加声明节点名称为true，比如"model-name": true
2. 在组件的wxml文件中使用该抽象节点model，比如<model-name xxx></model-name>
3. 在调用组件的页面/组件的json文件中，引用需要使用的不确定组件，使用usingComponents引入
4. 在调用组件的页面/组件的wxml文件中，使用该组件，比如<custom-com generic:model-name="use-com-name"></custom-com>

// 第一步：在组件json中声明抽象节点
// custom-com.json
{
  "componentGenerics": {
    "jida-select": true
    // 这里可以指定jida-select默认的组件节点，当具体组件未指定时，将创建默认组件实例
    "jida-select": {
      "default": "path/xxx"
    }
  }
}

// 第二步，在组件wxml中使用抽象节点
// custom-com.wxml
<jida-select name="jida" disabled="{{disabled}}"></jida-select>

// 第三步：引入需要的组件
// other-custom-com.json
{
  "usingComponents": {
    "custom-com": "./custom-com",
    "custom-1": "./custom-1",
    "custom-2": "./custom-2"
  }
}

// 第四步：使用组件
// other-custom-com.wxml
// 这里会将组件custom-com的jida-select节点替换成组件custom-1的内容，其数据也会自动附加到custom-1上
<custom-com generic:jida-select="custom-1"></custom-com>
// 使用默认组件节点，不需要使用generic属性
<custom-com/>

注意：

• 节点generic:xxx="yyy"中，yyy只能是静态值，也就是引入组件名字符串，不能是数据绑定

组件扩展

场景：

• 为了更好定制组件的功能，可以使用自定义组件扩展机制
• 相当于在behavior中对组件/behavior的内容进行自定义操作，每当behavior设置的功能对应的数据发生变更时，它会同时进行自定义操作

用法：

1. 若想要定制组件功能，需要在组件中引入一个behavior
2. 引入的behavior具有一级字段definitionFilter，形式为：definitionFilter(deFields, definitionFilterArr) {}
3. 然后在definitionFilter去定制功能，其中deFields表示引用该behavior的组件/behavior对象，definitionFilterArr表示该behavior引用的其他behavior的definitionFilter函数列表

// behavior3.js
module.exports = Behavior({
  definitionFilter (deFields, definitionFilterArr) {}
})

// behavior2.js
module.exports = Behavior({
  // 5. 由于behavior2引入了behavior3.js，所以会调用会调用behavior3.js中的definitionFilter函数，详见上面
  behaviors: [require('behavior3.js')],
  // 4. 调用该函数，deFields表示组件对象，可以使用deFields.data.xxx，获取/设置组件中data字段xxx的值
  // definitionFilterArr表示behavior2引用的behaviors数组，值为[behavior3.definitionFilter]
  definitionFilter (deFields, definitionFilterArr) {
    // 若想在此处调用behavior3的definitionFilter去过滤behavior1的内容，可用下面这种方式
    definitionFilterArr[0](deFields)
  }
})

// behavior1.js
module.exports = Behavior({
  // 3. 由于behavior1引入了behavior2.js，所以会调用会调用behavior2.js中的definitionFilter函数，详见上面
  behaviors: [require('behavior2.js')],
  // 2. 调用该函数，deFields表示组件对象，可以使用deFields.data.xxx，获取/设置组件中data字段xxx的值
  // definitionFilterArr表示behavior1引用的behaviors数组，值为[behavior2.definitionFilter]
  definitionFilter (deFields, definitionFilterArr) {}
})

// component.js
Component({
  // 1. 当进行组件的声明时，由于引入了behavior1
  // 此时会调用behavior1.js中的definitionFilter函数，详见上面
  behaviors: [require('behavior1.js')]
})

单元测试

需要同时兼顾nodejs和dom，选择示例：

1. mocha+jsdom
2. jest

场景：

• 进行单元测试时，无需用到双线程架构模式，因为进行的是功能测试，而非性能安全测试
• 测试工具集的wx对象和内置组件都不会实现真正的功能，若需要，可自行覆盖工具集的api接口和内置组件
• 测试工具集无法全部覆盖自定义组件的特性

使用：安装测试工具集miniprogram-simulate，其提供了一些方便测试的接口，如：

• 模拟touch事件、自定义事件触发
• 选取子节点
• 更新自定义组件数据
• 触发生命周期
• xxx，详见github

编写测试用例：

1. 安装测试工具集：npm i --save-dev miniprogram-simulate
2. 新建一个test文件夹，其子目录和项目根目录的子目录类似，比如要测试components/index组件，则在test/components/index.test.js中编写对应测试用例

组件

// components/index.wxml
<view class="index">{{ prop }}</view>

// components/index.js
Component({
  properties: {
    prop: {
      type: String,
      value: 'index.properties'
    }
  }
})

// components/index.wxss
.index {
  color: green;
}

组件测试用例

// test/components/index.test.js
// simulate:模仿、假装、冒充、模拟
const simulate = require('miniprogram-simulate')

test('components/index', () => {
  // 此处的路径必须是绝对路径
  const id = simulate.load('/components/index')
  // 渲染成自定义组件树实例
  const comp = simulate.render(id)
  // 创建父节点
  const parent = document.createElement('parent-wrapper')
  // 将组件附加到父节点上，会触发组件的attached函数
  comp.attach(parent)
  // 获取组件内部是一些节点
  const view = comp.querySelector('.index')
  // 测试渲染结果
  expect(view.dom.innerHTML).toBe('index.properties')
  expect(window.getComputedStyle(view.dom).color).toBe('green')
})

获取更新性能统计信息

场景：

• 若想知道setData引发界面更新的开销，可以使用更新性能统计信息接口setUpdatePerformanceListener，它将返回每次更新中注意更新步骤发生的时间戳

使用：调用时机不能早于attached，

Component({
  attached () {
    this.setUpdatePerformanceListener({
      // 是否返回变更的data字段的信息
      widthDataPaths: true
    }, res => {
      // res 对象属性：
      // dataPaths：数组，此次更新的data字段的信息，在widthDataPaths: true时返回
      // pendingStartTimestamp：更新进入等待队列的时间戳
      // updateStartTimestamp：更新运算执行开始的时间戳
      // updateEndTimestamp：更新运算执行结束的时间戳
      // isMergedUpdate：是否是被合并更新，若是，updateProcessId表示被合并到的更新过程id
      // updateProcessId：此次更新过程的id
      // parentUpdateProcessId：若该更新是子更新，返回其所属的更新过程Id
      console.log(res)
    })
  }
})

注意：

• setUpdatePerformanceListener只会激活当前组件/页面的统计，若需要知道页面内所有的更新过程，需要所有组件都调用setupdatePerformanceListener
• 统计本身有开销，禁用统计，第二个参数设置为null

使用占位组件

场景：在使用分包异步化、用时注入等特性时，自定义组件所引用的其他自定义组件在刚开始渲染时，可能处于不可用状态，此时为了使渲染过程不被阻塞，可以使用一个占位组件替换不可用组件，在该组件可用时再替换回来

不可用状态场景：

1. 使用分包异步化时，引入了其他分包的组件，而该分包还未下载
2. 使用用时注入时，该组件还未注入

使用：

1. 在组件的json中一级字段componentPlaceholder下配置占位组件，例如："comp-a": "view"，将comp-a组件替换成view组件
2. 占位组件可以是自定义组件，也可以是内置组件
3. 若某组件设置为占位组件，则其必须是始终可用的
4. 若某组件设置为其他组件的占位组件，其不能为其指定它的占位组件

占位组件参与的组件渲染过程：

1. 当渲染该组件时，会递归检查usingComponents字段，收集使用到的所有组件的信息
2. 若使用到的组件不可用，会检查其是否有占位组件
3. 若没有占位组件，则会中断渲染，抛出错误
4. 若有占位组件，则会进行标记，并在后续渲染流程中使用占位组件进行渲染
5. 该不可用组件绘制渲染结束后尝试准备（下载分包/注入代码）
6. 准备完成后，若该不可用组件不存在，抛出错误
7. 若该组件存在，则会替换掉占位组件进行渲染

// com.json
{
  "usingComponents": {
    "com-a": "./com-a",
    "com-b": "./com-b",
    "com-c": "./com-c"
  },
  "componentPlaceholder": {
    "com-a": "view",
    "com-b": "com-c"
  }
}

// com.wxml
<com-a>
  <com-b/>
</com-a>

// com-a和com-b不可用时
<view>
  <com-c/>
</view>

文件历史