vue+微信支付目錄+JSSDK簽名解決方案

vue+微信支付目錄+JSSDK簽名解決方案

遇坑以下

注意：此方法僅爲我的總結，並不是惟一解決方案

• 微信JSSDK簽名出錯
• 微信支付 調起支付缺乏API參數
• 微信支付目錄配置，只有5個配置，可能超過5個地方有配置，路由規劃
• 微信受權回調處理

我所使用的技術

• vue路由模式 history 模式，有兩點好處

  • history路由模式好看
  • history模式下能夠保持頁面後退時，上一個頁面的滾動條位置
• 微信JSSDK，圖片上傳，地理位置獲取，微信支付等功能
• UI框架，採用vux

相應的處理方法（做爲一個非專業的前端，只能苦苦研究了)

微信JSSDK簽名出錯

微信官方說明以下

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

由此可知，對於vue等SPA應用，Android和IOS 要作不一樣的處理了

通過反覆測試實驗,發現如下問題

• IOS首次調用簽名驗證方法後，路由變化可再也不須要簽名驗證
• Android 隨着路由變化，每次都須要簽名驗證

至此，解決方案已經出爐

• vue提供vue-router。主要是用router.beforeEach，每當用戶第一次進來時，去獲取一次簽名驗證。注意：只獲取一次，這樣IOS簽名就解決了。
• Android下，則須要每一個頁面去獲取簽名
• 注意：每次簽名時，都要執行wx.config()方法，用以更新簽名配置

微信支付相關（支付目錄配置）

問題描述

• 微信支付目錄要求最多配置5個目錄
• 支付目錄 必須細分到二級或以上

支付目錄配置規則示例

你的支付目錄以下：
例1：http://pandao.github.io/show/base
- 支付配置：http://pandao.github.io/show

例2：http://pandao.github.io/pay/show?a=2&b=3
- 支付配置 http://pandao.github.io/pay/

• 應該發現其中的規律了吧，配置到 最後一個""/"的後面。

解決方案

• 將全部支付頁面的路由，統一加上「/pay/」，響應的參數變動，以？a=b等
• 效果例如
• http://pandao.github.io/pay/s...
• http://pandao.github.io/pay/s...
• 最後 配置路徑爲 http://pandao.github.io/pay/

微信受權回調

問題描述

vue history模式，須要配合後端服務器配置才能生效

相應的配置示例

Apache

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Nginx

location / {
  try_files $uri $uri/ /index.html;
}

我採用的nginx的配置

• 爲了將先後臺路由上區分開，微信端個人路由，均已 url/weixin/param這樣區分

因此個人配置爲

location ^~ /weixin/ {
  try_files $uri $uri/ /index.html;
}

• 意思是，只要訪問路由是 /weixin/這樣的路由，均請求html靜態文件，這樣，不會影響，同一個域名下，接口，後臺等請求鏈接

前言鋪墊夠多了，下面說說 受權回調的解決方案

• 其實很簡單：例如我去請求 url/access？return_url='url/weixin/index'
• 看出來解決方法了嗎，就是去受權方法的地方，先去受權，拿到受權後，再回調 return_url 中攜帶的回調地址

至此，個人敘述就結束了，因爲時間緊迫，沒有詳細的貼上代碼，這是「耍流氓」的行爲啊，下次完善。