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

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。