微信自定义组件

最新推荐文章于 2023-10-23 14:45:13 发布

面条请不要欺负汉堡

最新推荐文章于 2023-10-23 14:45:13 发布

阅读量322

点赞数

分类专栏：微信小程序开发文章标签：微信自定义组件

本文链接：https://blog.csdn.net/gao_xu_520/article/details/104902616

版权

微信小程序开发专栏收录该内容

42 篇文章 9 订阅

订阅专栏

官网文档

1.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.组件间通信与事件

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 是用于组件间代码共享的特性，类似于一些编程语言中的“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自定义组件扩展

4.relations组件间关系

5.lifetimes

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

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

特殊的生命周期

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)。就可以读取到数据的改变
	}
})