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


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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
Jan 07 Javascript
jquery代码实现多选、不同分享功能
Jul 31 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
Webpack性能优化 DLL 用法详解
Aug 10 Javascript
使用rollup打包JS的方法步骤
Dec 05 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
ES6中的类(Class)示例详解
Dec 09 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
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
php通过session防url攻击方法
2014/12/10 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
自己开发Dojo的建议框架
2008/09/24 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
JQuery获取浏览器窗口内容部分高度的代码
2012/02/24 Javascript
为什么要在引入的css或者js文件后面加参数的详细讲解
2013/05/03 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
浅谈javascript中自定义模版
2015/01/29 Javascript
使用命令对象代替switch语句的写法示例
2015/02/28 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
详解JavaScript树结构
2017/01/09 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
PYTHON正则表达式 re模块使用说明
2011/05/19 Python
Python异常的检测和处理方法
2018/10/26 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
bonprix荷兰网上商店:便宜的服装、鞋子和家居用品
2020/07/04 全球购物
《海伦?凯勒》教学反思
2014/04/17 职场文书
支部书记四风问题自我剖析材料
2014/09/29 职场文书
2015年七一建党节慰问信
2015/03/23 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
KVM基础命令详解
2022/04/30 Servers