使用 WxNotificationCenter 在微信小程序中实现通知广播

做过客户端开发的同学,肯定都了解过 iOS 的 NSNotificationCenter 或者 Android 的广播机制,这个功能主要解决的问题是:

页面之间的广播通知,比如从 A 页面跳转到 B 页面,B页面完成相关逻辑需要通知A页面刷新数据(并传值)。

小程序广播通知

我在进行「一个程序手册」开发的时候,就碰到了相关的需求:

一个程序手册

从文章列表页面进入文章详情页的时候,用户进行了点赞或者留言操作。然后再返回了列表页的时候,列表页的点赞数,是否点赞,留言数都没有变化,而这样是不对的,如果要保持一致,只有从服务器刷新数据,这样体验就更不好了。

WxNotificationCenter 详细介绍

已经有第三方开发者为小程序开发的 WxNotificationCenter 就实现了该功能:

1. 获取到 WxNotificationCenter 将 WxNotificationCenter.js 文件加入项目目录下

2. 页面中导入


var WxNotificationCenter = require('../../../util/WxNotificationCenter.js')

3. 文章列表页和详情页面都注册,移除通知,以及处理通知


onLoad: function () {
 //注册通知
 var that = this
 WxNotificationCenter.addNotification('articleChange', that.onArticleChange, that)    
},

onUnload: function () {
 //移除通知
 var that = this
 WxNotificationCenter.removeNotification('articleChange', that)
},

//通知处理
onArticleChange: function (newArticle) {
 //更新数据
 this.setData({
  article:newArticle
 })
},

4. 当用户点赞文章或者评论文章之后,发送通知


//发送新的文章
WxNotificationCenter.postNotificationName('articleChange', newArticle);

WxNotificationCenter 下载和体验

下载,请到 GitHub 下载:WxNotificationCenter

Demo,请扫描一个程序手册:

一个程序手册

最后关注「WordPress果酱」:

WordPress果酱

回复「一个程序手册」,可以获取「一个程序手册」的小程序源代码。

标签:

热门文章