vue的H5项目实现微信分享给好友和朋友圈自定义缩略图显示内容和图标

遇到的问题（三）

接上篇文章的项目。在做完所有的页面后，后端小伙伴初步实现了微信分享，但是分享后缩略图是酱紫的：

最初的效果缩略图图标是一个回形针，内容是页面的title，我不想要这种效果，想实现下面那种图标和内容都可以自定义的效果，还有一点，我还想自定义每个页面（因为本项目有多个页面）分享后的URL（即点击分享缩略打开指定页面）。调用微信的接口时，遇到了这么几个问题：
1、微信的签名问题：“errMsg”:“config:invalid signature”；
2、微信JSSDK开发工具包分享接口（wx.updateAppMessageShareData、wx.updateTimelineShareData）新旧接口调用不当导致自定义分享无效问题。

JSSDK使用

大家先看看微信JSSDK的官方文档：微信JSSDK官方文档
1、要使用JSSDK中的接口功能，首先要绑定安全域名，这个需要先有一个公众号，然后根据文档的流程进行设置，这个会涉及到服务器的一些操作，具体操作中不会的同学可以请后端的小伙伴帮忙。
2、引入js文件，因为我是好多个页面都要实现分享，本来应该在进行全局配置然后按需加载，我采取了简单粗暴的方法，直接在index.html文件中用script标签对js文件进行引用（http://res2.wx.qq.com/open/js/jweixin-1.6.0.js，这里有个小坑，由于我们的域名是https协议，所以我开始用http引入的时候报错了，改成https://res2.wx.qq.com/open/js/jweixin-1.6.0.js引入就可以了）。
3、通过config接口注入权限验证配置，这个里面的数据是需要后端配合的，其中有几个算法。我是把这段代码写在mounted生命钩子中。另外，建议在调试阶段将其中的debug值设为true，这样成功还是错误都会有弹框信息提示，上线前将其设为false即可。

4、通过ready接口处理成功验证。这段代码也是写在mounted生命钩子中的，写在上面那段代码下面即可。框里边圈的是微信分享的新接口，我用老接口无效（也不建议使用老接口，微信在老接口后面都有注明：即将弃用。。。）

哦，对了，我在分享测试成功后有的页面还是会提示“errMsg”:“config:invalid signature”，我的手机是iphone6，也不知道是不是由于之前的缓存还是什么鬼，别的手机测试此时测试都正常，并没有报我手机的这个错。一下午，我没改代码，我的手机也好了，有点懵逼。。。。。。猜测可能是一些缓存的原因。
上线前记得把debug置为false，因为成功这个为true也会有弹框信息提示success

问题分析、解决

1、微信的签名问题：“errMsg”:“config:invalid signature”

我成功调用微信的接口（debugger能进入我代码中调用的接口函数时），真机测试会提示“errMsg”:“config:invalid signature”。我反馈给后端人员，他坚称自己的算法没有问题，然后我就开始了漫漫的排错之旅。
首先，排查了前端在引入微信接口那块的代码，认真的和微信官方文档做了对比，没有发现代码书写错误，是严格按照官方文档来写的，所以初步排除了前端代码书写错误。
其次，在查找了很多资料文档后，找到了一个微信官方提供的签名测试工具：微信 JS 接口签名校验工具，这个工具可以让你知道后端给你的签名是不是真的正确（按照工具的填写要求填写相关数据后就可对比你们后端给你的签名和官方根据你填的数据生成的签名）。WTF！！！后端给我的签名和官方根据我的数据生成的签名不一致！现在基本可以确定问题出现在后端了。在我摆出事实后，后端这才认真检查了他的代码，最后发现是他的算法错误…这里也想说，遇到问题，参与者能一块解决问题，遇到问题互相推责，会助长团队不良风气，反而不利于问题的快速解决。

2、新旧接口调用不当导致自定义分享无效问题。

在解决了签名的问题之后，分享还是不能成功，由于我参照一些之前的技术博客，用的是老接口（这里不推荐大家用老接口）。

我尝试改成新接口，成功了。
另外，最后分享一个之前参考过的一篇博客：微信分享invalid signature签名错误的坑
一起继续学习吧！