wepy [框架设计bug]同一页面互相跳转后回退,页面数据错乱

e5nqia27  于 2个月前  发布在  其他
关注(0)|答案(4)|浏览(46)

Description

  • 需求的场景描述:(希望解决的问题)

必现步骤:

在List中点

  1. 击进入某一个商品详情A;
  2. 然后在详情A的页面中又会有别的推荐商品;
  3. 这时候点击进入商品详情B;
  4. 页面展示的是商品B的data数据;
  5. 关键的操作来了;这个时候返回商品A(不区分右滑返回和左上角返回键和物理返回键);
  6. 会发现商品详情A页的data数据仍然是商品详情B的data数据,但页面不刷新的情况显示的是A的详情,一刷新就显示B的详情~

简单总结:

比如商品详情A跳商品详情B,页面路径都是'pages/detail/index',只是页面里渲染的data不一样,回退后最新的页面数据会覆盖旧的页面数据,怀疑是页面 A、与页面 B 共享同一个 Page 实例导致的。

Environment

  • Platform: 开发者工具+iOS+Andriod
  • Platform version: all
  • Wechat version: all
  • wepy-cli version: 最新版
  • wepy version: 1.7.2(2018-05-08)

Reproduce

[如何重现问题]

https://developers.weixin.qq.com/s/NIGWZumJ796Z
写了个比较简单的demo,在原生小程序表现符合预期,但是在wepy框架中,就会复现我上面中描述的bug

[期望表现]

页面回退数据还能回到原页面的数据,不希望单页面单实例

Relevant Code / Logs

<style lang="less">
.introTip{
color:grey;
font-size:30rpx;
margin-top:100rpx;
}
.intro{
text-align: center;
}
button{
width: 80%;
margin: 30rpx auto;
}
</style>
<template>
<view>
  <view class="intro">当前数字:</view>
  <view class="intro">{{number}}</view>
  <button bindtap="plus">下一页</button>
  <button bindtap="show">显示当前数字</button>

   <view class="introTip">
    <view>步骤:</view>
    <view>先点击"下一页"</view>
    <view>再右上角返回</view>
    <view>点击"打印当前数字"</view>
    <view>页面显示1, 但console.log()打印出来的是2</view>
    <view>即:同页跳转,栈顶页面的数据覆盖之前页面的数据</view>
  </view>
</view>
</template>
<script>
import wepy from 'wepy'

export default class Index extends wepy.page {
config = {
  navigationBarTitleText: 'Test'
}
components = {}

data = {
  number: 1
}

methods = {
  plus() {
    wx.navigateTo({
      url: `/pages/index?number=${+this.number + 1}`
    })
  },
  show() {
    console.log(this.number)
  }
}

onLoad(option) {
  const { number = '' } = option
  if (number) {
    this.number = number
  }
}
}
</script>

 ```
[](url)
uqdfh47h

uqdfh47h1#

结合&&判断,使用this.$wxpage.data获取对应的数据,前提是所有数据必须现在data里面写好,不然页面实例不会记录当前的key,会报错的

des4xlb0

des4xlb02#

这个我也遇到了,差不多是利用楼上的方法
可以利用__wxWebviewId__这个属性区别不同实例页面

h9a6wy2h

h9a6wy2h3#

这个我也遇到了,差不多是利用楼上的方法
可以利用__wxWebviewId__这个属性区别不同实例页面

老哥厉害了,又学到新的属性

30byixjq

30byixjq4#

这个我也遇到了,差不多是利用楼上的方法
可以利用__wxWebviewId__这个属性区别不同实例页面

碰到相同的问题了,从 第一页 跳转到 第二页 再返回,在onShow 中 输出 wxWebviewId,输出的是第二页的而不是第一页的,这个时候在第一页 拿到的 this.$wxpage.data 也是 第二页的,这个要怎么处理?难道要把数据在跳转之前都缓存起来,返回时再重新初始化吗?

相关问题