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

即可实现发起微信支付

一行代码实现Vue微信支付,无需引用wexin-sdk库,前后端分离HTML微信支付,无需引用任何库的相关教程结束。