vue 开发微信公众号h5页面遇到的坑
1、在微信授权方面,这是个不得不吐槽的点,不能本地调试,必须每次打包项目放到线上去调试,这个是真的不爽太浪费时间了。而且vue开发并授权好像只能用hash路由,而且授权时返回在URL上的code码等参数会拼接在‘#’之前,而vue的query参数都是在‘#’之后的。而且授权完成后最好把code这参数从URL上去掉,是为了避免不必要的麻烦,而且这个最好写全局路由导航守卫中,这样能保证每个页面授权,就算你想某个页面不授权也可以在from参数中去做判断不授权,还是比较方便的
2、vue开发项目实现分享功能,其实一般的分享完全没问题的,主要是分享时要带上一些参数,所以会导致和授权时参数有时拼接到‘#’之前有时又在后面。最后只能手动自己拼接,可以避免。但还是要拼接在‘#’之前,用户通过分享链接进入就不能通过this.$route.query来获取了,只能自己截取分享出去的参数。
3、解决苹果手机不能自动播放的问题
let voice = document.getElementById('game-bgm') // 调用 <audio> 元素提供的方法 play() voice.play() // 判斷 WeixinJSBridge 是否存在 if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') { voice.play() } else { // 監聽客户端抛出事件"WeixinJSBridgeReady" if (document.addEventListener) { document.addEventListener('WeixinJSBridgeReady', function () { voice.play() }, false) } else if (document.attachEvent) { document.attachEvent('WeixinJSBridgeReady', function () { voice.play() }) document.attachEvent('onWeixinJSBridgeReady', function () { voice.play() }) } } 只需要在mounted 钩子函数加入上面这段代码就可以了,并传入audio元素的id