-
参数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
