微信小程序组件化开发的示例介绍

网友投稿 482 2023-11-07

−目录前言组件的定义组件的生命周期组件的通信事件传递共享数据自定义事件

前言

随着小程序的普及，越来越多的开发者开始使用小程序进行开发，而小程序的组件化开发已经成为了一种标配的开发模式。本文将深入介绍小程序组件化开发的相关知识，包括组件的定义、生命周期、通信和使用等方面，帮助大家更好地理解和使用小程序的组件化开发模式。

组件的定义

微信小程序组件化开发的示例介绍

组件是小程序中的一个重要概念，它能够将页面分解成独立的、可复用的部分，以便于开发和维护,组件可以包含一些特定的功能和样式，同时也能够接受外部的数据和事件。

在小程序中，组件是通过Component构造函数来定义的。一个组件通常由三个部分组成：properties、data和methods。其中，properties用于定义组件的对外接口，data用于定义组件的内部数据，methods用于定义组件的方法。示例代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Component({
properties: {
// 定义组件的属性
title: {
type: String,
value: 默认标题
}
},
data: {
// 定义组件的内部数据
count: 0
},
methods: {
// 定义组件的方法
handleClick() {
this.setData({
count: this.data.count + 1
})
this.triggerEvent(click, { count: this.data.count })
}
}
})

定义了一个名为my-component的组件，它包含一个title属性、一个count数据和一个handleClick方法。其中，properties中定义了title属性的类型为String，默认值为默认标题；data中定义了count初始值为0；methods中定义了handleClick方法，可以修改count，并触发click事件。triggerEvent方法用于触发组件的自定义事件。

组件的生命周期

组件的生命周期是指组件从创建到销毁的整个过程，包括组件的创建、更新和销毁等阶段，小程序提供了一些钩子函数，用于在不同的生命周期阶段执行一些特定的操作。以下是小程序组件的生命周期及其钩子函数：

created：组件实例刚刚被创建时触发，此时组件的属性和方法还未初始化；

attached：组件被添加到页面节点树时触发，此时组件的属性和方法已经初始化；

ready：组件渲染完成时触发，此时组件已经可以和用户进行交互；

moved：组件被移动到另一个节点时触发；

detached：组件被从页面节点树移除时触发。

示例代码如下：

当然除了这些，小程序组件还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括以下几种：

注意：自定义 tabBar 的 pageLifetime 不会触发。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
Component({
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
},
resize: function(size) {
// 页面尺寸变化
}
}
})

组件的通信

组件之间的通信是小程序开发中的一个重要问题，它涉及到组件之间的数据传递和事件触发等方面

事件传递

小程序中可以通过事件传递实现组件之间的通信。事件传递是指一个组件向其父组件或子组件发送事件，另一个组件则监听该事件并进行相应的处理。在事件触发时，可以将数据作为参数传递给另一个组件。通过这种方式，组件之间可以实现数据的传递和处理。小程序官方提供了一些事件传递的示例代码，如下所示：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 子组件向父组件传递事件
// 子组件中定义事件
Component({
methods: {
onTap: function () {
this.triggerEvent(myevent, {data: hello}, {})
}
}
})
// 父组件中监听子组件事件
<child-component myevent="{{myevent}}"/>
// 父组件中定义事件处理函数
Page({
handleEvent: function (e) {
console.log(e.detail) // 输出 {data: hello}
}
})
// 父组件中监听子组件事件
<child-component bind:myevent="handleEvent"/>
// 父组件中定义事件处理函数
Page({
handleEvent: function (e) {
console.log(e.detail) // 输出 {data: hello}
}
})
// 父组件中监听子组件事件，并传递额外的参数
<child-component bind:myevent="handleEvent" data-extra="extra"/>
// 父组件中定义事件处理函数，获取额外的参数
Page({
handleEvent: function (e) {
console.log(e.detail) // 输出 {data: hello}
console.log(e.currentTarget.dataset.extra) // 输出 extra
}
})

共享数据

小程序中可以使用 getApp() 方法获取 App 实例，从而在不同的页面和组件之间共享数据。具体的做法是在 App 实例中定义一个全局的数据对象，在需要访问这个数据对象的页面和组件中使用 getApp() 方法获取 App 实例，并通过 this.globalData 访问全局数据对象。共享数据的示例如下所示：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// app.js 中定义全局数据对象
App({
globalData: {
userInfo: null
}
})
// page1.js 中设置数据
const app = getApp()
Page({
onLoad: function () {
app.globalData.userInfo = {name: Tom}
}
})
// page2.js 中获取数据
const app = getApp()
Page({
onLoad: function () {
console.log(app.globalData.userInfo) // 输出 {name: Tom}
}
})

自定义事件

小程序中可以使用自定义事件实现组件之间的通信。自定义事件是指通过事件中心实现组件之间的通信。一个组件可以触发一个自定义事件，而其他组件可以监听这个事件并进行相应的处理。通过这种方式，组件之间可以实现更加灵活的通信。自定义事件的示例代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// event.js 中定义事件中心
const eventBus = {}
// 定义事件监听函数
eventBus.on = function (eventName, callback) {
if (!this[eventName]) {
this[eventName] = []
}
this[eventName].push(callback)
}
// 定义事件触发函数
eventBus.emit = function (eventName, data) {
if (this[eventName]) {
this[eventName].forEach(function (callback) {
callback(data)
})
}
}
// page1.js 中触发事件
const eventBus = require(event.js)
Page({
onTap: function () {
eventBus.emit(myevent, {data: hello})
}
})
// page2.js 中监听事件
const eventBus = require(event.js)
Page({
onLoad: function () {
eventBus.on(myevent, function (data) {
console.log(data) // 输出 {data: hello}
})
}
})

小程序组件之间的通信方式有很多种，根据具体的需求选择合适的方式是非常重要的。同时，也需要注意避免过度使用全局数据和事件传递，以避免出现数据不一致和代码混乱的情况。在实际开发中，我们应该根据具体的场景选择合适的通信方式

您可能感兴趣的文章:微信小程序组件化开发的实战步骤微信小程序自定义头部导航栏(组件化)

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：小程序组件 示例 程序 微信小程序 小程序
上一篇:戏词微信小程序正式上线：重温经典台词
下一篇:微信小程序开发之实现心情记事本
相关文章

 发表评论

暂时没有评论，来抢沙发吧~