CN112486551B

CN112486551B - 一种小程序全局实时组件的实现方法

Info

Publication number: CN112486551B
Application number: CN202011354602.9A
Authority: CN
Inventors: 李凡
Original assignee: Sichuan Changhong Electric Co Ltd
Current assignee: Sichuan Changhong Electric Co Ltd
Priority date: 2020-11-26
Filing date: 2020-11-26
Publication date: 2022-02-01
Anticipated expiration: 2040-11-26
Also published as: CN112486551A

Abstract

本发明提出了一种小程序全局实时组件的实现方法。在全局js中定义监听列表对象和一个用于新增独立监听的方法，然后设置公共监听方法和设置用于数据实时更新的定时方法。在小程序加载时，onLaunch周期内调用公共监听方法。当组件触发attached周期时，调用全局js中的监听新增方法，设置专属监听并获取监听结果后同步更新组件值。页面中引入组件的同时通过if控制组件加载和销毁。通过上述流程，实现一种逻辑和流程更为简洁的全局监听功能组件，解决了小程序全局数据无法双向数据绑定的同时极大地优化全局组件逻辑的性能。

Description

一种小程序全局实时组件的实现方法

技术领域

本发明涉及计算机技术领域，尤其涉及一种小程序全局实时组件的实现方法。

背景技术

计算机软件技术的飞速发展，各类软件产品的出现满足了人们在不同领域的不同需求。随着用户需求的不断升级和深入，如何在完成需求的同时实现更优化的用户体验也极其重要。对于产品全局组件的需求，通常采用组件化开发的方式，设置组件为共有组件内部子组件，从而实现全局展示的效果。然而微信小程序暂不支持组件化开发方式，因此对于共用组件，通常采用组件封装的方式，通过组件属性进行页面间数据的传输。然而小程序的数据单向绑定，造成全局数据无法在组件和页面间进行实时更新，当大量页面进行组件引用时，页面间的数据更新过程也变得十分繁琐和冗余。因此，发明一种实时方法更简洁，更为高性能的方法变得极为重要。

发明内容

实现一种逻辑和流程更为简洁的全局监听功能组件，解决小程序全局数据无法双向数据绑定的同时极大地优化全局组件逻辑的性能。

本发明提出了一种小程序全局实时组件的实现方法。在全局js中定义监听列表对象和一个用于新增独立监听的方法，然后设置公共监听方法和设置用于数据实时更新的定时方法。在小程序加载时，onLaunch周期内调用公共监听方法。当组件触发attached周期时，调用全局js中的监听新增方法，设置专属监听并获取监听结果后同步更新组件值。页面中引入组件的同时通过if控制组件加载和销毁。从而实现一种逻辑和流程更为简洁的全局监听功能组件。具体技术方案如下：

1、全局js中：

(1)采用轮询方式对全局数据进行更新操作。定义一个定时启用方法，方法内部通过设置定时器执行数据实时更新操作。

(2)定义一个初始化为空的监听列表对象和一个用于新增独立监听的方法。监听新增方法中传入参数key和method，并将method赋给监听列表对象中key。

(3)设置公共监听方法，监听方法set中，遍历监听列表对象，当监听列表对象中key存在赋值时，将set中的value值作为参数，传给监听列表对象中对应的函数key。

(4)在小程序加载时，onLaunch周期内调用公共监听方法。

(5)设置监听卸载方法。方法中，移除定时器，并将监听列表置空。

2、全局组件内部js：

当组件触发attached周期时，调用全局js中的监听新增方法。方法中，参数key设置特定标识，method参数为组件内部定义方法，当监听触发时，该方法执行，可用于全局组件获取监听结果并同步更新组件值。

3、页面中：

(1)json和wxml文件引入全局组件，同时通过if控制组件加载。当页面触发onShow生命周期时加载组件，当生命周期onHide时销毁组件。

(2)页面中对于全局数据的监听，在页面触发onLoad生命周期时，调用全局监听新增方法，传入特定标识key和用于获取更新的页面内部method方法。

(3)当存在页面卸载返回小程序初始化页面时，onUnload生命周期中调用全局js监听移除方法，将全部监听移除。

本发明的有益效果是：本发明通过全局设置公共监听和获取子监听、组件设置独立监听并实现实时更新的方式，解决单向数据绑定问题，简化大量页面进行组件引用时的数据实时操作，优化全局组件实时更新的代码逻辑。

附图说明

图1为本发明公开的一种小程序全局实时组件的实现方法流程示意图。

具体实施方式

为了使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步详细描述，但本发明的实施方式不限于此。

应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。

实施例1：

图1是小程序全局实时组件实现方法的流程示意图。一种小程序全局实时组件的实现方法具体包括以下步骤：

1、小程序全局app.js中：

(1)采用轮询方式对全局数据进行更新操作。globalData中，设置全局timer:null。定义用于轮询数据的启用方法controlUpdate()，方法内部设置timer定时器setInterval(function(){},millisecond)执行数据实时更新操作。当小程序进入数据更新触发节点时，通过getApp().controlUpdate()触发数据更新。

