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


Posted in Javascript onMay 18, 2019

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

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

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

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

  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
 }
}

这样似乎可以达到我们的目的,无请求、纯前端局部更新。

但这样还存在一个问题,当我们再退回到个人中心页时,要检查下获赞数量是否需要更新,以及回到动态广场页时,也要检查点赞有没有发生变化。但在这两个页面onShow去判断App.globalData.like时,都已经检测不到了,因为该数据已经在我的动态页onShow中置为null了。

概括来说,在点赞时,只生产了一条数据,但有多个消费者,哪个页面先把数据消费了,其他页面也就无法检测到数据了。

由此,我们想到那就使用EventBus来处理。
首先,我们自己实现一套简单的EventBus。

源码见:git.weixin.qq.com/xinyuanliu/…

在小程序启动时,初始化EventBus:

const Event = require('/util/events.js').default

App({
 events: null,
 onLaunch(options) {
 this.initEvents()
 // doOtherThings
 },
 initEvents() {
 this.events = new Event()
 },
 emitFeedsLike(data) {
 this.events.emit('feedsLike', data)
 },
 emitPublishFeeds(data) {
 this.events.emit('publishFeeds', data)
 },
 ...
}

各个页面在onLoad时,注册监听事件(在此以我的动态页为例):

// 我的动态.js
const App = getApp()

Page({
 data: {
 list: []
 },
 onLoad: function (options) {
 ...
 // 监听点赞事件广播
 ↓ 重点在这里 ↓
 App.events.on('feedsLike', data => {
  console.log('我的动态页面收到点赞变化通知:', data)
  // 进行更新操作
 })
 // 监听发布事件广播
 ↓ 重点在这里 ↓
 App.events.on('publishFeeds', data => {
  console.log('我的动态页面收到发布动态通知:', data)
  // 进行更新操作
 })
 },
 ...
})

然后在动态点赞时,发出事件通知。(这里一条动态是封装成组件,不属于某一个页面,点赞事件也是封装在组件内)

const App = getApp()

Component({
 properties: {...},
 methods: {
 // 点赞
 tapLike(e) {
  let { likes, hasLike } = this.data

  likes += (hasLike && -1 || 1)
  hasLike = !hasLike

  this.updateFeeds(likes, hasLike).then(() => {
  this.setData({
   likes,
   hasLike
  })

  // 广播事件
  ↓ 重点在这里 ↓
  App.emitFeedsLike({
   uid: this.data.uid,
   fid: this.data.fid,
   likes,
   hasLike
  })
  })
 },
 ...
 }
})

这样,我们便在小程序中实现了一套跨页面数据同步的方案。

直观上这已经非常完美的实现了我们的需求。但在小程序中存在一个与我们常规经验不太一致的地方。那就是页面在关掉后,它里面的对象并没有销毁,这点是因为小程序的逻辑层是共用一个进程。

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

因此,每次进入页面,都会注册一次监听事件,而退出页面后,该事件并不会销毁。这样的话,多次重复进入页面,就会注册多个重复事件,当事件发生时,就会执行多次响应。请仔细观察下图!

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

为了避免该现象出现,我们切记要在页面的onUnload事件中,主动销毁监听事件。

Page({
 eventsListener: {},
 data: {
 list: []
 },
 onLoad: function (options) {
 ...
 // 监听点赞事件广播
 ↓ 重点在这里 ↓
 this.eventsListener.feedsLike = App.events.on('feedsLike', data => {
  console.log('我的动态页面收到点赞变化通知:', data)
  // 进行更新操作
 })
 // 监听发布事件广播
 ↓ 重点在这里 ↓
 this.eventsListener.publishFeeds= App.events.on('publishFeeds', data => {
  console.log('我的动态页面收到发布动态通知:', data)
  // 进行更新操作
 })
 },
 ↓ 重点在这里 ↓
 onUnload() {
 for (let i in this.eventsListener) {
  App.events.remove(i, this.eventsListener[i])
 } 
 },
 ...
})

至此,我们在小程序中完美的实现了跨页面/组件、多页面数据同步。

本文研究的demo均可以小程序中体验,项目源码:git.weixin.qq.com/xinyuanliu/…

以上所述是小编给大家介绍的小程序开发经验:多页面数据同步详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
借用Google的Javascript API Loader来加速你的网站
Jan 28 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
Jquery ajax请求导出Excel表格的实现代码
Jun 08 Javascript
JavaScript——DOM操作——Window.document对象详解
Jul 14 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
jquery仿京东侧边栏导航效果
Mar 02 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
JavaScript实现星级评价效果
May 17 #Javascript
JavaScript实现美化滑块效果
May 17 #Javascript
vue中使用mxgraph的方法实例代码详解
May 17 #Javascript
vue中引入mxGraph的步骤详解
May 17 #Javascript
微信小程序云开发 搭建一个管理小程序
May 17 #Javascript
微信小程序云开发实现增删改查功能
May 17 #Javascript
微信小程序云开发实现云数据库读写权限
May 17 #Javascript
You might like
PHP实现网上点歌(二)
2006/10/09 PHP
php生成rss类用法实例
2015/04/14 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
js变量作用域及可访问性的探讨
2006/11/23 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
js关闭浏览器窗口及检查浏览器关闭事件
2013/09/03 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
vue实现组件之间传值功能示例
2018/07/13 Javascript
jQuery实现的自定义轮播图功能详解
2018/12/28 jQuery
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
Django静态资源URL STATIC_ROOT的配置方法
2014/11/08 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
使用Python的Flask框架表单插件Flask-WTF实现Web登录验证
2016/07/12 Python
浅谈pandas dataframe对除数是零的处理
2020/07/20 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
求职简历推荐信范文
2013/12/02 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
行政专员的岗位职责
2014/03/10 职场文书
迁户口计划生育证明
2014/10/19 职场文书
2014年班级工作总结
2014/11/14 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
检讨书大全
2015/01/27 职场文书
导游词之山海关
2019/12/10 职场文书
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
Python编程super应用场景及示例解析
2021/10/05 Python