vue项目中关于微信分享的坑，以及安卓和ios获取location.href不同的处理

最近做vue项目的微信公众号项目，涉及到微信分享，记录一下心得，以备后用，vue路由用的是hash模式；

该项目只是公众号里面的h5链接，不需要获取code获取access_token的票据，因此前端只需要将当前页面链接处理后发给后端回去分享参数即可；

分享参数包含：

wx.updateTimelineShareData({
        title: option.title, // 分享标题
        link: option.link, // 分享链接，该链接必须与当前页面对应的公众号的JS安全域名一致
        imgUrl: option.imgUrl, // 分享图标 300*300
        desc: option.desc, // 分享描述
        success (res) {
          // 用户成功分享后执行的回调函数
          option.success(res)
        },
        cancel (error) {
          // 用户取消分享后执行的回调函数
          option.error(error)
        }
      })

1、第一步获取页面url；

通过window.location.href.split('#')[0]获取到页面的url，而且需要encodeURIComponent处理后发给后端来获取签名，否则签名无效；页面链接需要是动态获的，否则将导致分享后的页面签名失败。

2、第二步定义分享参数；

分享链接要求该链接域名或路径必须与当前页面对应的公众号JS安全域名一致，就是该链接必须是在公众号的JS安全域名接口中配置好的；

分享图片大小最好是300*300的，大小没有查到是否限制，但是尽量小，避免出现分享的链接无法记载出来图片；

3、第三步，调试；

由于公众号的各种限制，导致无法进行本地调试（大神请忽略，具体实现请百度），因此项目最好有个测试环境，新项目也可以直接在线上环境测试；

因为分享参数初始化的时候会判断当前页面的url与分享的link是否一致，不一致会报错，就导致无法在本地调试分享；

4、第四步解决ios和安卓分享后链接不一致的问题；

测试环境在ios端，分享参数正常，点击后，根据vue路由跳转也正常，ios分享给安卓后的链接，安卓也可以正常跳转页面，但是安卓从测试环境进去后，分享出来的参数显示正常，但是无法跳转到指定页面，只能跳转到路由首页；

通过复制链接发现，安卓获取的href是无法获取到#以及后面的路由参数的，导致页面只能是路由首页。但是安卓通过ios分享的链接点击进去后，再点击分享，发现路由跳转是正常的。

也就是说，如果安卓是通过带有#和路由参数的路径进去的项目，那么再获取的href则跟ios是一致的，路由也是正常跳转的；

处理方案有两种：第一种是判断当前机型是ios还是安卓，然后对获取的link进行不同的处理；ios无需处理，安卓拼接‘#’和当前路由参数即可；

第二种是公众号的点击链接不要只写域名，而是加上带有#和默认路由的，这样安卓点击进去获取的href也是正常的；

 

转载于:https://www.cnblogs.com/blessYou/p/11491827.html