详解小程序开发经验：多页面数据同步-创新互联

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

在很多的产品中，都会存在跨页面间需要数据同步，如下示例：

为了更好的理解该场景，我们再详细描绘一下：

1. 本场景包括4个页面：动态广场、个人中心、我的动态、动态详情
2. 首先，进入动态广场页，请求加载数据，展示动态列表，其中，我们用绿色内阴影区分该条动态是“我的”，其他未加内阴影的表示是“别人的”；
3. 然后，进入个人中心页，请求加载数据，展示获赞数量；
4. 点击我的动态，进入我的动态页，请求加载数据，展示我的动态列表；
5. 点击其中一条动态，进入动态详情页，请求加载数据，进行点赞操作；
6. 在第5步中，点赞成功后，回退到我的动态页，可以看到该条动态点赞状态和数量发生变化，已经同步；
7. 再回到到个人中心页，也可以看到获赞数量发生变化，已经同步；
8. 再回到动态广场页，也可以看到对应的一条动态点赞状态和数量发生变化，已经同步；

下面我们来探讨一下这个场景的实现，在此之前，我们先要了解在点赞时，该场景中各页面的状态及关系。

如上图所示，当我们在点赞时，4个页面都已经在是打开的（4个webview）。当我们点赞成功时，点击左上解返回时，动态详情页的webview关掉，直接看到下一层webview，也就是我的动态页，这个页面是已经存在的。其他页面也是如此。
那对于这些已经存在的页面，我们应该如何同步更新数据呢？

当然，如果比较懒，可以直接在onShow的时候重新拉数据渲染页面。但显然这是非常低级、不可取也没必要的做法。重新拉数据需要耗时，页面重新渲染也会看到闪屏，关键是根本没必要重新拉数据，因为数据发生了变化，前端是知道的。

所以我们可以这样做，在动态详情页点赞成功时，保存一个数据到全局globalData中去，回到我的动态页，在onShow中去检测全局globalData中是否有点赞变化的数据，有的话，就读取出来去更新相应的动态。

// 动态详情页js
onLike() {
 ...
 success: () => {
 App.globalData.like = {
  fid: 10001,
  likes: 1,
  hasLike: true   
 }
 }
}

// 我的动态页js
onShow() {
 if(App.globalData.like !== null) {
 // 读取globaldata.like数据去更新
 this.doUpdata()
 // 特别需要注意，更新完后，需要把globaldata.like清掉，不然下次onShow还会继续走到该逻辑
 App.globalData.like = null
 }
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。