vue 單頁應用中微信支付的坑

標簽（空格分隔）： 微信 支付 坑 vue

---

場景

在微信H5頁面（使用 vue-router2 控制路由的 vue2 單頁應用項目）中使用微信 jssdk 進行微信支付。

基本知識

1.依據微信jssdk官方文檔，使用微信功能的頁面，必須進行微信 config，並在wx ready 之后再調用微信功能。
2.進行微信支付的話，需要在微信開放平台配置微信支付合法路徑。該合法路徑有層級限制，比如需要支付的頁面的url為 https://example.com/redpacket/:problemid 的話，配置的合法路徑需為 https://example.com/redpacket/。即允許最后一級是可變的參數。

狀況

通過 https://example.com/lesson/:lessonid 進入的 vue 根頁面，之后點擊某個鏈接進入了需要進行微信支付的 vue 子頁面 https://example.com/lesson/redpacket/:redpacketid。

坑 支付路徑不合法

坑1 蘋果 vs 安卓

{
  path: '/redpacket/:redpacketid',
  name: 'redpacket',
  component: Redpacket
},

微信確認支付合法路徑的時候，ios 取 Landing Page， Android 取 Current Page。即 ios 認為合法路徑的配置應該是 https://example.com/lesson/，而 Android 認為合法路徑的配置應該是 https://example.com/lesson/redpacket/。 導致微信支付合法url認定不一致的問題。一種解決辦法是就在微信開放平台設置兩個合法路徑，但是由於可配置合法路徑只能最多5個，所以一個功能使用2個名額比較浪費。

參考上面鏈接中的介紹，微信會把 ? 后面的全給忽略掉，所以多長都不會占用路徑層級了，所以嘗試了把 path 改為

{
  path: '/redpacket?/:redpacketid',
  name: 'redpacket',
  component: Redpacket
},

的方式，蘋果和大部分安卓手機都沒有問題了，但是發現華為 p9 p10依然有80%的幾率失敗。

所以為了蘋果，必須把支付功能頁面和根頁面改為是同一層url：

{
  path: '/redpacketqueryproblemid', // 參數改為通過query的方式獲取
  name: 'redpacket',
  component: Redpacket
},

這樣，只用配置一個合法路徑就可以了： https://example.com/lesson/。

坑2

根據微信官方文檔介紹

6.確保你獲取用來簽名的url是動態獲取的，動態頁面可參見實例代碼中php的實現方式。如果是html的靜態頁面在前端通過ajax將url傳到后台簽名，前端需要用js獲取當前頁面除去'#'hash部分的鏈接（可用location.href.split('#')[0]獲取,而且需要encodeURIComponent），因為頁面一旦分享，微信客戶端會在你的鏈接末尾加入其它參數，如果不是動態獲取當前鏈接，將導致分享后的頁面簽名失敗。

我在根頁面進行了 wx.config() 操作（因為需要調用jssdk禁用微信分享），在進入發紅包頁面的時候，又進行了 wx.config() 操作（因為需要調用jssdk微信支付）。但是在刪掉在進入發紅包頁面的時候的 wx.config() 之后，發現 華為 p9 p10 不再發生支付失敗，所有設備頁都正常。所以不知道是官方文檔寫錯了，還是我們又誤解。總之，坑2 為 不能按照官方文檔說的做，url變化了不要再次config。