微信小程序--詳情頁的推薦位置繼續(xù)打開詳情頁；返回之后分享等數(shù)據(jù)不正確問題

idealcn 發(fā)布于2019-08-01 18:42 / 1474人閱讀

摘要：問題背景分享的數(shù)據(jù)來源當前在維護的小程序項目使用開發(fā)分享的數(shù)據(jù)都是通過接口請求后臺的形式獲得然后存在了數(shù)據(jù)的對象中類似定義分享數(shù)據(jù)分享數(shù)據(jù)獲取分享數(shù)據(jù)賦值后臺返回的分享數(shù)據(jù)當前商品的唯一值使用分享數(shù)據(jù)來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕問題的發(fā)生在大部分

問題背景 -- 分享的數(shù)據(jù)來源

當前在維護的小程序項目使用wepy開發(fā)；分享的數(shù)據(jù)都是通過接口請求后臺的形式獲得；然后存在了數(shù)據(jù)data的對象中；類似

定義分享數(shù)據(jù)
data = {
    shareData: "", // 分享數(shù)據(jù)
    }
獲取分享數(shù)據(jù)
tip.getShareDataReci(res => {
    that.shareData = res; // 賦值后臺返回的分享數(shù)據(jù)
    that.$apply();
  }, curCode); // curCode當前商品的唯一code值
