微信小程序中实现一对多发消息详解及实例代码


Posted in Javascript onFebruary 14, 2017

微信小程序中实现一对多发消息详解及实例代码

微信小程序中各个界面之间的传值和通知比较蛋疼。所以模仿了iOS中的通知中心,在微信小程序中写了一套类似的通知中心。

通知中心可以做到:1对多发消息,传递object。使用十分简洁。

使用时,在需要接收消息的界面注册一个通知名。然后在需要发消息的界面post这个通知名就可以了。可以在多个界面注册同一个通知名。这样就可以1对多发消息。

使用方法:

1:在app.js中引用notification.js

var notificationCenter = require('/utils/notification.js'); //这里请改为你的绝对路径

2:在app.js中添加:

App({
  onLaunch: function (){
     this.notificationCenter = notificationCenter.center();
  },
  notificationCenter:null,
})

3: 接收通知的page.js中注册

PageA.js:

var app = getApp();
Page({
 onLoad:function(options){
 app.notificationCenter.register("一个通知名称",this,"didReceviceAnyNotification");
 },
 didReceviceAnyNotification:function(name,content){
  console.log("接收到了通知:",name, content);
 },
})

4: 发出通知的page.js中

PageB.js 任意函数

var app = getApp();
Page({
 anyFunction:function(){
  app.notificationCenter.post("通知名称",{
    //任意通知object
  })  ;
 },
})

实现:

文件下载:http://xiazai.3water.com/201702/yuanma/wxappNotificationCenter-master(3water.com).rar

var notificationCenter = {

notificationCenter:{},

// 向通知中心注册一个监听者。
// name: 监听的通知名称
// observer: 监听者
// action: 监听者收通知时调用的方法名,
// func: 监听者收到通知时调用的函数,
// action func 2选1
register:function(name,observer,action,func){
  if (!name || !observer) return;
  if (!action && !func) return;

  console.log("注册通知:",name,observer);

  var center = this.notificationCenter;
  var objects = center[name];
  if (!objects){
    objects = [];
  }
  this.remove(name,observer);
  objects.push({
    observer:observer,
    action:action,
    func:func
  });
  center[name] = objects;
},
// 从通知中心移除一个监听者
remove:function(name,observer){
  if (!name || !observer) return;

  var center = this.notificationCenter;
  var objects = center[name];
  if (!objects){
    return;
  }

  var idx;
  var object;
  for(idx = 0;idx<objects.length;idx++){
    var obj = objects[idx];
    if (obj.observer == observer){
    object = obj;
    break;
    }
  }
  if (object){
    objects.splice(idx,1);
  }
  center[name] = objects;
},
// 通过通知中心发出通知
// name: 通知名称
// notification: 通知内容
post:function(name,notification){
  if (!name) return;

  console.log("准备发出通知:",name,notification);

  var center = this.notificationCenter;
  var objects = center[name];
  if (!objects){
    objects = [];
  }
  objects.forEach(function(object){
    var observer = object.observer;
    var action = object.action;
    var func = object.func;

    if (observer && action){
      func = observer[action];
    }
    func(notification);
  });

  console.log("完成向 ",objects.length," 个监听者发出通知:",name);
}
}

function center(){
  return notificationCenter;
}

module.exports.center = center;

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
JavaScript检测并限制复选框选中个数的方法
Aug 12 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 Javascript
AngularJS中使用ngModal模态框实例
May 27 Javascript
详解vue+css3做交互特效的方法
Nov 20 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
Dec 11 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
Feb 14 #Javascript
js基于myFocus实现轮播图效果
Feb 14 #Javascript
javascript 单例模式详解及简单实例
Feb 14 #Javascript
bootstrap 下拉多选框进行多选传值问题代码分析
Feb 14 #Javascript
微信小程序 弹幕功能简单实例
Feb 14 #Javascript
详解JavaScript中js对象与JSON格式字符串的相互转换
Feb 14 #Javascript
微信小程序 Nginx环境配置详细介绍
Feb 14 #Javascript
You might like
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
Yii中实现处理前后台登录的新方法
2015/12/28 PHP
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
js的OOP继承实现(必看篇)
2017/02/18 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
从零学python系列之数据处理编程实例(一)
2014/05/22 Python
用 Python 爬了爬自己的微信朋友(实例讲解)
2017/08/25 Python
tensorflow获取变量维度信息
2018/03/10 Python
详解Python中的动态属性和特性
2018/04/07 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
Python提取特定时间段内数据的方法实例
2019/04/01 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python及Pycharm安装方法图文教程
2019/08/05 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
pytorch的batch normalize使用详解
2020/01/15 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
python压包的概念及实例详解
2021/02/17 Python
查找廉价航班和发现新目的地:Kiwi.com
2019/02/25 全球购物
如何客观的进行自我评价
2013/12/17 职场文书
九年级历史教学反思
2014/01/27 职场文书
工作睡觉检讨书
2014/02/25 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2015年信访工作总结
2015/04/07 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
新郎结婚感言
2015/07/31 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
python如何在word中存储本地图片
2021/04/07 Python
tp5使用layui实现多个图片上传(带附件选择)的方法实例
2021/11/17 PHP
详解Mysq MVCC多版本的并发控制
2022/04/29 MySQL