vue中使用微信公众号js-sdk踩坑记录
版权申诉
188 浏览量
2020-12-03
18:16:10
上传
评论
收藏 318KB PDF 举报
vue中使用微信公众号中使用微信公众号js-sdk踩坑记录踩坑记录
最近又在vue中捣鼓了下微信公众号api的接入，不得不说这里边水是真的深啊，上次分享了微信授权登录和js-sdk签名的部
分，其中很多朋友私信我表示了疑惑，今天我就再次尝试理顺一下这里边的坑吧：
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以
直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
分享页面到朋友圈分享页面到朋友圈
上文是从官方文档中摘出来的，由此可见，我们如果要实现在公众号的内嵌h5中实现微信分享，支付等功能，就得引入js-
sdk。
使用js-sdk有一个关键的环节，那就是通过config接口注入权限验证配置，而配置中有个signature参数是需要借助服务端获取
的，这里就不过多探讨了，大家通过官方文档可以深入了解。
Hash or History?
上篇文章，我推荐大家在vue中配置vue-router使用hash模式，那么hash模式和history模式到底有什么差别呢？我举个栗子，
假设我们都通过http://domain.com进入，然后跳转到路由为/jssdk的页面需要用到jssdk，那么实际js-sdk进行签名校验时所获取的
当前页面url在ios和andrioid是不同的，这里我通过表格展示出来：
真相都在表格里，我表达能力不好恕我偷个懒23333333。
如果阁下没有接入分享指定页面的需求的话，hash模式很方便，但是无奈笔者需要接微信分享，如果使用hash模式，分享出
去的地址，微信会自动处理掉#后边的部分，那么我就没法分享指定页面到朋友圈或者给朋友了。
怎么办呢，只能硬着脑子解决history问题咯，其实也好解决，就是iOS需要使用第一次进入页面的URL获取签名，安卓每次路
由切换都重新配置签名。我这里罗列两个方案：
1.入口文件中记录页面URL，在页面组件创建完成后，ios获取记录的url进行签名，android获取当前路由
（window.location.href.split('#')[0]），请移步我的上一篇博客
2.入口文件中直接进行签名和注入配置，仅针对android在每次切换路由时再重新签名和配置。该方案适合所有页面都需要用
到js-sdk的情况
问题记录问题记录
现列出我在捣鼓过程中遇到的一个个bug：
1.安卓设备能分享ios设备不能分享；
出现该问题的原因就是因为采用了history模式，且没有考虑到ios校验签名获取的url是第一次访问的url而使用了切换后的url。
2.ios设备进入页面时不能分享，手动刷新页面后才能分享；
多次测试后我发现，测试分享的时候，如果是访问的链接没带http://的话，除了首页其他页面都是失效的，测试时落地页ur必
须要加http://
3.点击链接能正常分享，点击别人分享的图文消息之后不能分享；
猜想1：点击图文消息时候，微信进行签名校验的url去掉了自己添加的参数，所以我们在进行签名时也要去掉微信添加的参
数? 所以我把微信参数即`?from=singlemessage&isappinstalled=0’这个部分去掉，结果依旧是分享失败，而我自己随意加一个
参数，分享则正常，我随意加两个参数的时候，分享却又不正常了。
评论0