使用分享數(shù)據(jù)
onShareAppMessage(res) {
  let that = this;
  if (res.from === "button") {
    // 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕
  }
  return {
    title: that.shareData.title,
    imageUrl: that.shareData.img,
    path: that.shareData.path,
    success: function(res) {
        ...
    }
}

問題的發(fā)生

在大部分的電商網(wǎng)站都有類似的情況；在一個商品List中點擊進入某一個商品詳情A；然后在詳情A的頁面中又會有推薦的商品；這個時間點擊進入商品詳情B；點擊分享（不區(qū)分右上角...分享和自己添加的分享按鈕）；分享的數(shù)據(jù)是自己存data里面的數(shù)據(jù)；也都是對的；關(guān)鍵的操作來了；這個時候返回商品A（不區(qū)分右滑返回和左上角返回鍵和物理返回鍵）；點擊分享；會發(fā)現(xiàn)分享的數(shù)據(jù)仍然是商品B的信息~

問題的解決 1. 出棧的解決方式

在商品詳情A的推薦位置；點擊的時候使用redirect出棧的方式去打開詳情B；這個時候分享B是正確的；然后返回是不會到A的；因為被卸載了；直接從B回到了List；不會存在回到A之后分享數(shù)據(jù)不正確的問題~~
但是這樣的解決方案帶來的體驗是不好的

2. 緩存讀取的方式解決（目前在用的） 2.1 存 -- 將code存緩存

第一步在商品List跳轉(zhuǎn)到商品詳情A的時候；在A的onluad周期中（返回不會觸發(fā)該周期）進行存儲唯一code值的動作

let reciCodeList = wepy.getStorageSync("reciCodeList"); // 定義獲取的code集合
    if (!reciCodeList.length) {
        // 如果之前沒有code則往新的數(shù)組中添加該code
      wepy.setStorageSync("reciCodeList", [].concat(options.dishCode));
    } else {
        // 如果之前有code（可能在詳情A的推薦位置又進入了詳情B；類推）
        // 會進行一個去重的動作；防止出現(xiàn)兩個一樣的
      let i = utils.inArray(options.dishCode, reciCodeList);
      if (i >= 0) {
        shareData.splice(i, 1);
      }
      // 將可能進行去重處理過的數(shù)據(jù)存緩存
      wepy.setStorageSync("reciCodeList",reciCodeList.concat(options.dishCode));
    }

2.2 改 -- 修改code集合

第二步在商品詳情A的onUnload周期中（頁面返回動作會觸發(fā)該生命周期；頁面出棧也會觸發(fā)到）進行修改reciCodeList動作；此動作是為了能在返回之后拿到正確的code值

onUnload() {
    // 先獲取存儲的code集合
    let reciCodeList = wepy.getStorageSync("reciCodeList");
    // 刪除數(shù)組的最后一項（為了能在返回之后的頁面拿最后一項即為當前正確項）
    /* 我是一個栗子
    在經(jīng)過onluad以后會得到
    在A的時候；存下了A的唯一code值；為reciCodeList = ["A"];
    在B的時候；累計存下了B的唯一code值；為reciCodeList = ["A","B"];
    在C的時候；累計存下了B的唯一code值；為reciCodeList = ["A","B","C"];
    ...
    當觸發(fā)返回的時候；會觸發(fā)onUnload函數(shù)；這個時候去刪除最后一下；會得到
    在C的時候；存儲的reciCodeList = ["A","B","C"];
    這個時候去返回；并且刪除最后一項；得到了
    reciCodeList = ["A","B"]; 并且頁面回到了B的頁面
    */
    reciCodeList.pop();
    // 存儲新的集合
    wepy.setStorageSync("reciCodeList", reciCodeList);
  }

2.3 取 -- 取到正確的code

第三步在商品詳情A的onShow周期中（每次頁面被顯示都會觸發(fā)；返回也是被顯示了）進行獲取分享數(shù)據(jù)的動作

async onShow() {
    let that = this;
    // 先獲取存儲的code集合
    let reciCodeList = wepy.getStorageSync("reciCodeList");
    if (reciCodeList.length) {
        // 如果存在code值；則拿最后一個code值為當前code值
      let curCode = reciCodeList[reciCodeList.length - 1];
      // 當前值去發(fā)送請求；獲得正確的分享數(shù)據(jù)
      tip.getShareDataReci(res => {
        that.shareData = res;
        that.$apply();
      }, curCode);
    }
  }

問題的延伸

可能會出現(xiàn)類似的問題；例如當前詳情的分享+收藏+不同用戶展示不用信息（下有栗子）；都存在返回后數(shù)據(jù)不正確的情況；也可以一并使用這個方案處理

 // 我是不同用戶展示不用信息的栗子
 // 依然使用前文的 A  B  C （詳情頁都有登錄的入口）
 A頁面是未登錄狀態(tài)；顯示未登錄狀態(tài)該有的展示信息；不在A頁面登錄；點擊推薦位置到B頁面
 B頁面起初顯示的也是未登錄狀態(tài)下的展示信息；這個時候在B頁面進行了登錄；回到A還是未登錄的狀態(tài)
 這個時候只需要在A的onShow取一次緩存的用戶信息即可
 that.userInfo = wepy.getStorageSync("userInfo");

這個是目前微信存在的bug；可先通過方法規(guī)避開；等微信修復了以后就樂呵呵了~~~

云服務器 GPU云服務器詳情頁淘寶詳情頁分析仿淘寶詳情頁微信小程序電腦上怎么打開

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/52013.html

發(fā)表評論

登陸后可評論

0條評論

idealcn

男|高級講師

我要關(guān)注我要私信

TA的文章

常用軟件WinRAR中現(xiàn)新安全漏洞可致攻擊者入侵網(wǎng)絡(luò)修改數(shù)據(jù)

閱讀 2757·2021-10-26 09:50
穩(wěn)愛云：香港CN2 GIA，2核/2G/20M帶寬，月付34元，美國CERA聯(lián)通首月半價25元

閱讀 2402·2021-10-11 11:08
那些年，我的前端/Java后端書單

閱讀 2139·2019-08-30 15:53
博客喬遷，特此mark

閱讀 1915·2019-08-30 15:44
關(guān)于CSS Reset 那些事（一）之歷史演變與Normalize.css

閱讀 2391·2019-08-28 18:12
仿美團城市選擇器的 Vue 插件開發(fā)實例

閱讀 2532·2019-08-26 13:59
JavaScript的String類型

閱讀 2862·2019-08-26 12:19
Egg.js搭建后臺服務API

閱讀 2762·2019-08-26 12:09

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

微信小程序--詳情頁的推薦位置繼續(xù)打開詳情頁；返回之后分享等數(shù)據(jù)不正確問題

相關(guān)文章