ios设备微信公众号网页二次分享问题总结

魏晓巍

发布于 2020.02.26 20:57 阅读 603 评论 0

       在之前的分销商城项目中,用到了微信分享的功能,在ios设备中出现了二次分享失败的问题。

       所谓二次分享,就是A用户在公众号页面中分享一次后,B用户通过分享链接进入网页,再次分享。在安卓设备中,不存在二次分享失败的情况,这种情况目前只发现出现在ios设备中。

       为什么安卓设备中不存在这个问题我在这里不进研究了,就ios的问题我做一下总结。

项目框架

       本次项目使用的是vue框架,整体结构使用了vue-element-ui,路由模式为history。本次出现的问题可能是由于vue路由到知道,也可能是其他原因,记录下来以供参考。

问题分析

       首先微信分享功能在ios设备和安卓设备中本来就存在区别,简单来说安卓设备需要使用当前页面获取签名,而ios设备不能使用当前页面获取签名,而应该是使用进入项目的第一个页面(其实也不全是如此)的地址。基于此情况,如果是ios设备的话,在跳转路由的时候获取了第一个页面的地址作为签名使用的地址。在第一次分享时这样是有效的,但是在分享链接进入项目后继续分享,则不能正常获取签名,造成这个问题的原因就是因为使用了错误的url。

深究原因以及解决方法

       那么为什么第一次获取签名的时候没有问题,而第二次的时候就出现问题了呢?我根据项目和微信的特点来分析有两点原因:

 

1.微信在二次分享的时候,会在自定义的分享链接后加上参数表明此次分享是二次分享。增加的内容是from=groupmessage&isappinstalled=0这两个参数。在签名时这两个参数是不能使用的,所以将这两个参数去掉即可,由于项目中我还传递了其他参数,所以使用了以下方法解决。

        let userAgent = navigator.userAgent;
        let url = '';
        //判断是否是ios设备
        if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
          url = window.sessionStorage.getItem('originUrl')
        //判断是否存在from参数,如果存在,只保留&from之前的链接
          if(url.includes("&from")){
            url = url.split("&from")[0]
          }
        }
        else {
          url = location.href
        }

 

2.由于分享链接进入的第一个页面需要跳转到一个鉴权页面,所以在这时候获取签名的地址很有可能是鉴权页面的地址,而非首页面的地址,所以我尝试在二次分享的时候使用这个鉴权页面地址获取签名,结果是可行的。

首页跳转鉴权页面地址:

 

 

       在鉴权页面获取地址存到缓存以备获取签名时使用。因为已经获取到首页面了,所以在这个鉴权页面判断已经保存的缓存中的首地址是否是是jump-index页面(本项目中这个页面只有二次分享时会使用到,所以用作标识)。

      let userAgent = navigator.userAgent;
      let winStorage = window.sessionStorage;
      if (userAgent.includes('iPhone') || userAgent.includes('iPad')) {
        //如果首页面是jump-index页面,那么将本页面保存到缓存中,替换首页面
        if(winStorage.originUrl.includes("jump-index")){
          sessionStorage.setItem('originUrl', location.href )  // 用于ios分享
        }
      }

总结

       以上两个方面都是造成ios二次分享失败的原因,这两个部分都需要着重注意。造成问题得原因除了二次分享一定会出现的额外参数外,window.href方法重定向地址也是关键原因,应该是因为重定向了地址,所以导致需要使用重定向后的地址获取签名。