vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文僅記錄基于vue開發h5項目過程中使用支付寶和微信支付過程中的重點與槽點，僅為前端部分，如有疏漏不正之處，請于文末評論探討。注意：標紅部分灰常重要，仔細閱讀官方文檔非常重要，耐心非常重要，細心非常重要。
一、支付寶h5支付
支付寶h5支付操作起來是超級簡單的，前端關鍵代碼如下：
this.$http.getTradeNo(lastParams).then(res=>{
this.$http.doPayAlipay({
oid: res.data, // 取到的交易訂單號
url: yourBackUrl // 成功后的回調地址
}).then(resAlipay=>{
// 避免時間間隙造成的用戶誤操作，盡管拿到數據了仍然顯示loading...直到跳轉到支付寶的提供的頁面
this.$toast.loading({
mask: true,
message: '加載中...'
});
// 取回來的是支付寶提供的一段自執行的form表單代碼
// 這里我把這段代碼插入頁面中，并手動觸發
const div = document.createElement('div');
div.innerHTML = resAlipay.data.form;
document.body.appendChild(div);
document.forms[0].submit();
})
})
由于安卓APP也調用了h5的支付頁面，所以為了避免一些“尷尬的情況”，我們采用了支付寶官方提供的“手機網站支付轉APP支付”方案，非常貼心的方案呢。
二、微信支付
微信的wap端支付分兩種，一種是微信內的公眾號支付，一種是微信外的H5支付。
首先：只有通過微信認證的服務號才具有支付接口的權限。
其次：設置正確的支付目錄。確保實際支付時的請求目錄與后臺配置的目錄一致，否則將無法成功喚起微信支付。在微信商戶平臺(pay.weixin.qq.com)設置您的公眾號支付支付目錄，設置路徑：商戶平臺-->產品中心-->開發配置，如下圖所示。公眾號支付在請求支付的時候會校驗請求來源是否有在商戶平臺做了配置，所以必須確保支付目錄已經正確的被配置，否則將驗證失敗，請求支付不成功。
然后：設置授權域名。開發公眾號支付時，在統一下單接口中要求必傳用戶openid，而獲取openid則需要您在公眾平臺設置獲取openid的域名，只有被設置過的域名才是一個有效的獲取openid的域名，否則將獲取失敗。
1、公眾號支付
公眾號支付是用戶在微信中打開商戶的H5頁面，商戶在H5頁面通過調用微信支付提供的JSAPI接口調起微信支付模塊完成支付。
openid是微信用戶在公眾號appid下的唯一用戶標識(appid不同，則獲取到的openid就不同)，可用于永久標記一個用戶，同時也是微信公眾號支付的必傳參數。網頁授權獲取用戶openid接口文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842，要獲取openid的第一步便是需要用戶同意授權，獲取code，所以需要前端來處理，官方文檔描述如下：
在確保微信公眾賬號擁有授權作用域(scope參數)的權限的前提下(服務號獲得高級接口后，默認擁有scope參數中的snsapi_base和snsapi_userinfo)，引導關注者打開頁面：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect(若提示“該鏈接無法訪問”，請檢查參數是否填寫錯誤，是否擁有scope參數對應的授權作用域權限)尤其注意：由于授權操作安全等級較高，所以在發起授權請求時，微信會對授權鏈接做正則強匹配校驗，如果鏈接的參數順序不對，授權頁面將無法正常訪問；跳轉回調redirect_uri，應當(必須)使用https鏈接來確保授權code的安全性。
參數
是否必須
說明
appid
是
公眾號的唯一標識
redirect_uri
是
授權后重定向的回調鏈接地址， 請使用 urlEncode 對鏈接進行處理
response_type
是
返回類型，請填寫code
scope
是
應用授權作用域，snsapi_base (不彈出授權頁面，直接跳轉，只能獲取用戶openid)，snsapi_userinfo (彈出授權頁面，可通過openid拿到昵稱、性別、所在地。并且， 即使在未關注的情況下，只要用戶授權，也能獲取其信息 )
state
否
重定向后會帶上state參數，開發者可以填寫a-zA-Z0-9的參數值，最多128字節
#wechat_redirect
是
無論直接打開還是做頁面302重定向時候，必須帶此參數
如果用戶同意授權，頁面將跳轉至redirect_uri/?code=CODE&state=STATE
我們可以把獲取code的那個鏈接直接綁定到公眾號的菜單上，只要用戶點擊菜單，就能跳到我們的應用url并且帶上了code和state，那么我們就可以把這個code傳給后端然后拿到openid存儲到本地，最后需要用到時的時候再傳過去就中了。基于此，我把獲取openid的接口邏輯直接寫到了路由的beforeEach鉤子中(因為來路頁面我并不能掌控)
// ...
router.beforeEach(function (to, from, next) {
// ...
if( checkClient.wechat() && !storage.get('openId') ){
if( to.query.code && to.query.state=='eqifei' ){
getOpenId({
code: to.query.code
}).then(res=>{
if(res.code==0){
storage.set('openId',res.data)
}
})
}else{
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?'+
'appid=服務號的appid&'+
'redirect_uri=授權后重定向的回調鏈接地址&'+
'response_type=code&scope=snsapi_base&state=eqifei#wechat_redirect'
}
}
// ...
})
// ...
發起支付的關鍵代碼如下：
methods:{
doPaySubmit(){
// ...
this.$http.doWechatPay({
oid: '...',
trade_type: 'JSAPI',
openid: this.$tools.storage.get('openId')
}).then(resWechat=>{
this.weixinPay(resWechat.data)
})
// ...
},
weixinPay: function(data) {
var vm = this;
if (typeof WeixinJSBridge == "undefined") {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady",vm.onBridgeReady(data),false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady",vm.onBridgeReady(data));
document.attachEvent("onWeixinJSBridgeReady",vm.onBridgeReady(data));
}
} else {
vm.onBridgeReady(data);
}
},
onBridgeReady: function(data){
var vm = this;
WeixinJSBridge.invoke(
"getBrandWCPayRequest",
{
appId: data.appid, //公眾號名稱，由商戶傳入
timeStamp: data.timestamp, //時間戳，自1970年以來的秒數
nonceStr: data.nonce_str, //隨機串
package: data.prepay_id, //訂單詳情擴展字符串
signType: data.signType, //微信簽名方式：
paySign: data.paySign, //微信簽名
},
function(res) {
if(res.err_msg == "get_brand_wcpay_request:ok"){
// ...
}else{
alert("支付失敗！");
}
}
);
}
}
2、H5支付
H5支付是指商戶在微信客戶端外的移動端網頁展示商品或服務，用戶在前述頁面確認使用微信支付時，商戶發起本服務呼起微信客戶端進行支付。主要用于觸屏版的手機瀏覽器請求微信支付的場景。可以方便的從外部瀏覽器喚起微信支付。注意：H5支付不建議在APP端使用，如需要在APP中使用微信支付，請接APP支付。
微信外的h5支付需要前端做的就簡單多了，關鍵代碼如下：
doPaySubmit(){
// ...
this.$http.doWechatPay({
oid: '',
trade_type: 'MWEB',
}).then(resWechat=>{
window.location.replace(resWechat.data.mweb_url+'&redirect_url='+encodeURIComponent(window.location.href+'&tip=yes'))
})
// ...
}
注意有坑：
1、需對redirect_url進行urlencode處理
2、由于設置redirect_url后，回跳指定頁面的操作可能發生在：a.微信支付中間頁調起微信收銀臺后超過5秒 b.用戶點擊“取消支付“或支付完成后點“完成”按鈕。因此無法保證頁面回跳時，支付流程已結束，所以商戶設置的redirect_url地址不能自動執行查單操作，應讓用戶去點擊按鈕觸發查單操作。
三、相關文檔匯總
總結
以上是生活随笔為你收集整理的vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基金怎么算收益
- 下一篇： 拦截器读post参数导致接口post请求