如何簡單地實現小程式分享頁擁有返回首頁按鈕

ChrisPz發表於2018-04-09

最近對小程式有一定的瞭解,也對小程式讚賞有加,體驗很好,但是分享小程式的單個頁面容易有一個問題,回到首頁的互動複雜,不存在後退按鈕,先來看看有實現這個流程的小程式如何做這個事情--快住--全廣州最走心的免費幫找租房小團隊(感謝幫我找到合適的住所)

先看效果

仔細看的話會發現一般情況下,小程式的分享頁沒有跳轉的一個流程,而快住這裡卻有一個先進入首頁的流程,再跳轉進入對應的分享頁面,這樣進入分享頁之後左上角就會有回到主頁的返回按鈕,相比於讓使用者熟悉小程式的回首頁互動,這樣更為合理.

快住

目前我發現市面上很多小程式都沒有采用這樣分享頁面的做法,快住還是比較有想法的,貼個二維碼,看官可以自行去體會.

快住二維碼

如何實現

參照網上的資料以及官方的文件,我還是研究了不長不短的時間,這也是微信小程式的官方文件不全導致的(或者是我不夠細心)

先看一下微信小程式中關於分享的api

微信官方api文件轉發

我們可以通過重寫onShareAppMessage 函式來實現一些定製化,比如分享出去的卡片標題等等,其中最重要的就是我們可以定義使用者點選卡片進入的頁面路徑. 貼程式碼:

onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉發標題',   
      path: '/pages/xxxx/xxx',//這裡填寫首頁的地址,一般為/pages/xxxx/xxx
      success: function(res) {
        // 轉發成功
      },
      fail: function(res) {
        // 轉發失敗
      }
    }
  }  
複製程式碼

path為我們可以設定的任意頁面,在此我們需要填入首頁的地址,這樣使用者點選分享的卡片即進入首頁.

實現首頁跳轉進入具體的詳情頁

這裡涉及到兩個問題,第一首頁如何判斷什麼時候跳轉,第二首頁如何知曉該跳轉到哪一個詳情頁.

這是微信官方文件沒有告訴我們的事情,即頁面傳值.

頁面傳值

貼程式碼:

onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉發標題',   
      path: '/pages/xxxx/xxx?pageId=123',//這裡在首頁的地址後面新增我們需要傳值的標識位pageId以及值123(pageId 這個名字你們可以自己隨便亂取 如同一個變數名)
      success: function(res) {
        // 轉發成功
      },
      fail: function(res) {
        // 轉發失敗
      }
    }
  }  
複製程式碼

一段程式碼實現了將值123帶給了首頁,同時首頁需要通過這個值來判斷進入首頁的來源是否為使用者點選了分享的卡片.

首頁獲取pageId的值

在首頁的js檔案中,找到onLoad函式 貼程式碼:

onLoad: function (options) {
    if (options. pageId) {
      //這個pageId的值存在則證明首頁的開啟來源於使用者點選來首頁,同時可以通過獲取到的pageId的值跳轉導航到對應的詳情頁
      wx.navigateTo({
        url: '../pageDetail/pageDetail?pageId=' + options.pageId,
      })
    }
  }
複製程式碼

網上還有別的做法,比如在詳情頁中新增一個回首頁的按鈕,個人認為這種跳轉的方式一般,然而後退進入首頁的互動很自然,唯一的弊端,會有一個從首頁跳轉到詳情頁的小瞬間,但是小程式的流行很多都依賴於分享卡片,使用者點選了分享卡片瞅了一眼首頁也未嘗是一件壞事.

end

相關文章