1.这几天在做公众号微信分享,今天终于完工了,写个小结
参考资料:微信公众平台开发文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115;微信JS接口签名校验工具 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign
2.开发过程
第一:研究开发文档
第二:着手开发
前端调取微信SDK需要这些参数,其中签名是我们后台需要生成并传递给前端的;
第三:获取签名
代码如下:
首先通过APPID和秘钥获取AccessToken
然后通过AccessToken获取jsapi_ticket
最后通过签名算法生成签名,这里的url就是你需要分享当前页面完整的url,并且需要动态获取,不能是写死的,前端通过location.href.split("#")[0]获取并传递给后台,网上很多说需要编码和解码,我们项目反正是没有用
封装对象,返回给前端
3.调试bug
开发中遇到的最大的bug就是签名错误了
签名错误的原因有很多,所以需要有耐心的一步一步调试
我也是按照微信开发文档上的排查步骤来的
这里我纠结并且排查很久的点就是第三点,确认url是页面完整的url,我们前端是用Vue开发的,Vue有个自带的锚点#.
我也不知道我是在哪个地方看到的说微信会给分享链接在后面加上#和自带的一些参数,然后我们前端的妹妹在传参给我的时候已经split("#")[0]了,这样传给我的参数就是http://xxx.xxxxx.com/index.html,
然而我们要分享的页面却是http://xxx.xxxxx.com/index.html#/detail?id=23,这样的话岂不是url传错了吗?
然后我看的那篇文档里还反复强调url一定要是完整的url包括http:// ,也包括后面的参数,所以我就一直在想办法去掉Vue自带的# ,
找了各种反向代理的资料,当然最终也没能解决,后来请教之前做过分享的同事,跟他再三确认就是这样传url的,并且还请他帮忙查看算法是否正确,嗯,都没有问题啊!最后的最后,他提了一句前端config里的参数用的都是你传过去的值吗,去确认下........................
结果,果然,前端接收我这边传参的时候出了点小问题,并没有接收到..........................
所以说,config里面的参数名一定要一定要写正确,并且这里是区分大小写的,这里一定要很仔细的核对参数名,和接参方式
还有一点,前端在开发的时候一定要开启debug模式,debug模式开启了,很多问题就可以早发现,而不是靠双眼去查看
4.小结
很多时候代码里困扰我们很久的bug其实都是由于细节上没有把控好,遇到bug的时候一定不要急躁,急躁就乱了方寸了,平心静气一步一步调试,总能发现问题症结所在的,这次的url周六的时候加班调试了一整天也没有解决,当时心里很烦乱,就是不明白错在哪里了,结果最后bug解决的时候心里反而很平静,前端的妹妹问我是不是想打她,并没有,我只是松了一口气,但是,如果早点核对传参过程就不会浪费一天半的时间了,也算是个教训
最后附上工具类的代码
