首先：需要先判斷環境，如果不是微信環境下就切換成H5瀏覽器環境下支付。
前提配置：公眾號要設置好支付域名，網頁授權域名，企業賬號，商戶號，開通jsapi支付權限。

H5通過調用微信提供的JSbridge（WeixinJSBridge.invoke()）來喚起微信支付控件。
JSBridge，一個js橋幫助H5和Native之間的通信，因為js是運行在一個js容器里，與原生運行環境隔離，所以需要這種機制來實現這兩個的雙向通信。
第一步：我這邊是要通過微信code發送請求給后端獲取喚起微信彈窗參數。

引導微信用戶授權獲取code(訪問特定的微信鏈接獲取):

https://open.weixin.qq.com/connect/oauth2/authorize?appid=公眾號APPID&redirect_uri=授權后重定向回調的鏈接地址&response_type=code&scope=應用授權作用域&state=STATE#wechat_redirect

Tips:回調鏈接地址需要urlencode轉碼處理 如 let url=urlencode(window.location.href)
授權后的code是拼接在回調地址上的 參數也是code

getQuery(name) {var result = window.location.search.match(new RegExp('[\\?\\&]' + name + '=([^\\&]+)', 'i'))if (result === null || result.length < 1) {return false}return result[1]} getQuery('code'）

發起請求：

發起請求 axios({method:'get',url:'/GW/URL',params:{產品Id,用戶手機號，訂購類型，微信code，交易流水號 }, }).then(res=>{ res.微信彈窗參數 })

第二步：獲取到微信支付彈窗的參數：如appId,時間戳，隨機竄，微信簽名方式，微信簽名。判斷環境

// 支付只能在微信內置瀏覽器才有效果,在其他瀏覽器里面是無效的，進行判斷if (typeof WeixinJSBridge == "undefined") {console.log("請在微信客戶端打開");if (document.addEventListener) {document.addEventListener("WeixinJSBridgeReady",this.onBridgeReady(微信彈窗參數),false);} else if (document.attachEvent) {document.attachEvent("WeixinJSBridgeReady",this.onBridgeReady(微信彈窗參數));document.attachEvent("onWeixinJSBridgeReady",this.onBridgeReady(微信彈窗參數));}} else {this.onBridgeReady(微信彈窗參數);}

第三步：喚起支付彈窗

onBridgeReady(微信彈窗參數) {let that = this;WeixinJSBridge.invoke("getBrandWCPayRequest",{appId: 微信彈窗參數.weixinAppId, //公眾號ID，由商戶傳入timeStamp: 微信彈窗參數.weixinTimestamp, //時間戳，自1970年以來的秒數nonceStr: 微信彈窗參數.weixinNonceStr, //隨機串package: 微信彈窗參數.weixinPackage,signType: 微信彈窗參數.weixinSignType, //微信簽名方式：paySign: 微信彈窗參數.weixinSign //微信簽名},function(res) {if (res.err_msg == "get_brand_wcpay_request:ok") {// 使用以上方式判斷前端返回,微信團隊鄭重提示：//res.err_msg將在用戶支付成功后返回ok，但并不保證它絕對可靠。that.$alertMsg("支付成功");} else {that.$alertMsg("支付取消");}});}

總結

以上是生活随笔為你收集整理的微信jsapi支付详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。