最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次分享了微信授权登录和js-sdk签名的部分,其中很多朋友私信我表示了疑惑,今天我就再次尝试理顺一下这里边的坑吧:
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍的照,选图,语音,位置等手机系统的能力,同时可以直接使用微信分享,扫一扫,卡券,支付等微信特有的能力,为微信用户提供更优质的网页体验。
上文是从官方文档中摘出来的,由此可见,我们如果要实现在公众号的内嵌到h6中实现微信分享,支付等功能,就得引入js-sdk。
使用js-sdk有一个关键的环节,那就是通过配置接口注入权限验证配置,而配置中有个签名参数是需要借助服务端获取的,这里就不过多探讨了,大家通过官方文档可以深入了解。<>强散列或历史# 63;
上篇文章,我推荐大家在vue中配置vue-router使用哈希模式,那么哈希模式和历史模式到底有什么差别呢?我举个栗子,假设我们都通过http://domain.com <代码> 进入,然后跳转到路由为<代码>/jssdk>
真相都在表格里,我表达能力不好恕我偷个懒23333333。
如果阁下没有接入分享指定页面的需求的话,哈希模式很方便,但是无奈笔者需要接微信分享,如果使用哈希模式,分享出去的地址,微信会自动处理掉#后边的部分,那么我就没法分享指定页面到朋友圈或者给朋友了。
怎么办呢,只能硬着脑子解决历史问题咯,其实也好解决,就是iOS需要使用第一次进入页面的URL获取签的名,安卓每次路由切换都重新配置签名。我这里罗列两个方案:
1。入口文件中记录页面URL,在页面组件创建完成后,ios获取记录的URL进行签名,android获取当前路由(<代码> window.location.href.split(“#”)[0]>
2。入口文件中直接进行签名和注入配置,仅针对android在每次切换路由时再重新签名和配置。该方案适合所有页面都需要用到js-sdk的情况
<强>问题记录
现列出我在捣鼓过程中遇到的一个个bug:
1。安卓设备能分享ios设备不能分享。
出现该问题的原因就是因为采用了历史模式,且没有考虑到ios校验签名获取的url是第一次访问的url而使用了切换后的url。2。ios设备进入页面时不能分享,手动刷新页面后才能分享。
多次测试后我发现,测试分享的时候,如果是访问的链接没带http://的话,除了首页其他页面都是失效的,测试时落地页你必须要加http://3。点击链接能正常分享,点击别人分享的图文消息之后不能分享。
猜想1:点击图文消息时候,微信进行签名校验的网址去掉了自己添加的参数,所以我们在进行签名时也要去掉微信添加的参数& # 63;所以我把微信参数即“& # 63;从=singlemessage& isappinstalled=0”这个部分去掉,结果依旧是分享失败,而我自己随意加一个参数,分享则正常,我随意加两个参数的时候,分享却又不正常了。
猜想2:微信分享进行签名校验的url仅能允许一个参数?所以我这样写:<代码> url=location.href.split(”和“)[0]>
猜想3:url难道需要进行编码?即<代码> url=encodeURIComponent (window.location.href.split(“#”)[0]) 经我多次调试、终于找到问题,就是需要对签名的url进行编码,哥,不容易啊
<强>仅需要对签名的url进行编码,分享配置中的url不需要编码
仅需要对签名的url进行编码,分享配置中的url不需要编码
仅需要对签名的url进行编码,分享配置中的url不需要编码这里又是一个坑,务必小心。
经常N次的调试和尝试之后我码了几十行代码,解决了以上所有问题,回首一看我真的是年轻啊,也就那么简单的逻辑,也许换个人一步就到位了,我却和各种各样的错误战斗了N多遍(改动一点代码就要上生产环境调试的心酸有谁能懂),唉…
vue中使用微信公众号js-sdk踩坑记录
