参数options配置

组件wxml模板

<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>  //用不同的 name 来区分
</view>

组件js模板

Component({
 options: {
    multipleSlots: true, // 默认情况下，一个组件的wxml中只能有一个slot。
                                  //需要使用多slot时，可以在组件js中声明启用。
    styleIsolation: 'isolated',//组件样式隔离。
    //isolated双向隔离；
    //apply-shared仅接受页面(父)；
    // shared双向影响包括同样设置该参数的其他自定义组件
    addGlobalClass: true,
    //表示页面 wxss 样式将影响到自定义组件，等价于设置 styleIsolation: apply-shared
    pureDataPattern:/^_/ 
    // 指定所有 _ 开头的数据字段为纯数据字段  正则
 }
})

纯数据字段:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/pure-data.html

参数externalClasses：引用外部样式类

组件 custom-component.js

Component({
  externalClasses: ['my-class']
})          

组件 custom-component.wxml

<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>         

<!-- 页面的 WXML引用组件插入样式，可引入多个 -->
<my-component my-class="red-text large-text" />

<!-- 页面的 WXML样式 -->
.red-text {
  color: red;
}
.large-text {
  font-size: 1.5em;
}

参数properties:接收(父)页面参数

Component({
  properties: {
     min: {
      type: Number,//属性的类型
      optionalTypes: [String, Object],//属性的类型（可以指定多个）
      value: 0,//属性的初始值
      observer: function(newVal, oldVal) {
        // 属性值变化时执行
        }
     }
   }
})

属性的类型可以为 String Number Boolean Object Array 其一，也可以为 null 表示不限制类型。
多数情况下，属性最好指定一个确切的类型,防止数字与字符数字混乱

参数observers:数据监听器

Component({
  attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
  })
},
observers: {
  'numberA, numberB': function(numberA, numberB) {
    // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }
})
使用通配符 ** 可以监听全部 setData
说明observers只能在Component中使用，没法在Page中使用
Observer属于小程序的新功能，只能在高版本微信使用，低版本微信无法使用
若在page中监听watch需扩展

参数lifetimes:组件内周期函数

Component({
  lifetimes: {
    attached: function() {
    // 在组件实例进入页面节点树时执行
    },
    detached: function() {
    // 在组件实例被从页面节点树移除时执行
    },
  }
})

参数

created    =》在组件实例刚刚被创建时执行
attached   =》在组件实例进入页面节点树时执行
ready      =》在组件在视图层布局完成后执行
moved      =》在组件实例被移动到节点树另一个位置时执行
detached   =》在组件实例被从页面节点树移除时执行
error      =》每当组件方法抛出错误时执行

参数pageLifetimes:组件所在页面周期函数

Component({
  pageLifetimes: {
    show: function() {
    // 页面被展示
    },
    hide: function() {
     // 页面被隐藏
  },
  resize: function(size) {
    // 页面尺寸变化
  }
 }
})

参数

show     =》组件所在的页面被展示时执行
hide     =》组件所在的页面被隐藏时执行
resize   =》组件所在的页面尺寸变化时执行

参数behaviors:组件间代码共享

每个 behavior 可以包含一组属性、数据、生命周期函数和方法
组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用
每个组件可以引用多个 behavior ，behavior 也可以引用其他 behavior

组件模板

<view class="wrapper">
  <view>{{myBehaviorProperty}}</view>
  <view>{{myProperty}}</view>
  <button bindtap="myBehaviorMethod">点击触发 behavior 方法</button>
</view>

组件 my-component.js

var myBehavior = require('my-behavior')
  Component({
    behaviors: [myBehavior],
    properties: {
          myProperty: {
              type: String
          }
    }
})

my-behavior.js

module.exports = Behavior({
  behaviors: [],
  properties: {
  myBehaviorProperty: {
    type: String
  }
},
methods: {
    myBehaviorMethod: function () {
      console.log('log from my-behavior.js')
    }
}
})

引用组件的页面模版

<view>
  <my-component my-behavior-property="behavior-property" my-property="my-property">
  </my-component>
</view>

