web端的微信支付可分為JSAPI與H5

JSAPI使用場景為微信內(nèi)部，而H5支付則是使用在非微信下的外部瀏覽器。

1.JSAPI

在微信內(nèi)部可以直接喚起微信瀏覽器的內(nèi)置對象 WeixinJSBridge廢話不多說直接上代碼：

// 調(diào)用后端接口拿到JSAPI支付所需參數(shù)，我在beforeRouteEnter的時候調(diào)用。api.apply.jsApiPay(obj).then(res => { if (res.data.code === ’0000’) { vm.params = res.data.bean } else { alert(’微信支付調(diào)起失敗！’) } }).catch(err => { alert(err) })// 點擊支付時候調(diào)用if (typeof WeixinJSBridge === ’undefined’) { if (document.addEventListener) { document.addEventListener(’WeixinJSBridgeReady’, this.onBridgeReady(this.params), false) } else if (document.attachEvent) { document.attachEvent(’WeixinJSBridgeReady’, this.onBridgeReady(this.params)) document.attachEvent(’onWeixinJSBridgeReady’, this.onBridgeReady(this.params)) } } else { this.onBridgeReady(this.params) }onBridgeReady (params) { const that = this WeixinJSBridge.invoke( ’getBrandWCPayRequest’, { appId: params.appId, // 公眾號名稱，由商戶傳入 timeStamp: params.timeStamp, // 支付簽名時間戳，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺生成簽名使用的timeStamp字段名需大寫其中的S字符 nonceStr: params.nonceStr, // 支付簽名隨機串，不長于 32 位 package: params.prepay_id, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值，提交格式如：prepay_id=***） signType: params.signType, // 簽名方式，默認為’SHA1’，使用新版支付需傳入’MD5’ paySign: params.paySign // 支付簽名 }, function (res) { if (res.err_msg === ’get_brand_wcpay_request:ok’) { that.queryOrder() // 這里是查詢訂單是否支付完成，然后執(zhí)行成功和失敗的業(yè)務(wù)邏輯 } else if (res.err_msg === ’get_brand_wcpay_request:fail’) { alert(’支付失敗！’) } } ) },

在微信支付的回調(diào)函數(shù)中，當res.err_msg 為

get_brand_wcpay_request:ok 時，支付狀態(tài)不一定準確，因此需要調(diào)用后端的查詢訂單接口，查詢是否支付完成，然后再執(zhí)行相應(yīng)的邏輯。

2、H5支付

h5相對簡單，前端只需要跳轉(zhuǎn)到后端返回的鏈接即可

api.apply.h5Pay({ title: ’’ orderNum: ’’, expireMinute: 10, redirectUrl: `${window.location.origin}/pay/card?orderId=${vm.orderId}` }).then(res => { vm.h5PayUrl = res.data.bean // 查詢訂單 }).catch(err => { alert(err) })

第一步，請求后端接口，需要傳支付的標題，訂單號，支付時間，重定向鏈接。

第二部，們只需要點擊支付按鈕時候跳轉(zhuǎn)至后端返回鏈接即可。

window.location.href = this.h5PayUrl

需要注意的是H5支付查詢訂單需要用戶去手動觸發(fā)，因此需要增加一個確定訂單的彈層。如圖：

查詢訂單是否支付成功與JSAPI一致~

到此這篇關(guān)于vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題的文章就介紹到這了,更多相關(guān)vue項目前端微信JSAPI與外部H5支付相關(guān)實現(xiàn)過程及常見問題內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！