微信小程序开发《11 .框架之自定义组件》

自定义组件

创建自定义组件

json

wxml

wxss

js

json

component

true

{
"component": true
}

wxml

wxss

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
{{innerText}}
</view>
<slot></slot>

/* 这里的样式只应用于这个自定义组件 */
.inner {
color: red;
}

js

Component()

wxml

Component({
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
// 这里是一个自定义方法
customMethod: function(){}
}
})

使用自定义组件

json

{
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}
}

wxml

<view>
<!-- 以下是对一个自定义组件的引用 -->
<component-tag-name inner-text="Some text"></component-tag-name>
</view>

wxml

usingComponents

组件模版和样式

wxml

wxss

组件模版

<slot>

<!-- 组件模板 -->
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>

<!-- 引用组件的页面模版 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件slot中的内容</view>
</component-tag-name>
</view>

组件wxml的slot

slot

Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})

name

<!-- 组件模板 -->
<view class="wrapper">
<slot name="before"></slot>
<view>这里是组件的内部细节</view>
<slot name="after"></slot>
</view>

slot

<!-- 引用组件的页面模版 -->
<view>
<component-tag-name>
<!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
<view slot="before">这里是插入到组件slot name="before"中的内容</view>
<!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
<view slot="after">这里是插入到组件slot name="after"中的内容</view>
</component-tag-name>
</view>

组件样式

wxss

#a

[a]

.a .b

.a>.b

view

font

color

app.wxss

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

:host

/* 组件 custom-component.wxss */
:host {
color: yellow;
}

<!-- 页面的 WXML -->
<custom-component>这段文本是黄色的</custom-component>

Component构造器

type

value

observer

properties

setData

observer

this

newData

behavior

behavior

name

detail

options

selector

selector

relationKey

Component({behaviors: [],properties: {myProperty: { // 属性名type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个observer: function(newVal, oldVal){} // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'},myProperty2: String // 简化的定义方式},data: {}, // 私有数据，可用于模版渲染// 生命周期函数，可以为函数，或一个在methods段中定义的方法名attached: function(){},moved: function(){},detached: function(){},methods: {onMyButtonTap: function(){this.setData({// 更新属性和数据的方法与更新页面数据的方法类似})},_myPrivateMethod: function(){// 内部方法建议以下划线开头this.replaceDataOnPath(['A', 0, 'B'], 'myPrivateData') // 这里将 data.A[0].B 设为 'myPrivateData'this.applyDataUpdates()},_propertyChange: function(newVal, oldVal) {}}})

properties

propertyName

wxml

component-tag-name property-name="attr value"

attr="{{propertyName}}"

Component

this.data

setData

this

dataXyz

data-xyz=""

组件事件

<!-- 当自定义组件触发“myevent”事件时，调用“onMyEvent”方法 --><component-tag-name bindmyevent="onMyEvent" /><!-- 或者可以写成 --><component-tag-name bind:myevent="onMyEvent" />

Page({onMyEvent: function(e){e.detail // 自定义组件触发事件时提供的detail对象}})

triggerEvent

<!-- 在自定义组件中 --><button bindtap="onTap">点击这个按钮将触发“myevent”事件</button>

Component({properties: {}methods: {onTap: function(){var myEventDetail = {} // detail对象，提供给事件监听函数var myEventOption = {} // 触发事件的选项this.triggerEvent('myevent', myEventDetail, myEventOption)}}})

// 页面 page.wxml<another-component bindcustomevent="pageEventListener1"><my-component bindcustomevent="pageEventListener2"></my-component></another-component>

// 组件 another-component.wxml<view bindcustomevent="anotherEventListener"><slot /></view>

// 组件 my-component.wxml<view bindcustomevent="myEventListener"><slot /></view>

// 组件 my-component.jsComponent({methods: {onTap: function(){this.triggerEvent('customevent', {}) // 只会触发 pageEventListener2this.triggerEvent('customevent', {}, { bubbles: true }) // 会依次触发 pageEventListener2 、 pageEventListener1this.triggerEvent('customevent', {}, { bubbles: true, composed: true }) // 会依次触发 pageEventListener2 、 anotherEventListener 、 pageEventListener1}}})

behaviors

定义和使用 behaviors

behaviors

behavior

behavior

behavior

behavior

behavior

Behavior()

// my-behavior.jsmodule.exports = Behavior({behaviors: [],properties: {myBehaviorProperty: {type: String}},data: {myBehaviorData: {}},attached: function(){},methods: {myBehaviorMethod: function(){}}})

behaviors

// my-component.jsvar myBehavior = require('my-behavior')Component({behaviors: [myBehavior],properties: {myProperty: {type: String}},data: {myData: {}},attached: function(){},methods: {myMethod: function(){}}})

my-component

my-behavior

my-behavior

myBehaviorProperty

myBehaviorData

myBehaviorMethod

attached

my-component

myBehaviorProperty

myProperty

myBehaviorData

myData

myBehaviorMethod

myMethod

attached

my-behavior

attached

my-component

attached

字段的覆盖和组合规则

behavior

behavior

behavior

behavior

behavior

内置 behaviors

behavior

Component({behaviors: ['wx://form-field']})

wx://form-field

behavior

behavior

type

observer

wx://form-field

组件间关系

定义和使用组件间关系

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

custom-ul

custom-li

relations

// path/to/custom-ul.jsComponent({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('path/to/custom-li')}},ready: function(){this._getAllLi()}})

// path/to/custom-li.jsComponent({relations: {'./custom-ul': {type: 'parent', // 关联的目标节点应为父节点linked: function(target) {// 每次被插入到custom-ul时执行，target是custom-ul节点实例对象，触发在attached生命周期之后},linkChanged: function(target) {// 每次被移动后执行，target是custom-ul节点实例对象，触发在moved生命周期之后},unlinked: function(target) {// 每次被移除时执行，target是custom-ul节点实例对象，触发在detached生命周期之后}}}})

关联一类组件

<custom-form><view>input<custom-input></custom-input></view><custom-submit> submit </custom-submit></custom-form>

custom-form

custom-input

custom-submit

// path/to/custom-form-controls.jsmodule.exports = Behavior({// ...})

// path/to/custom-input.jsvar customFormControls = require('./custom-form-controls')Component({behaviors: [customFormControls],relations: {'./custom-form': {type: 'ancestor', // 关联的目标节点应为祖先节点}}})

// path/to/custom-submit.jsvar customFormControls = require('./custom-form-controls')Component({behaviors: [customFormControls],relations: {'./custom-form': {type: 'ancestor', // 关联的目标节点应为祖先节点}}})

relations

// path/to/custom-form.jsvar customFormControls = require('./custom-form-controls')Component({relations: {'customFormControls': {type: 'descendant', // 关联的目标节点应为子孙节点target: customFormControls}}})

relations 定义段

relations

parent

child

ancestor

descendant