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

魏晓巍

发布于 2020.02.26 20:57 阅读 2300 评论 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方法重定向地址也是关键原因，应该是因为重定向了地址，所以导致需要使用重定向后的地址获取签名。

发表评论