vue项目history模式下 微信分享出坑总结

例如我们的首页是m.ttftx.mobi,路由跳转到test页面，url应该变成m.ttftx.mobi/test。

通过微信复制链接，我们就会发现 安卓复制出来的是m.ttftx.mobi/test ios则是m.ttftx.mobi也就是进入页的链接！！！

涉及到JS-SDK上的功能开发，链接不同会导致签名失败！！！

注：所以ios只需在app.vue中验签一次 一直使用。安卓则需要在其他路由页面重新验签

注：链接不能有空格 不能有# 不能有特殊字符 否则验签不会通过

附上步骤

步骤1：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

步骤2：引入JS文件

index.html中引入 如图1

图1

步骤3：使用JS-SDK的页面通过config接口注入权限验证配置

封装一个方法requireConfig  app.vue 中调用 如图2

后台接口WeChatAuthorization中获取验证的配置信息 然后在wx.config中配置(签名计算神马的，后台的锅 哈哈哈哈哈哈哈哈）

图2

步骤4：通过ready接口处理成功验证

封装一个方法requireShare 如图3

附上安卓安卓ios判断区分的方法，如果是安卓执行步骤三config权限验证配置，如果是ios通过ready接口处理成功验证，error验证失败

let u = navigator.userAgent

let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1

let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)

图3

步骤5：页面分享调用 如图4

图4

步骤6：铛铛铛铛  完成！！分享 如图5

图5