由于业务需要，单页面应用需要进行微信分享，目前要求只分享首页
准备工作：
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重新赋值 再传入请求避免二次分享出错！
如果有朋友看到，有更好的方案欢迎留言哦！谢谢
网友评论