支付寶小程序的攜帶參數全局分享實現


前言:  

關於微信小程序全局分享控制的事項,可以參考:微信小程序全局分享轉發控制實現——從此無需頁面單獨配置。

關於支付寶小程序官方提供的的全局分享,相見官方文檔頁面事件處理函數onShareAppMessage(options: Object)

支付寶小程序中轉發分享有以下特點:

  • 默認開啟,頁面無需像微信小程序一樣必須配置分享轉發的事件函數;
  • 頁面分享轉發默認不帶參數,這個已經跟支付寶小程序技術支持確認過是這樣的,如需攜帶參數,必須要在頁面進行配置。

如上,支付寶小程序的全局分享也無法帶參數,所以按照通常的做法,即使有全局分享可以配置,但是頁面有參數的,還是需要去頁面單獨進行配置的。

如何解決全局分享不帶參數的問題?

前邊在app.js中編碼實現了微信小程序的全局分享,但是這種方法在支付寶小程序中行不通,支付寶小程序中沒有隱式路由之類的對象或函數。

經過一番探索求證,發現並不能在app.js中獲取到頁面參數,目前可以做的就是利用緩存了。

解決方案:

封裝一個獲取當前頁面路徑及參數的公共函數,然后在需要帶參數的頁面的 onLoad 中調用。

示例代碼:

//將當前頁面路徑及參數保存到緩存中(登陸失效自動登陸后relaunch())
my.getCurrentPageUrlWithArgs = function (options) {
  const pages = getCurrentPages()//小程序API,可以直接調用
  const currentPage = pages[pages.length - 1]
  const url = currentPage.route
  let urlWithArgs = `/${url}?`
  for (let key in options) {
    const value = options[key]
    urlWithArgs += `${key}=${value}&`
  }
  urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
  my.setStorage0("currentPageUrl", urlWithArgs)
}

如上,可以直接放在app.js中,亦或者單獨寫個js文件保存,然后導入app.js。

頁面中調用:

1   onLoad(e) {
2     my.getCurrentPageUrlWithArgs(e)
3   },

如上,凡是帶參數的頁面(包含可能會帶參數的)需要分享之后能帶參數打開的,都在頁面加載的時候調用這個函數將頁面路徑和參數保存到緩存中去。

app.js中的全局分享改造:

 1   onShareAppMessage(a, b) {
 2     //獲取當前頁面路由
 3     let pages = getCurrentPages(),
 4       page = pages[pages.length - 1],
 5       //當前頁面路由
 6       route = page.__proto__.route,
 7       //緩存中保存的攜帶參數的頁面鏈接
 8       currentPageUrl = my.getStorageSync0("currentPageUrl"),
 9       //轉發路徑,如頁面路由包含在緩存中保存的頁面url中,那么則取緩存中的url為分享路徑,否則為空(默認分享當前頁面path,不帶參數)
10       shareUrl = (currentPageUrl && currentPageUrl.indexOf(route) > 0) ? currentPageUrl : '';
11     return {
12       title: '全局自定義分享',
13       desc: 'app.js中配置',
14       bgImgUrl: my.getStorageSync0("shareUrl"),
15       path: shareUrl
16     }
17   }

如上,即實現了全局分享控制。這只是比較簡單的全局配置,如有需要,還可以根據路由對不同頁面進行區分配置。

攜參數全局自定義分享配置及控制實現:

如A、B兩個頁面帶參數,需要分別配置對應的分享展示內容,C、D兩個頁面需要走頁面默認分享,其他頁面走全局分享配置,相關代碼如下:

 1   onShareAppMessage(a, b) {
 2     //獲取當前頁面路由
 3     let pages = getCurrentPages(),
 4       route = pages[pages.length - 1].__proto__.route;
 5 
 6     //獲取緩存中保存的攜帶參數的頁面鏈接,如果沒有則為空
 7     let currentPageUrl = my.getStorageSync0("currentPageUrl"),
 8       //轉發路徑,如頁面路由包含在緩存中保存的頁面url中,那么則取緩存中的url為分享路徑,否則為空(默認分享當前頁面path,不帶參數)
 9       shareUrl = (currentPageUrl && currentPageUrl.indexOf(route) > 0) ? currentPageUrl : '';
10 
11     //分享配置內容初始化
12     let shareInfo = {
13       title: "",
14       desc: "",
15       bgImgUrl: "",
16       path: shareUrl
17     }
18 
19     //不同頁面的分享配置示例:A/B進行自定義分享配置,C/D走各自頁面默認分享,其他頁面走全局分享配置
20     let specialShare = ["pageC/index", "pageD/index"]
21     if (route == "pageA/index") {
22       shareInfo.title = "A頁面自定義分享"
23       //A頁面分享的其他配置......
24     } else if (route == "pageB/index") {
25       shareInfo.title = "B頁面自定義分享"
26       //B頁面分享的其他配置......
27     } else if (specialShare.includes(route)) {
28       //需要使用默認分享的頁面      
29     } else {
30       //其他使用全局自定義分享
31       shareInfo.title = "全局自定義配置"
32       shareInfo.desc = 'app.js中配置'
33       shareInfo.bgImgUrl = my.getStorageSync0("shareUrl");
34     }
35 
36     return shareInfo
37   }

雖然代碼多了不少,但是考慮了所有頁面的情況,可以根據自己的實際需求進行調整就好了。

注意事項:

以上代碼中的 getStorageSync0(key)是對小程序原生API的封裝(官網提供的太難用了);

使用上面的全局分享配置方案,頁面中也不可以再配置分享事件的函數,不然會覆蓋全局分享。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM