记一次vue单页应用微信分享

由于业务需要，单页面应用需要进行微信分享，目前要求只分享首页

准备工作：

 1.微信公众号平台开发者js安全域名绑定；
 2.页面的域名必须与当前url以及link域名一致；
 3.分享图片必须为线上地址例如CDN地址，且以http://开头

在index.vue使用：

微信jsdk引入 需要在当前页面如下：

最开始在main.js引入出现使用失败 wx 未定义的情况，目前还没有进一步测试；

mounted()中请求后台接口获取config参数

image.png

注意：一般这个地方会在wx.errror中体现签名接口（错误/正确）；之前一直签名失败，原因不得而知（很疑惑很灵异），看到网上有码友们分享在链接传入的时候 进行转码encodeURI,然后后端接收再进行解码，自测后发现 我所面对的这个项目 是无效的，最终直接用window.location.href.split('#')[0] ，#号后的参数不需要

打开微信web开发者工具签名成功！

分享配置中 link必须与当前页面以及公众号开发者配置js安全域名一致，否则即使上面wx.error签名成功 真机测试也会失败， （注意：在这个时候微信开发者工具是可以测试成功的）；

imgUrl必须http://开头，用本地图片和https：//同上会出现签名分享失败

至此首次分享成功，对仅仅是首次分享成功！

就在我以为成功的时候发现分享出去的页面打开再次分享会出现 自定义配置失败 ，又是一个灰灰的图片加灰灰的链接，看的心凉凉~~~~

解决方案：

发现问题，微信分享之后会在链接后面加上一串参数from等 为了统计页面来源， 当拿到这样的地址再请求签名就会出现报错，

我的解决方案是：

1.先提取参数判断

image.png

2.拿到当前页面参数判断window.location.href值

image.png

如果有微信带入的参数可以将window.location.href重新赋值 再传入请求避免二次分享出错！

如果有朋友看到，有更好的方案欢迎留言哦！谢谢