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


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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
JavaScript静态的动态
Sep 18 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
判断JS对象是否拥有某属性的方法推荐
May 12 Javascript
JavaScript SHA1加密算法实现详细代码
Oct 06 Javascript
js仿微信语音播放实现思路
Dec 12 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
浅谈webpack4 图片处理汇总
Sep 12 Javascript
解决vue-photo-preview 异步图片放大失效的问题
Jul 29 Javascript
在vue中axios设置timeout超时的操作
Sep 04 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 error_log 函数的使用
2009/04/13 PHP
php实现异步数据调用的方法
2015/12/24 PHP
jQuery+php简单实现全选删除的方法
2016/11/28 PHP
PHP那些琐碎的知识点(整理)
2017/05/20 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
js 处理URL实用技巧
2010/11/23 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
2016/05/13 Javascript
javaScript事件机制兼容【详细整理】
2016/07/23 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
在vue-cli中引入lodash.js并使用详解
2019/11/13 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
Python中正则表达式的用法实例汇总
2014/08/18 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Python Flask基础教程示例代码
2018/02/07 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
python write无法写入文件的解决方法
2019/01/23 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
python cumsum函数的具体使用
2019/07/29 Python
python由已知数组快速生成新数组的方法
2020/04/08 Python
django orm模块中的 is_delete用法
2020/05/20 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
团代会宣传工作方案
2014/05/08 职场文书
超市理货员岗位职责
2014/07/04 职场文书
英文邀请函
2015/02/02 职场文书