导语:本文主要介绍在小程序中,多页面之间如何保持数据同步
在很多的产品中,都会存在跨页面间需要数据同步,如下示例:
为了更好的理解该场景,我们再详细描绘一下:
-
<李>本场景包括4个页面:动态广场,个人中心,我的动态,动态详情李>
<李>首先,进入动态广场页,请求加载数据,展示动态列表,其中,我们用绿色内阴影区分该条动态是“我的”,其他未加内阴影的表示是“别人的”,李>
<李>然后,进入个人中心页,请求加载数据,展示获赞数量;李>
<李>点击我的动态,进入我的动态页,请求加载数据,展示我的动态列表;李>
<李>点击其中一条动态,进入动态详情页,请求加载数据,进行点赞操作,李>
<李>在第第五步中,点赞成功后,回退到我的动态页,可以看到该条动态点赞状态和数量发生变化,已经同步;李>
<李>再回到到个人中心页,也可以看到获赞数量发生变化,已经同步;李>
<李>再回到动态广场页,也可以看到对应的一条动态点赞状态和数量发生变化,已经同步;李>
下面我们来探讨一下这个场景的实现,在此之前,我们先要了解在点赞时,该场景中各页面的状态及关系。
如上图所示,当我们在点赞时,4个页面都已经在是打开的(4个webview)。当我们点赞成功时,点击左上解返回时,动态详情页的webview关掉,直接看到下一层webview,也就是我的动态页,这个页面是已经存在的。其他页面也是如此。
那对于这些已经存在的页面,我们应该如何同步更新数据呢?
当然,如果比较懒,可以直接在昂秀的时候重新拉数据渲染页面。但显然这是非常低级,不可取也没必要的做法。重新拉数据需要耗时,页面重新渲染也会看到闪屏,关键是根本没必要重新拉数据,因为数据发生了变化,前端是知道的。
所以我们可以这样做,在动态详情页点赞成功时,保存一个数据到全局globalData中去,回到我的动态页,在昂秀中去检测全局globalData中是否有点赞变化的数据,有的话,就读取出来去更新相应的动态。
//动态详情页js onLike () { … 成功:()=比;{ App.globalData。像={ 支撑材:10001, 喜欢:1、 hasLike:真 } } }//我的动态页js 昂秀(){ 如果(App.globalData。喜欢!==null) {//读取globaldata.like数据去更新 this.doUpdata ()//特别需要注意,更新完后,需要把globaldata.like清掉,不然下次昂秀还会继续走到该逻辑 App.globalData。像=零 } } >之前这样似乎可以达到我们的目的,无请求,纯前端局部更新。
但这样还存在一个问题,当我们再退回到个人中心页时,要检查下获赞数量是否需要更新,以及回到动态广场页时,也要检查点赞有没有发生变化。但在这两个页面昂秀去判断App.globalData.like时,都已经检测不到了,因为该数据已经在我的动态页昂秀中置为零了。
概括来说,在点赞时,只生产了一条数据,但有多个消费者,哪个页面先把数据消费了,其他页面也就无法检测到数据了。
由此,我们想到那就使用EventBus来处理。
首先,我们自己实现一套简单的EventBus。
源码见:git.weixin.qq.com/xinyuanliu/?/p>
在小程序启动时,初始化EventBus:
const事件=需要.default (“/util/events.js”) 应用程序({ 事件:空,>//我的动态. js const应用=getApp () 页面({ 数据:{ 列表:[] },> const应用=getApp () 组件({ 属性:{…}, 方法:{//点赞 tapLike (e) { {喜欢,hasLike}=this.data吧 喜欢+=(hasLike,,1 | | 1) hasLike=! hasLike 这一点。updateFeeds(喜欢hasLike)(()=比;{ this.setData ({ 喜欢, hasLike })//广播事件 ↓重点在这里↓ App.emitFeedsLike ({ uid: this.data.uid, 支撑材:this.data.fid, 喜欢, hasLike }) }) }, … } })详解小程序开发经验:多页面数据同步