内置 behaviors

Component({
  behaviors: ['wx://form-field']
})
['wx://form-field']表单控件的行为
Component({
behaviors: ['wx://component-export'],
export() {
  return { myField: 'myValue' }
}
})
['wx://component-export']使自定义组件支持 export 定义段。这个定义段可以用于指定组件被 selectComponent 调用时的返回值

this.selectComponent用于父级直接调用子组件

<!-- 使用自定义组件时 -->
<my-component id="the-id" />
this.selectComponent('#the-id') // 等于 { myField: 'myValue' }

参数relations:组件间联系

必须在两个组件定义中都加入relations定义，否则不会生效

页面中引用组件

<custom-ul>
  <custom-li> item 1 </custom-li>
  <custom-li> item 2 </custom-li>
</custom-ul>

custom-ul.js

Component({
    relations: {
      './custom-li': {
      type: 'child', // 关联的目标节点应为子节点
      linked: function(target) {
      // 每次有custom-li被插入时执行，target是该节点实例对象，触发在该节点attached生命周期之后
      },
      linkChanged: function(target) {
      // 每次有custom-li被移动后执行，target是该节点实例对象，触发在该节点moved生命周期之后
      },
      unlinked: function(target) {
      // 每次有custom-li被移除时执行，target是该节点实例对象，触发在该节点detached生命周期之后
    }
  }
},
methods: {
  _getAllLi: function(){
  // 使用getRelationNodes可以获得nodes数组，包含所有已关联的custom-li，且是有序的
  var nodes = this.getRelationNodes('./custom-li')//组件地址
  }
},
ready: function(){
  this._getAllLi()
}
})

custom-li.js

Component({
  relations: {
  './custom-ul': {
    type: 'parent', // 关联的目标节点应为父节点
  }
}
})

参数

type        =》目标组件的相对关系，可选的值为 parent 、 child 、 ancestor(祖先) 、 descendant(子孙)
inked       =》关系生命周期函数，当关系被建立在页面节点树中时触发，触发时机在组件attached生命周期之后
linkChanged =》关系生命周期函数，当关系在页面节点树中发生改变时触发，触发时机在组件moved生命周期之后
unlinked    =》关系生命周期函数，当关系脱离页面节点树时触发，触发时机在组件detached生命周期之后
target      =》如果这一项被设置，则它表示关联的目标节点所应具有的behavior，所有拥有这一behavior的组件节点都会被关联

详解：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html

组件扩展

// behavior.js
module.exports = Behavior({
  definitionFilter(defFields) {
    defFields.data.from = 'behavior'
  },
})

// component.js
Component({
data: {
from: 'component'
},
behaviors: [require('behavior.js')],
ready() {
console.log(this.data.from) // 此处会发现输出 behavior 而不是 component
}
})

组件扩展watch和computed
官方扩展包https://github.com/wechat-miniprogram/computed

组件内方法

setData设置data并执行视图层渲染
triggerEvent用于子传父通信事件
详情https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

组件内可调用的属性和方法

组件的方法、生命周期函数和属性 observer 中通过 this 访问

is          =》组件的文件路径
id          =》节点id
dataset     =》节点dataset
data        =》组件数据，包括内部数据和属性值
properties  =》组件数据，包括内部数据和属性值（与 data 一致）

抽象节点

selectable-group.wxml

<view wx:for="{{labels}}">
  <label>
    <selectable disabled="{{false}}"></selectable>//抽象子组件
      {{item}}
  </label>
</view>

selectable-group.json

{
  "componentGenerics": {
    "selectable": true
  }
}

或者设置默认抽象页面

{
  "componentGenerics": {
    "selectable": {
      "default": "path/to/default/component"
  }
}
}

在页面中引用

<selectable-group generic:selectable="custom-radio" />//生成单选框
<selectable-group generic:selectable="custom-checkbox" />//生成多选框

在页面json配置

{
  "usingComponents": {
      "custom-radio": "path/to/custom/radio",
      "custom-checkbox": "path/to/custom/checkbox"
  }
}

详解：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/generics.html