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

 

即可实现发起微信支付




posted @ 2019-09-27 09:30  yzeng  阅读(...)  评论(...编辑  收藏