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 中攜帶的回撥地址