详细了解小程序开发经验:多页数据同步

导语：本文主要介绍如何在小程序中保持多个页面之间的数据同步

在许多产品中，需要跨页面进行数据同步，如下例所示：

为了更好地理解场景，我们来详细描述一下：

这个场景包括四页：动态广场、个人中心、我的动态和动态细节。首先进入动态方块页面，请求加载数据，显示动态列表。其中，我们用绿色内阴影来区分动态是“我的”，其他非阴影表示是“别人的”；然后，进入个人中心页面，请求加载数据，并显示赞数；点击我的动态，进入我的动态页面，请求加载数据并显示我的动态列表；点击其中一个动态，进入动态详情页面，请求加载数据，并执行赞操作；第五步，点赞成功后，回到我的动态页面，可以看到动态点赞状态和数量发生了变化，已经同步；回到个人中心页面，还可以看到赞数有变化，已经同步；回到动态方块页面，还可以看到对应的动态赞状态和数量发生了变化，已经同步；让我们讨论一下这个场景的实现。在此之前，我们应该先了解一下这个场景中每个页面在我们喜欢的时候的状态和关系。

如上图所示，当我们称赞它时，已经打开了四个页面(四个webview)。当我们点赞成功后，点击左上角的解决方案返回，动态详情页上的webview会被关闭，我们可以直接看到下一层webview，也就是我的动态页面，已经存在了。其他页面也是如此。我们应该如何同步更新这些现有页面的数据？

当然，如果你比较懒的话，可以在onShow的时候直接重新拉取数据呈现页面。但显然这是一种非常低级、不可取和不必要的做法。重新拉取数据需要时间，页面重新渲染时屏幕会闪烁。关键是不需要重新拉数据，因为数据变了，前端知道。

所以我们可以这样做，当动态详情页赞成功的时候，保存一个数据到全局globalData，回到我的动态页面，检查全局globalData是否赞了onShow中的更改数据，如果是，读出来更新对应的动态。

//动态详细信息页面jsonlike(){ 0.success :()={ app . globaldata.like={ FID : 10001，likes: 1，haslike : true } }//我的动态页面jsonshow(){ if(app . global data . like==null){//读取global data . like数据以更新此. doupdate()//需要特别注意。更新后需要清除globaldata.like，否则下一个onShow会继续转到逻辑App.globalData.like=null }}看来我们的目的可以达到了，无需请求，纯前端本地更新。

但是，还是有一个问题。当我们回到个人中心页面的时候，要检查赞数是否需要更新，当我们回到动态方块页面的时候，也要检查赞数是否有变化。然而，在这两个页面上判断App.globalData.like时，无法检测到，因为数据在我的动态页面onShow中已经设置为null。

一般来说，点赞的时候只产生一条数据，但是消费者很多，哪个页面先消费数据，其他页面检测不到数据。

因此，我们认为应该使用事件总线来处理它。首先，我们自己实现一个简单的事件总线。

参见源代码：git.weixin.qq.com/xinyuanliu/…

当小程序启动时，初始化事件总线：

const Event=require('/util/events . js ')。default app({ events 3360 null，onLounch(options){ this . init events()//doOtherThings }、init events(){ this . events=new Event()}、emitFeedsLike(data){ this . events . emit(' feedsLike '，data) }、Emitpublishfeeds (data) {this。events.emit ('publish feeds，data)}，}当每个页面都是onLoad时，注册监听事件(这里以我的动态页面为例):

//我的消息。jsconst app=getapp()page({ data : { list :[]}，onload : function(options){ 0.//听点赞播报此处关注 App.events.on('feedsLike '，Data={console.log('我的动态页面收到赞改通知：'，data) //更新})//听发布事件播报此处关注 App.events.on ('publishfeeds '，data={console.log('我的动态页面收到发布动态通知：'，data) /。(这里的一个动态被封装到一个组件中，不属于某一个页面，赞美事件也封装在组件中)

Const app=getapp()组件({ properties : {.}，methods : {//赞美taplike (e) {let {likes，haslike}=this。data like=(has like-1 | | 1)has like=！已经这样了。更新订阅源(喜欢，有喜欢)。然后(()={this。setdata({ like，has like })//广播事件关注这里 app。emitedslike({ uid : this。data.uid，FID :这个。数据。FID，like，有like})}}，}})这样，我们在小程序中实现了一套跨页面的数据同步方案。

直觉上，这已经完美地满足了我们的需求。但是，小程序和我们常规的体验是有区别的。也就是说，页面关闭后，其中的对象不会被破坏。这是因为小程序的逻辑层共享一个进程。

所以每次进入页面都会注册一个监听事件，退出页面后事件不会被破坏。这样，如果你重复进入页面，你将注册多个重复的事件，当一个事件发生时，你将执行多个响应。请仔细观察下图！

为了避免这种现象，我们应该记得在页面的onUnload事件中主动破坏监听事件。

page({ eventslistener : })，data: { list: [] }，Onload:函数(选项){ 0.//收听点赞事件的广播重点在这里this . event listener . feedslike=app . events . on(' feedslike '，Data={console.log('我的动态页面收到点赞变更通知：'，Data)//updates })//收听发布事件的广播 Focus在这里this . event listener . publishFeeds=app . events . on(' publishFeeds '，Data={console.log('我的动态页面收到发布动态通知：事件侦听器){app。events.remove (I，This.eventsListener[i])} }，})到目前为止，我们已经在小程序中完美实现了跨页/组件和多页数据同步。

本文研究的演示可以在小程序中体验，项目源代码：git.weixin.qq.com/xinyuanliu/…

以上是边肖介绍的小程序开发经验：多页数据同步，详细集成，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！