h5微信本地调试 vue_vue 开发微信公众号h5页面遇到的坑

1、在微信授权方面，这是个不得不吐槽的点，不能本地调试，必须每次打包项目放到线上去调试，这个是真的不爽太浪费时间了。而且vue开发并授权好像只能用hash路由，而且授权时返回在URL上的code码等参数会拼接在‘#’之前，而vue的query参数都是在‘#’之后的。而且授权完成后最好把code这参数从URL上去掉，是为了避免不必要的麻烦，而且这个最好写全局路由导航守卫中，这样能保证每个页面授权，就算你想某个页面不授权也可以在from参数中去做判断不授权，还是比较方便的

2、vue开发项目实现分享功能，其实一般的分享完全没问题的，主要是分享时要带上一些参数，所以会导致和授权时参数有时拼接到‘#’之前有时又在后面。最后只能手动自己拼接，可以避免。但还是要拼接在‘#’之前，用户通过分享链接进入就不能通过this.$route.query来获取了，只能自己截取分享出去的参数。

3、解决苹果手机不能自动播放的问题

let voice = document.getElementById('game-bgm')

// 调用 元素提供的方法 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