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