Home > WeChat Applet > Mini Program Development > WeChat applet implements one-to-many messaging

WeChat applet implements one-to-many messaging

高洛峰
Release: 2017-02-25 09:41:41
Original
2245 people have browsed it

Detailed explanation and example code for implementing one-to-many messaging in the WeChat applet

Value transfer and notifications between various interfaces in the WeChat applet are a pain in the ass. So I imitated the notification center in iOS and wrote a similar notification center in the WeChat applet.

The notification center can: send multiple messages to each other and transfer objects. Very simple to use.

When used, register a notification name on the interface that needs to receive messages. Then just post the notification name on the interface where you need to send the message. You can register the same notification name in multiple interfaces. This way you can send messages one to many.

Usage:

1: Reference notification.js in app.js

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

2: Add in app.js:

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

3: Register in page.js to receive notifications

PageA.js:

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

4:

PageB.js arbitrary function in page.js that sends notification

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

Implementation:

File download:http://xiazai.jb51.net/201702/yuanma/wxappNotificationCenter-master(jb51.net).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;
Copy after login

Thank you for reading, I hope it can help you, thank you for your support of this site!

For more articles related to WeChat applet implementing one-to-many messaging, please pay attention to the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template