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


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 日期计算算法
Sep 11 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
May 17 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
详解JS函数重载
Dec 04 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
vue.js todolist实现代码
Oct 29 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
详解Next.js页面渲染的优化方案
Jan 27 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
有关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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
咖啡与水的关系
2021/03/03 冲泡冲煮
PHP源码之explode使用说明
2011/08/05 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
cdn模式下vue的基本用法详解
2018/10/07 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
vue中img src 动态加载本地json的图片路径写法
2019/04/25 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
详解pyppeteer(python版puppeteer)基本使用
2019/06/12 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Python之指数与E记法的区别详解
2019/11/21 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
pandas之分组groupby()的使用整理与总结
2020/06/18 Python
Python 求向量的余弦值操作
2021/03/04 Python
金融事务专业毕业生求职信
2014/02/23 职场文书
大学生找工作求职信
2014/07/09 职场文书
房屋所有权证明
2014/10/20 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python