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

young.li 發布于2019-08-26 11:49 / 1552人閱讀

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

問題背景 -- 分享的數據來源

當前在維護的小程序項目使用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云服務器云服務器詳情頁淘寶詳情頁分析仿淘寶詳情頁微信小程序電腦上怎么打開

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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