无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 行业新闻 >

小程序一键生成工具_详解小程序开发经历:多页

时间:2021-01-07 13:45来源:小程序一键生成工具 作者:jianzhan 点击:
详细说明微信小程序开发设计工作经验:多张面数据信息同歩 本文关键详细介绍了微信小程序开发设计工作经验:多张面数据信息同歩,原文中根据实例编码详细介绍的十分详尽
详解小程序开发经验:多页面数据同步       这篇文章主要介绍了小程序开发经验:多页面数据同步,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

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

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

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

如上图所示,当我们在点赞时,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。

源码见:

在小程序启动时,初始化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均可以小程序中体验,项目源码:

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


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm


扫描二维码分享到微信