微信自定义组件

深藏阁楼爱情的钟 2021-08-27 22:20 474阅读 0赞

[官网文档][Link 1]

1.[Component 构造器][Component]

Component({
    	behaviors: [],
    	properties: { // 这个properties 是接受父组件传递下来的数据字段
    		myProperty: {
    			type: String,
    			value: ''
    		},
    		name: String
    	},
    	data: {
            obj:[{"id":"1","name":"小一"}]
        },
    	// 组件内部的数据
    	observers: {
    		//组件数据字段监听器，用于监听 properties 和 data 的变化
    		'cardTitle': function(val) {
    			console.log('cardTitle:', val)
    		},
    	},
    	lifetimes: {
    		// 生命周期函数
    		created: function() {
    			//在组件实例刚刚被创建时执行  此时还不能调用 setData
    		},
    		attached: function() {
    			//数据的初始化在这边设置 这边可以接受到父组件传递过来的值
                console.log(this.data.name)
    		},
    		moved: function() {
    			//在组件实例被移动到节点树另一个位置时执行
    		},
    		detached: function() {
    			//在组件实例被从页面节点树移除时执行
    		},
    	},
    	pageLifetimes: {
    		// 组件所在页面的生命周期函数
    		show: function() {
    			// 页面被展示
    		},
    		hide: function() {
    			// 页面被隐藏
    		},
    		resize: function(size) {
    			// 页面尺寸变化
    		}
    	},
    	methods: {
    		onMyButtonTap: function() {
    			this.setData({
    				// 更新属性和数据的方法与更新页面数据的方法类似
    			})
    		},
    		// 内部方法建议以下划线开头
    		_myPrivateMethod: function() {
    			// 这里将 obj[0].name 设为 '王艺颖'
    			this.setData({
    				'obj[0].name': '王艺颖'
    			})
    		},
    		_propertyChange: function(newVal, oldVal) {
    
    		}
    	}
    
    })

2.[组件间通信与事件][Link 2]

this.triggerEvent('myevent', myEventDetail)

1.父组件
    	<i-card card-title="标题"  bindmyevent="myEventListener"></i-card>
    Page({
    	data: {
    		
    	},
    	onLoad: function () {
    		
    	},
    	myEventListener: function (e) {
    		console.log('点击事件', e.detail)// 哪个按钮点击的时候，就会获取该按钮改变数据的值
    	}
    })
    
    2.组件
    <view class="com-card">
    	<view class="head">{
       {cardTitle}}</view>
    	<button bindtap="onTap2"  name="cnt">编辑2</button>
    	<button bindtap="onTap"  name="cnt">编辑</button>
    </view>
    Component({
    	options: {
    		multipleSlots: true  // 在组件中支持多slot子节点的支持
    	},
    	properties: {
    		cardTitle: {
    			type: String,
                value:''
    		}
    	},
    	data:{
    		name:"sss",
    		age:21
    	},
    	observers: {
    		'cardTitle': function (val) {
    			console.log('cardTitle:',val+11)
    		},
    		'name': function (val) {
    			console.log('name:', val + 11)
    		},
    	},
    	methods: {
    		onTap: function (e) {
    			this.setData({
    				name:"王天一"
    			})
    		},
    		onTap2: function (e) {
    			let myEventDetail={
    				age:111
    			}
    			this.triggerEvent('myevent', myEventDetail)
    		}
    	}
    })

3.[behaviors 是用于组件间代码共享的特性][behaviors]，类似于一些编程语言中的“mixins”或“traits”。

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

// my-behavior.js
    module.exports = Behavior({
    	behaviors: [],
    	properties: {
    		myBehaviorProperty: {
    			type: String
    		}
    	},
    	data: {
    		myBehaviorData: {}
    	},
    	attached: function() {},
    	methods: {
    		myBehaviorMethod: function() {}
    	}
    })
    
    // my-component.js
    var 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 生命周期函数。

