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