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

时间:2024-02-29 19:55:00

最近做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也是正常的;