[definitionFilter自定义组件扩展][definitionFilter]

4.[relations组件间关系][relations]

5.[lifetimes][]

组件的的生命周期也可以在 `lifetimes` 字段内进行声明。是2.2.3版本之后支持的，而之前的放在外面的生命周期，是低于2.2.3版本前支持的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70][]

Component({
      lifetimes: {
        attached: function() {
          // 在组件实例进入页面节点树时执行
        },
        detached: function() {
          // 在组件实例被从页面节点树移除时执行
        },
      },
      // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
      attached: function() {
        // 在组件实例进入页面节点树时执行
      },
      detached: function() {
        // 在组件实例被从页面节点树移除时执行
      },
      // ...
    })

特殊的生命周期

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1][]

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

二、案例

自定义组件：card

<view class="com-card">
    	<view class="head">{
       {cardTitle}}</view>
    	<button bindtap="onTap2"  name="cnt">编辑2</button>
    	<button bindtap="onTap"  name="cnt">编辑</button>
    </view>
    
    
    json:
    
    {
    	"component": true
    }
    
    js:
    
    Component({
    	options: {
    		multipleSlots: true  // 在组件中支持多slot子节点的支持
    	},
    	properties: {
    		cardTitle: {
    			type: String,
                value:''
    		}
    	},
    	data:{
    		name:"sss",
    		age:21
    	},
    	observers: {
    		'cardTitle': function (val) {
    			console.log('cardTitle:',val+11)
    		},
    		'name': function (val) {
    			console.log('name:', val + 11)
    		},
    	},
    	lifetimes: {
    		// 生命周期函数
    		created: function () {
    			//在组件实例刚刚被创建时执行  此时还不能调用 setData
    		},
    		attached: function () {
    			//数据的初始化在这边设置
    			console.log(this.data.cardTitle, '数据')
    		},
    		moved: function () {
    			//在组件实例被移动到节点树另一个位置时执行
    		},
    		detached: function () {
    			//在组件实例被从页面节点树移除时执行
    		},
    	},
    	pageLifetimes: {
    		// 组件所在页面的生命周期函数
    		show: function () {
    			// 页面被展示
    		},
    		hide: function () {
    			// 页面被隐藏
    		},
    		resize: function (size) {
    			// 页面尺寸变化
    		}
    	},
    	methods: {
    		onTap: function (e) {
    			this.setData({
    				name:"王天一"
    			})
    		},
    		onTap2: function (e) {
    			let myEventDetail={
    				age:111
    			}
    			this.triggerEvent('myevent', myEventDetail)
    		}
    	}
    })

父组件

<view class="intro">
    <view>当前日期：{
       {date}}</view>
    	<i-card card-title="标题"  bindmyevent="myEventListener"></i-card>
    </view>
    
    json:
    
    {
      "usingComponents": {
    	  "i-card":"../../components/card/card"
      }
    }
    
    js:
    
    const app = getApp();
    import _ from '../../utils/underscore.js
    import moment from '../../utils/moment.min.js'
    Page({
    	data: {
    		obj: [{
    			"id":122,
    			"name":"小样"
    		}],
    		date:""
    	},
    	onLoad: function () {
    		_.map(this.data.obj, function (el) {
    			console.log(el)
    		})
    		//日期插件
    		this.setData({
    			date: moment().format("YYYY-MM-DD")
    		})
    	},
    	myEventListener: function (e) {
    		console.log('点击事件', e.detail)//这个都可以读到组件的按钮，只要加了这个this.triggerEvent('myevent', myEventDetail)。就可以读取到数据的改变
    	}
    })

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
[Component]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html
[behaviors]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/behaviors.html
[definitionFilter]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/extend.html
[relations]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/relations.html
[lifetimes]: https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70]: /images/20210813/1994256edbc040fc984a568a3819d483.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dhb194dV81MjA_size_16_color_FFFFFF_t_70 1]: /images/20210813/787d8a6d3ee84442bca9b5162f327755.png