使用vue開發微信公衆號下SPA站點的填坑之旅

原文發表於本人博客，點擊進入使用vue開發微信公衆號下SPA站點的填坑之旅

本文爲我創業過程當中，開發項目的填坑之旅。做爲一個技術宅男，個人項目是作一個微信公衆號，先後端所有本身搞定，不浪費國家一分錢^_^。

我決定實現以下功能

• 架構上，實現先後端分離。方便之後先後端的分工
• 考慮到體驗，前端作成SPA站點，也就是單頁面應用
• 須要使用微信的JSSDK
• 須要有微信支付功能

做爲一個偏後端的半專業前端人士，通過一兩週的調研和學習後，

我決定使用以下技術

• 後端使用php搭建接口，本文主要講前端，不細說
• webpack實現前端代碼打包
• vue實現數據綁定，vue-router實現前端路由
• weui提供UI框架
• vux，提供各類組件，包括對weui的組件化封裝

而後

我遇到了以下的坑

1. 微信JSSDK簽名出錯
2. 微信支付簽名出錯
3. 微信支付路徑要求二級或以上路徑
4. 開啓調試模式後，微信支付仍然沒有錯誤提示
5. 受權回調處理
6. 微信的模板消息，會自動把url中的問號(?)去掉

一一詳述

微信JSSDK簽名出錯

JSSDK在普通網站中是沒問題的，可是在SPA站點中，簽名常常出錯

JSSDK官方文檔是這麼說的

全部須要使用JS-SDK的頁面必須先注入配置信息，不然將沒法調用（同一個url僅需調用一次，對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性，因此使用pushState來實現web app的頁面會致使簽名失敗，此問題會在Android6.2中修復）。

也就是說，android下的微信客戶端裏，不支持vue-router的history模式。

解決辦法見支付簽名問題

• vue-router使用hash模式
• 每次url更改的時候，從新調用JSSDK的config接口

微信支付簽名出錯

支付受權的坑，你們能夠參考這篇文章
按照文中的描述，其實咱們也能夠在js中根據android仍是ios，來分別進行處理；可是推薦採用文中的方式，邏輯上更統一，使用也更方便。

另外說明一點，文中的#!作分隔符的方式已經廢棄了，你們使用#便可，歎號(!)去掉了

另外就是wx.config的簽名url和支付簽名url，微信處理也不同，見下面的解決辦法

解決辦法

• vue-router路由使用hash模式
• 每次url更改的時候，從新調用JSSDK的config接口
• hash分隔(#)前面加一個問號(?)，若是js判斷沒有問號，則跳轉一次
• wx.config簽名使用的url，經過window.location.href.split('#')[0]獲取
• 微信支付簽名使用的url，經過用window.location.href獲取

微信支付路徑要求二級或以上路徑

在遇到這個問題以前，個人php接口都統一加了一個前綴api，也就是 http://example.com/api/other 這樣的url，服務器會自動轉發給php服務，其餘url則轉發給前端服務器。遇到微信這個問題後，我把前端url也統一加了一個前綴frontend，這樣前端url就變成了 http://example.com/frontend/?#hash

解決辦法

• 全部前端url，統一加一個/frontend前綴

開啓調試模式後，微信支付仍然沒有錯誤提示

不止微信支付，JSSDK的其餘接口，也常常沒有錯誤提示，或者提示很模糊，微信這簡直是慢性謀殺。
不過我對比發現，ios下的各類提示，要比android下全面不少，若有必要，推薦你們在ios下進行調試
解決辦法

• 使用iphone進行開發調試

受權回調處理

這個不算坑，只是說下個人處理。
每次加載頁面後，我都會調用後臺接口判斷是否登錄，若是沒登錄，則跳轉回到後臺url進行受權，受權後再跳轉回當前頁面

微信的模板消息自動去掉url的問號(?)

前面解決微信簽名問題的時候，咱們給每一個url特地加了一個問號(?)，可是我發現，在發送微信模板消息的時候，即便給微信的url是對的，當用戶點擊模板消息的時候，微信打開的連接中，仍然把問號去掉了，這個很讓人無語。考慮到儘可能本身解決問題的原則，最後個人解決方案是在js中進行判斷處理，自動把缺失的問號加上

解決辦法

• 若是頁面沒有問號(?)，則跳轉到正確的url，代碼以下

function directRightUrl () {
  let paths = window.location.href.split('#')
  paths[1] = paths[1] || '/'
  // 老式的#!分隔跳轉
  if (paths[0].charAt(paths[0].length - 1) !== '?') {
    paths[0] = `${paths[0]}?`
  }
  if (paths[1].charAt(0) === '!') {
     paths[1] = paths[1].substr(1)
  }
  let url = `${paths[0]}#${paths[1]}`
  if (window.location.href !== url) {
    window.location.href = url
  }
}

以上代碼有三個做用

1. 自動添加問號(?)
2. 自動把分隔符由#!變成#
3. 分隔符後面，自動判斷是否爲斜槓(/)，沒有則添加上

結束語

以上就是我在開發過程當中遇到的一些還記得的坑，歡迎你們探討

另外介紹一下個人公衆號啓奏陛下
這是一個提供「一句話新聞」的公衆號，沒有標題，標題即內容
掃描如下二維碼能夠關注