前端微信支付

簡單在這里記錄一下微信支付的大概流程 ，不怎么精細 有點粗糙

一、獲取openId

1、在微信公眾平台配置相關信息，具體按照微信官方文檔步驟進行配置

  文檔地址：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

2、微信網頁授權

（1）第一步獲取code

參數	是否必填	說明
appid	是	公眾號唯一標示，可以登錄公眾平台查看
redirect_uri	是	授權后重定向的回調鏈接地址（一般都是網站的首頁，看具體的業務邏輯，重定向后會攜帶code），需要對url進行urlEncode處理（可urlEncode的網站：tool.chinaz.com/Tools/urlen…
response_type	是	返回類型,填寫code（即此位置參數無需修改）
scope	是	填寫snsapi_base或snsapi_userinfo。說明：snsapi_base （不彈出授權頁面，直接跳轉，只能獲取用戶openid），snsapi_userinfo （彈出授權頁面，可通過openid拿到昵稱、性別、所在地。並且， 即使在未關注的情況下，只要用戶授權，也能獲取其信息 ）
state	否	重定向后會帶上state參數，開發者可以填寫a-zA-Z0-9的參數值，最多128字節（根據具體業務需求來定）
#wechat_redirect	是	無論直接打開還是做頁面302重定向時候，必須帶此參數

構建完上面的url之后，widows.location.href = 上面構建的url
如果參數填寫都正確，微信授權成功之后會返回redirect_uri對應的url鏈接，並攜帶參數code
如果state也填上了，就會帶上state參數 所以重定向后的url將會是：xxx.xxx.xxx?code=xxxxxx&state=xxx 這時候我們就可以拿到code了。

（2）通過code換取網頁授權access_token

所以前端負責拿到code，把code傳給后台，后台在用code請求微信獲取access_token的接口，請求正確時微信會返回access_token，同時也會返回openid，

二、使用JSSDK

微信JS-SDK說明文檔:

  文檔地址：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

先登錄微信公眾平台進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。

備注：登錄后可在“開發者中心”查看對應的接口權限

2、引入JS文件

H5項目使用微信sdk
在需要調用JS接口的頁面引入如下JS文件

  <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

vue.js 項目使用微信sdk

安裝微信sdk

  npm install weixin-js-sdk --save

引入微信sdk（這里我是在一個js文件里面引入微信sdk）

  import wx from 'weixin-js-sdk'

通過config接口注入權限配置

  wx.config({
      debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，
       //若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印。
      appId: '', // 必填，公眾號的唯一標識
      timestamp: 0, // 必填，生成簽名的時間戳
      nonceStr: '', // 必填，生成簽名的隨機串
      signature: '',// 必填，簽名
      jsApiList: [] // 必填，需要使用的JS接口列表
  });

參數	說明
debug	開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印
appId	必填，公眾號的唯一標識，在公眾平台可以查詢
timestamp	必填，生成簽名的時間戳
nonceStr	必填，生成簽名的隨機串
signature	必填，簽名，可查看JS-SDK使用權限簽名算法 微信JS-SDK說明文檔 17 附錄1
jsApiList	必填，需要使用的JS接口列表，可查看微信JS接口列表: 微信JS-SDK說明文檔 16 附錄2

三、調用微信支付接口

在發起支付請求前確保設置好支付目錄

  官方文檔：JSAPI支付步驟:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

  發起一個微信支付請求：微信JS-SDK說明文檔 :https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

wx.chooseWXPay({
    timestamp: 0, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后台生成簽名使用的timeStamp字段名需大寫其中的S字符
    nonceStr: '', // 支付簽名隨機串，不長於 32 位
    package: '', // 統一支付接口返回的prepay_id參數值，提交格式如：prepay_id=\*\*\*）
    signType: '', // 簽名方式，默認為'SHA1'，使用新版支付需傳入'MD5'
    paySign: '', // 支付簽名
    success: function (res) {
        // 支付成功后的回調函數,處理項目的業務邏輯
    }
});

和注入權限配置同理，這些參數除了回調函數以外都需要后台生成和調用微信接口獲取，具體可以看微信支付的業務流程
微信支付業務流程：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_4

前端對接微信支付的步驟就是這樣子，還有后台的一些邏輯，因為主要是做前端的 后台的邏輯很多也不太懂，所以很多和后台相關的都沒有寫