一行代碼實現Vue微信支付,無需引用wexin-sdk庫,前后端分離HTML微信支付,無需引用任何庫

前后端分離項目實現微信支付的流程：

1：用戶點擊支付

2：請求服務端獲取支付參數

3：客戶端通過JS調起微信支付（微信打開的網頁）

 

* 本文主要解決的是第3步，視為前兩步已經完成，能正確拿到支付參數，示例參數如下 ：

 

　　　　  "appId":"wx2421b1c4370ec43b",     //公眾號名稱，由商戶傳入     
         "timeStamp":"1395712654",         //時間戳，自1970年以來的秒數     
         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //隨機串     
         "package":"prepay_id=u802345jgfjsdfgsdg888",     
         "signType":"MD5",         //微信簽名方式：     
         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信簽名 

 

有了這些參數，就好辦了，我們知道，網頁如果是通過微信打開的會獲得一個全局JS對象：WeixinJSBridge，我們可以判斷如果這個對象不為空，就可以調用其方法發起微信支付，代碼如下 ：

 

 if (typeof WeixinJSBridge == "undefined") {
                    alert("請使用微信瀏覽器打開")
                } else {
                    WeixinJSBridge.invoke('getBrandWCPayRequest', data, (res) => {
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            alert("支付成功");
                        } else {
                            //這里支付失敗和支付取消統一處理
                            alert("支付取消");
                        }
                    })
                }

 

以上代碼寫在獲取支付參數回調中，其中data=回調參數

 

可以發現，實際上我們只需要調用：  

 

WeixinJSBridge.invoke('getBrandWCPayRequest',data）

 

即可實現發起微信支付