前端微信支付步驟

一、獲取openId
1、在微信公眾平台配置相關信息，具體按照微信官方文檔步驟進行配置：mp.weixin.qq.com/wiki?t=reso…
2、微信網頁授權，文檔：mp.weixin.qq.com/wiki?t=reso…
（1）第一步獲取code 將網頁地址跳轉到如下鏈接：open.weixin.qq.com/connect/oau… 參數說明：

參數	是否必填	說明
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了。

划重點（踩坑日常）：如果vue.js開發，路由的默認hash模式下，會給url末尾加上#號，所以微信重定向過來之后的url會是這樣子：xxx.xxx.xxx?code=xxxxxx&state=xxx/#/ 所以用 window.location.search 獲取不了url后面的參數，認為這是沒有參數的url。。。把路由改成history模式就ok了
（2）通過code換取網頁授權access_token ：access_token 不能保存在前端，一般這一步都是在后台服務器進行的，所以前端負責拿到code，把code傳給后台，后台在用code請求微信獲取access_token的接口，請求正確時微信會返回access_token，同時也會返回openid，因為這一步不是在前端進行的，所以就不詳細寫了，后台拿到openid之后，可以通過接口返回給前端，或者保存在cookie中，前端再從cookie中獲取openid。



二、使用JSSDK
微信JS-SDK說明文檔: mp.weixin.qq.com/wiki?t=reso…

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

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

2、引入JS文件
H5項目使用微信sdk
在需要調用JS接口的頁面引入如下JS文件，（支持https）：res.wx.qq.com/open/js/jwe…

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
復制代碼
如需進一步提升服務穩定性，當上述資源不可訪問時，可改訪問：res2.wx.qq.com/open/js/jwe… （支持https）。

<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
復制代碼
備注：支持使用 AMD/CMD 標准模塊加載方法加載

vue.js 項目使用微信sdk
安裝微信sdk
npm install weixin-js-sdk --save
復制代碼
引入微信sdk（這里我是在一個js文件里面引入微信sdk）
import wx from 'weixin-js-sdk'
復制代碼
3、通過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
因為前端不保存access_token的原因，所以timestamp、nonceStr、signature都需要后台生成，appId最好也是后台返回

我這項目目前只用到微信支付，所以jsApiList:['chooseWXPay'],使用其他接口同理


三、調用微信支付接口
在發起支付請求前確保設置好支付目錄
官方文檔：JSAPI支付步驟

發起一個微信支付請求：微信JS-SDK說明文檔 14 微信支付

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

微信支付業務流程

前端對接微信支付的步驟就是這樣子，還有后台的一些邏輯，因為我不是做后台的，所以后台的邏輯我很多都沒寫
開發時遇到的問題
1、彈出微信支付的toast之后不能調起支付
可能原因
1、微信接口注入權限配置出錯（沒有獲取到調用微信支付接口的權限）

2、簽名出錯

轉載於:https://juejin.im/post/5c94792f518825328473f554