+
80
-

微信小程序如何写一个可以订阅消息的代码?

微信小程序如何写一个可以订阅消息的代码?只要在app.js里接受到服务器消息,就可以按照各个page的订阅消息进行回调

网友回复

+
0
-

在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这样实现了一个简单的消息订阅,可以用在及时通讯等场景下
+
0
-

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();

我知道答案,我要回答