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

Little_XM 發布于2019-06-28 14:35 / 908人閱讀

摘要：主要是用，每當用戶第一次進來時，去獲取一次簽名驗證。注意只獲取一次，這樣簽名就解決了。

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()方法，用以更新簽名配置

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

問題描述

支付目錄必須細分到二級或以上

支付目錄配置規則示例

你的支付目錄如下：
例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/

微信授權回調

問題描述

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

相應的配置示例

Apache


  RewriteEngine On
  RewriteBase /
  RewriteRule ^index.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]

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

至此，我的敘述就結束了，由于時間緊迫，沒有詳細的貼上代碼，這是“耍流氓”的行為啊，下次完善。

云服務器 GPU云服務器微信支付簽名錯誤微信jssdk jssdk微信圖片微信jssdk不穩定

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/26266.html

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

摘要：原文見我的博客，點擊進入使用開發微信公眾號下站點的填坑之旅本文為我創業過程中，開發項目的填坑之旅。作為一個技術宅男，我的項目是做一個微信公眾號，前后端全部自己搞定，不浪費國家一分錢。原文見我的博客，點擊進入使用vue開發微信公眾號下SPA站點的填坑之旅本文為我創業過程中，開發項目的填坑之旅。作為一個技術宅男，我的項目是做一個微信公眾號，前后端全部自己搞定，不浪費國家一分錢^_^。 ...

yeyan1996 2019-08-21 15:09 評論0 收藏0
使用 vue2.0 開發微信公眾號下前后端分離的SPA站點的填坑之旅

摘要：目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法主要是前端。前端提交時使用，在后端再取出對應的微信支付看了下文檔，以前是需要用喚起支付，而現在則是把微信內置到了微信的瀏覽器中。目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法（主要是前端）。內容持續更新中~ 主要實現前后端分離前端為 SPA 單頁面使用微信的JSSDK微信支付技術方案后端使用 php ...

afishhhhh 2019-06-27 16:36 評論0 收藏0
使用 vue2.0 開發微信公眾號下前后端分離的SPA站點的填坑之旅

摘要：目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法主要是前端。前端提交時使用，在后端再取出對應的微信支付看了下文檔，以前是需要用喚起支付，而現在則是把微信內置到了微信的瀏覽器中。目前正在寫一個微信公眾號的小項目，記錄一下遇到的問題和解決方法（主要是前端）。內容持續更新中~ 主要實現前后端分離前端為 SPA 單頁面使用微信的JSSDK微信支付技術方案后端使用 php ...

Taonce 2019-08-20 16:49 評論0 收藏0
vue項目接入微信JSSDK的坑

摘要：微信說明文檔分享的坑根據的文檔，很多人都是在初始化的配置的時候，傳入的當前的地址不正確。同樣的，給微信初始化的加入對應的參數。 date: 2018-12-13 15:23:09 用于記錄接入微信JS-SDK的坑，以后方便查詢第一次接入公眾號微信支付、分享、定位等等的坑的時候，心里是迷茫而又恐懼。因為，聽說坑特別多，后來發現自己的親身體驗到了這一點。支付的坑 1、當前URL未注冊 ...

lieeps 2019-08-30 15:55 評論0 收藏0