(2)定义一个监听列表对象listenerFun，并初始化为空对象。

(3)定义一个用于新增独立监听的方法addWatchFun(key,method)，方法内部将method赋给监听列表对象listenerFun中的key。其中，参数key代表监听的唯一标识，参数method为调用监听的组件、页面所传入的方法。

(4)设置公共监听方法createWatch()。采用Object.defineProperty(obj,prop,descriptor)对globalData中实时更新的数据对象objData进行监听。在属性的setter函数set:function(value){}中，遍历监听列表对象listenerFun，当监听列表对象中存在key属性且key存在赋值时，调用listenerFun[key](value)。其中，参数value为setter函数中监听数据被赋予的新值。

(5)在小程序加载时，在onLaunch周期内调用公共监听方法createWatch(),开启全局数据监听。

(6)设置监听卸载方法removeWatchFun()。方法中，clearInterval()移除定时器，并将监听列表对象listenerFun置空。

2、小程序全局组件内部js：

(1)当组件触发attached周期时，调用全局app.js中的监听新增方法，即getApp().addWatchFun(‘compWatch’,this.watchGlobalData.bind(this))。其中，‘compWatch’为当前组件专属标识key，watchGlobalData()为组件内部方法，bind(this)用于避免方法中this指针指向失败问题。

(2)watchGlobalData()方法中，传入参数data。当全局数据更新，全局app.js

中公共监听触发时，监听方法setter函数中，循环遍历经addWatchFun(key,method)赋值的监听列表对象，找到组件对应key，并将更新的全局数据value作为参数，调用listenerFun[key](value)。此时，组件内部方法watchGlobalData(data)即为传入addWatchFun(key,method)的method。watchGlobalData(data)中参数data即对应为更新的全局数据value。组件内部方法watchGlobalData(data)中，传入的data值即更新的全局数据objData。从而实现全局组件获取监听结果并在组件内部方法watchGlobalData(data)中同步更新组件值。

3、小程序页面中：

(1)小程序进入主页面后，getApp().controlUpdate()触发数据更新。

(1)页面json和wxml文件引入全局组件。页面data中定义初值为false的loadComp变量，同时通过wx:if＝“{{loadComp}}”控制组件加载。当页面触发onShow生命周期时，设置data中loadComp为true，加载组件，组件内部实现监听。当页面生命周期onHide时，设置data中loadComp为false，实现组件的销毁。

(2)页面中对于全局数据objData的监听，在页面触发onLoad生命周期时，调用全局监听新增方法，传入特定标识key和用于获取更新的页面内部method方法，方式同上述全局组件监听的设置。

(3)当存在页面卸载返回小程序初始化状态时，在页面onUnload生命周期中，getApp().removeWatchFun()调用全局app.js中监听卸载方法，从而关闭用于数据更新的定时器timer，并移除小程序全部组件、页面监听。

以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims

1.一种小程序全局实时组件的实现方法，其特征在于，包括以下步骤：

全局js中：定义一个监听列表对象和一个用于新增独立监听的方法，监听新增方法中将method赋给监听列表对象中key属性；设置公共监听方法，监听方法set中，遍历监听列表对象，将set中的value值作为参数，传给监听列表对象函数key；设置定时启用方法，用于数据更新；小程序加载时，调用公共监听方法；

全局组件内部：当组件触发attached周期时，调用全局js中的监听新增方法，参数key设置特定标识，method参数为组件内部方法，用于获取监听结果并同步更新组件值；

页面中：引入组件，同时通过if控制组件加载，当页面触发onShow生命周期时加载组件，当生命周期onHide时销毁组件。

2.根据权利要求1所述的一种小程序全局实时组件的实现方法，其特征在于：

小程序全局js中：采用轮询方式对全局数据进行更新操作；定义一个定时启用方法，定时启用方法内部通过设置定时器执行数据实时更新操作；定义一个初始化为空的监听列表对象和一个用于新增独立监听的方法；新增独立监听的方法中传入参数key和method，并将method赋给监听列表对象中key；设置公共监听方法，公共监听方法set中，遍历监听列表对象，当监听列表对象中key存在赋值时，将set中的value值作为参数，传给监听列表对象中对应的函数key；在小程序加载时，onLaunch周期内调用公共监听方法；设置监听卸载方法，监听卸载方法中，移除定时器，并将监听列表置空；

小程序全局组件内部js：当组件触发attached周期时，调用全局js中的监听新增方法，全局js中的监听新增中，参数key设置特定标识，method参数为组件内部定义方法，当监听触发时，则执行调用全局js中的监听新增方法，可用于全局组件获取监听结果并同步更新组件值；

小程序页面中：引入全局组件，同时通过if控制组件加载；当页面触发onShow生命周期时加载组件，当生命周期onHide时销毁组件；页面中对于全局数据的监听，在页面触发onLoad生命周期时，调用全局监听新增方法，传入特定标识key和用于获取更新的页面内部method方法；当存在页面卸载返回小程序初始化页面时，onUnload生命周期中调用全局js监听移除方法，将全部监听移除。