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


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 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
js中单引号与双引号冲突问题解决方法
Oct 04 Javascript
jquery实现鼠标滑过小图时显示大图的方法
Jan 14 Javascript
js实现圆盘记速表
Aug 03 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
Jul 09 Javascript
jQuery实现的checkbox级联选择下拉菜单效果示例
Dec 26 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
Javascript中window.name属性详解
Nov 19 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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
php5.3 废弃函数小结
2010/05/16 PHP
php实现无限级分类实现代码(递归方法)
2011/01/01 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
ThinkPHP3.2.3框架Memcache缓存使用方法实例总结
2019/04/15 PHP
Laravel框架Blade模板简介及模板继承用法分析
2019/12/03 PHP
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
查看大图功能代码jquery版
2013/11/05 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
2015/09/10 Javascript
JS未跨域操作iframe里的DOM
2016/06/01 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
基于vue 开发中出现警告问题去除方法
2018/01/25 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[00:17]游戏风云独家报道:DD赛后说出数字秘密 吓死你们啊!
2014/07/13 DOTA
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Pyinstaller 打包发布经验总结
2020/06/02 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
会计专业应届生求职信
2013/11/24 职场文书
营业员演讲稿
2013/12/30 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
家长写给老师的建议书
2014/03/13 职场文书
洗车工岗位职责
2014/03/15 职场文书
法人授权委托书格式
2014/04/08 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
个人贷款收入证明
2014/10/26 职场文书
校车司机安全责任书
2015/05/11 职场文书