Blogger Information
Blog 25
fans 0
comment 0
visits 42084
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
微信小程序-通知广播WxNotificationCenter(应用、解析)
程先生的博客
Original
3050 people have browsed it

以下两种场景,在微信小程序官方并没有提供类似iOS的NSNotificationCenter 或者 Android的广播类似的解决方案。

A页面 -> B页面,B页面完成相关逻辑需要通知A页面刷新数据(并传值)

通知(广播)已入栈并且注册过通知的页面(并传值)

一、如果遇到以上的场景,要怎么处理呢?

在github上发现了WxNotificationCenter,下载地址: https://github***/icindy/WxNotificationCenter WxNotificationCenter借鉴iOS开发中的NSNotificationCenter的消息模式进行开发
简单的说WxNotificationCenter是实现大跨度的通信机制,可以为两个无引用关系的两个对象进行通信,即事件发出者和响应者可以没有任何耦合关系。

二、让我们看看代码中的使用

1.获取到 WxNotificationCenter 将WxNotificationCenter.js文件加入项目目录下

2.页面中导入
var WxNotificationCenter = require('../../../vendors/WxNotificationCenter.js')

3.A页面的Page生命周期中注册、移除通知,及接收通知后响应的fuction。

实例

onLoad: function () {
    //注册通知
    var that = this
    WxNotificationCenter.addNotification('NotificationName', that.didNotification, that)    
  },

  onUnload: function () {
    //移除通知
    var that = this
    WxNotificationCenter.removeNotification('NotificationName', that)
  },

 //通知处理
  didNotification: function () {
    //更新数据
    this.setData({
          
    })
  },

运行实例 »

点击 "运行实例" 按钮查看在线实例

4. B页面处理完逻辑,发送通知

//发送通知(所有注册过'NotificationName'的页面都会接收到通知)
WxNotificationCenter.postNotificationName('NotificationName')

三、如何传值?

obj 为字符串 或者 对象

1. WxNotificationCenter.postNotificationName('NotificationName',obj)

2. WxNotificationCenter.addNotification('NotificationName', that.didNotification, that)

didNotification: function (obj) {     //拿到值obj
   
 },

四、源码解析

全部源码只有WxNotificationCenter.js一个文件,通过以下方式引用该文件:

var WxNotificationCenter = require('../../vendors/WxNotificationCenter.js')

源码对外开放三个方法:

实例

module.exports = {
    addNotification: addNotification,
    removeNotification: removeNotification,
    postNotificationName: postNotificationName
}

运行实例 »

点击 "运行实例" 按钮查看在线实例

3.核心源码

实例

var __notices = [];
var newNotice = {
       name: name,                  //注册名,一般let在公共类中
       selector: selector           //对应的通知方法,接受到通知后进行的动作
       observer: observe            //注册对象,指Page对象 
};

运行实例 »

点击 "运行实例" 按钮查看在线实例

没错,只有一个数组! 操作一个对象!
核心思想很简单,就是利用一个数组缓存对象,通过设置name和注册对象来确定需要通知或者广播的对象,并监听通知方法
首先Page对象中调用addNotification(name, selector, observer)方法,将newNotice对象push进数组__notices(可以重复加入);

__notices.push(newNotice);

然后postNotificationName(name, info)方法,将数组__notices中的对象遍历出来,notice.name === name符合该要求的对象执行notice.selector(info);

for (var i = 0; i < __notices.length; i++){      var notice = __notices[i];      if(notice.name === name){
       notice.selector(info);
     }
   }

最后释放内存,根据各自的业务逻辑,调用removeNotification(name,observer) 将对应的对象从数组中移除:

if(notice.name === name){        if(notice.observer === observer){
           __notices.splice(i,1);            return;
       }
     }

自己写了个Demo,感兴趣的可以拉一下 https://github***/hanqingman/WxNotificationCenter-Demo


Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post