支付宝小程序的携带参数全局分享实现

前言：　　

关于微信小程序全局分享控制的事项，可以参考：微信小程序全局分享转发控制实现——从此无需页面单独配置。

关于支付宝小程序官方提供的的全局分享，相见官方文档页面事件处理函数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的封装（官网提供的太难用了）；

使用上面的全局分享配置方案，页面中也不可以再配置分享事件的函数，不然会覆盖全局分享。

posted on 2020-04-03 18:23  逍遥云天  阅读(4894)  评论(0)  编辑  收藏  举报

导航