微信小程序--详情页的推荐位置继续打开详情页；返回之后分享等数据不正确问题

young.li 发布于2019-08-26 11:49 / 1550人阅读

摘要：问题背景分享的数据来源当前在维护的小程序项目使用开发分享的数据都是通过接口请求后台的形式获得然后存在了数据的对象中类似定义分享数据分享数据获取分享数据赋值后台返回的分享数据当前商品的唯一值使用分享数据来自页面内转发按钮问题的发生在大部分

问题背景 -- 分享的数据来源

当前在维护的小程序项目使用wepy开发；分享的数据都是通过接口请求后台的形式获得；然后存在了数据data的对象中；类似

定义分享数据
data = {
    shareData: "", // 分享数据
    }
获取分享数据
tip.getShareDataReci(res => {
    that.shareData = res; // 赋值后台返回的分享数据
    that.$apply();
  }, curCode); // curCode当前商品的唯一code值
使用分享数据
onShareAppMessage(res) {
  let that = this;
  if (res.from === "button") {
    // 来自页面内转发按钮
  }
  return {
    title: that.shareData.title,
    imageUrl: that.shareData.img,
    path: that.shareData.path,
    success: function(res) {
        ...
    }
}

问题的发生

在大部分的电商网站都有类似的情况；在一个商品List中点击进入某一个商品详情A；然后在详情A的页面中又会有推荐的商品；这个时间点击进入商品详情B；点击分享（不区分右上角...分享和自己添加的分享按钮）；分享的数据是自己存data里面的数据；也都是对的；关键的操作来了；这个时候返回商品A（不区分右滑返回和左上角返回键和物理返回键）；点击分享；会发现分享的数据仍然是商品B的信息~

问题的解决 1. 出栈的解决方式

在商品详情A的推荐位置；点击的时候使用redirect出栈的方式去打开详情B；这个时候分享B是正确的；然后返回是不会到A的；因为被卸载了；直接从B回到了List；不会存在回到A之后分享数据不正确的问题~~
但是这样的解决方案带来的体验是不好的

2. 缓存读取的方式解决（目前在用的） 2.1 存 -- 将code存缓存

第一步在商品List跳转到商品详情A的时候；在A的onluad周期中（返回不会触发该周期）进行存储唯一code值的动作

let reciCodeList = wepy.getStorageSync("reciCodeList"); // 定义获取的code集合
    if (!reciCodeList.length) {
        // 如果之前没有code则往新的数组中添加该code
      wepy.setStorageSync("reciCodeList", [].concat(options.dishCode));
    } else {
        // 如果之前有code（可能在详情A的推荐位置又进入了详情B；类推）
        // 会进行一个去重的动作；防止出现两个一样的
      let i = utils.inArray(options.dishCode, reciCodeList);
      if (i >= 0) {
        shareData.splice(i, 1);
      }
      // 将可能进行去重处理过的数据存缓存
      wepy.setStorageSync("reciCodeList",reciCodeList.concat(options.dishCode));
    }

2.2 改 -- 修改code集合

第二步在商品详情A的onUnload周期中（页面返回动作会触发该生命周期；页面出栈也会触发到）进行修改reciCodeList动作；此动作是为了能在返回之后拿到正确的code值

onUnload() {
    // 先获取存储的code集合
    let reciCodeList = wepy.getStorageSync("reciCodeList");
    // 删除数组的最后一项（为了能在返回之后的页面拿最后一项即为当前正确项）
    /* 我是一个栗子
    在经过onluad以后会得到
    在A的时候；存下了A的唯一code值；为reciCodeList = ["A"];
    在B的时候；累计存下了B的唯一code值；为reciCodeList = ["A","B"];
    在C的时候；累计存下了B的唯一code值；为reciCodeList = ["A","B","C"];
    ...
    当触发返回的时候；会触发onUnload函数；这个时候去删除最后一下；会得到
    在C的时候；存储的reciCodeList = ["A","B","C"];
    这个时候去返回；并且删除最后一项；得到了
    reciCodeList = ["A","B"]; 并且页面回到了B的页面
    */
    reciCodeList.pop();
    // 存储新的集合
    wepy.setStorageSync("reciCodeList", reciCodeList);
  }

2.3 取 -- 取到正确的code

第三步在商品详情A的onShow周期中（每次页面被显示都会触发；返回也是被显示了）进行获取分享数据的动作

async onShow() {
    let that = this;
    // 先获取存储的code集合
    let reciCodeList = wepy.getStorageSync("reciCodeList");
    if (reciCodeList.length) {
        // 如果存在code值；则拿最后一个code值为当前code值
      let curCode = reciCodeList[reciCodeList.length - 1];
      // 当前值去发送请求；获得正确的分享数据
      tip.getShareDataReci(res => {
        that.shareData = res;
        that.$apply();
      }, curCode);
    }
  }

问题的延伸

可能会出现类似的问题；例如当前详情的分享+收藏+不同用户展示不用信息（下有栗子）；都存在返回后数据不正确的情况；也可以一并使用这个方案处理

 // 我是不同用户展示不用信息的栗子
 // 依然使用前文的 A  B  C （详情页都有登录的入口）
 A页面是未登录状态；显示未登录状态该有的展示信息；不在A页面登录；点击推荐位置到B页面
 B页面起初显示的也是未登录状态下的展示信息；这个时候在B页面进行了登录；回到A还是未登录的状态
 这个时候只需要在A的onShow取一次缓存的用户信息即可
 that.userInfo = wepy.getStorageSync("userInfo");

这个是目前微信存在的bug；可先通过方法规避开；等微信修复了以后就乐呵呵了~~~

GPU云服务器云服务器详情页淘宝详情页分析仿淘宝详情页微信小程序电脑上怎么打开

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107625.html

微信小程序--详情页的推荐位置继续打开详情页；返回之后分享等数据不正确问题

摘要：问题背景分享的数据来源当前在维护的小程序项目使用开发分享的数据都是通过接口请求后台的形式获得然后存在了数据的对象中类似定义分享数据分享数据获取分享数据赋值后台返回的分享数据当前商品的唯一值使用分享数据来自页面内转发按钮问题的发生在大部分问题背景 -- 分享的数据来源当前在维护的小程序项目使用wepy开发；分享的数据都是通过接口请求后台的形式获得；然后存在了数据data的对象中；类似...

idealcn 2019-08-01 18:42 评论0 收藏0
微信小程序之启动页的重要性

摘要：在小程序启动的时候自动登录，目前没获取用户信息，所以不需要用户授权，这个逻辑放在根目录下的的方法中。做完之后发现了一个很严重的问题，就是的方法确实会在小程序启动的时候执行，但是首页也会是在文件的中第一个页面也会同时执行，它不是阻塞的。启动页在APP中是个很常见的需求，为什么对于小程序来说也非常重要呢？首先我描述一下我在开发过程中遇到的一些问题以及解决的步骤，到最后为什么要加启动页，看...

Alan 2019-08-16 15:28 评论0 收藏0
当微信小程序遇上filter~

摘要：具体用法其中表示数组元素的值，表示数组元素的下标，表示包含该元素的数组。这里采用随机函数来获取数组的下标，函数是获取之间的数，函数是向下取整，这样就可以随机获取相应的下标数。小程序中的模板就很好地帮我们解决了这个问题，并通过属性来实现调用。在微信小程序的开发过程中，当你想要实现不同页面间的数据绑定，却为此抓耳饶腮时，不妨让微信小程序与filter 来一场完美的邂逅，相信会给你带来别样...

Darkgel 2019-08-21 18:33 评论0 收藏0
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

hersion 2019-08-01 17:45 评论0 收藏0
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

MRZYD 2019-08-21 17:00 评论0 收藏0