一行代码实现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）

 

即可实现发起微信支付