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

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

摘要：?jiǎn)栴}背景分享的數(shù)據(jù)來(lái)源當(dāng)前在維護(hù)的小程序項(xiàng)目使用開(kāi)發(fā)分享的數(shù)據(jù)都是通過(guò)接口請(qǐng)求后臺(tái)的形式獲得然后存在了數(shù)據(jù)的對(duì)象中類似定義分享數(shù)據(jù)分享數(shù)據(jù)獲取分享數(shù)據(jù)賦值后臺(tái)返回的分享數(shù)據(jù)當(dāng)前商品的唯一值使用分享數(shù)據(jù)來(lái)自頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕問(wèn)題的發(fā)生在大部分

問(wèn)題背景 -- 分享的數(shù)據(jù)來(lái)源

當(dāng)前在維護(hù)的小程序項(xiàng)目使用wepy開(kāi)發(fā)；分享的數(shù)據(jù)都是通過(guò)接口請(qǐng)求后臺(tái)的形式獲得；然后存在了數(shù)據(jù)data的對(duì)象中；類似

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

問(wèn)題的發(fā)生

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

問(wèn)題的解決 1. 出棧的解決方式

在商品詳情A的推薦位置；點(diǎn)擊的時(shí)候使用redirect出棧的方式去打開(kāi)詳情B；這個(gè)時(shí)候分享B是正確的；然后返回是不會(huì)到A的；因?yàn)楸恍遁d了；直接從B回到了List；不會(huì)存在回到A之后分享數(shù)據(jù)不正確的問(wèn)題~~
但是這樣的解決方案帶來(lái)的體驗(yàn)是不好的

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

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

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

2.2 改 -- 修改code集合

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

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

2.3 取 -- 取到正確的code

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

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

問(wèn)題的延伸

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

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

這個(gè)是目前微信存在的bug；可先通過(guò)方法規(guī)避開(kāi)；等微信修復(fù)了以后就樂(lè)呵呵了~~~