微信小程序如何写一个可以订阅消息的代码?只要在app.js里接受到服务器消息,就可以按照各个page的订阅消息进行回调
网友回复
在utils下新建一个Topic.js文件,代码如下
class Topic {//主题 constructor() { this.observers = [];//存储订阅者 } subit(observer) {//增加订阅者 this.observers.push(observer); } unsubit(observer) {//删除订阅者 this.observers.forEach((item, index) => { if (item == observer) { this.observers.splice(index, 1); return; } }); } notify(data) {// 向订阅者发布消息 this.observers.forEach(item => { console.log("向订阅者发送消息"); item.notify(data);// 在每一个页面中创建一个notify函数来接受消息 }); } } module.exports = { Topic, };在app.js的onlanch中添加代码
var { Topic } = require('./utils/Topic'); App({ onLaunch() { this.topic = new Topic(); //模拟接收到消息 setInterval(() => { this.topic.notify("hello") }, 3000); }, globalData: { userInfo: null } })在page中订阅和取消订阅消息
const app = getApp() Page({ data: { }, onUnload:function(){ app.topic.unsubit(this);// 取消订阅 }, onLoad: function() { app.topic.subit(this);// 订阅 }, notify(data){ console.log("获取订阅消息"); console.log(data); } })ok这样实现了一个简单的消息订阅,可以用在及时通讯等场景下
1、新建一个Publishtion.js
class Publishtion { subscribers = { any: [] } // 添加订阅者 订阅者 = 注册方法 on(type,fn) { type = type || 'any' if (typeof this.subscribers[type] === 'undefined') { this.subscribers[type] = [] } this.subscribers[type].push(fn) } // 移除订阅者 remove() { // 传入参数 移除的指令 移除的用户 对应的订阅消息 this.visitSubscribers('unsubscribe', fn, type) } // 发布消息 publish(publication, type) { // 传入参数 发布消息的指令 发布的内容 发布到具体哪个类目 this.visitSubscribers('publish', publication, type) } // 访问订阅库 参数 传入的动作 arg是用户或者消息 type消息的类型 visitSubscribers(action, arg, type) { // 需要访问的具体的消息类别 若没有 则为默认消息 var pubtype = type || 'any', // 获取订阅此消息的所有用户的列表 subscribers = this.subscribers[pubtype], i, // 获取用户数量 max = subscribers ? subscribers.length : 0 for (i = 0; i < max; i++) { // 如果操作是 发布消息 if (action == 'publish') { // 发布的内容 subscribers[i](arg) } else { // 如果操作不是发布 则进行删除订阅该消息对应的某个用户 就是传入的方法 if (subscribers[i] === arg) { // 删除这个 1个 subscribers.splice(i, 1) } } } } } export { Publishtion }2、在app.js中实例化一个对象
var { Publishtion} = require('./utils/Publishtion'); App({ onLaunch() { // 将这个类挂载到全局唯一实例的App上 this.topic = new Publishtion(); //模拟接收到消息 setInterval(() => { //新用户登录发布消息 this.topic.publish("hello","newuser") }, 3000); } })2、调用
const app = getApp() //订阅消息 app.topic.on('newuser',data => { console.log(data); }); //退订消息 app.topic.remove();