前端微信支付流程总结

本文会介绍移动端浏览器调起微信支付和微信内部h5调起微信支付

我先把文档放在前面：
移动端浏览器调起微信支付、微信内部h5调起微信支付

1. 先说一说移动端浏览器调起微信支付的一些的细节，其实那些复杂的微信校验逻辑，后端都已经处理完毕了。我们只需要请求后端的接口，然后后端返回一个url地址，这个url如果后端没有做其他处理的话，应该类似这样的

https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx2916263004719461949c84457c735b0000&package=2150917749

前端拿到这个地址，前端可以在后面拼一个其他的参数：

https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx2916263004719461949c84457c735b0000&package=2150917749&redirect_url=http://www.baidu.com

这样拼写完毕之后微信会根据redirect_url，当支付成功或者支付失败时，会重定向到这个地址。最后执行location.href=url进行跳转即可。

2. 然后是微信内部h5调起微信支付的一些细节

第一步是前端需要拿到这个微信用户的code码，类似这样的链接

"https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx123456&redirect_uri=http://www.baidu.com&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

执行这个链接之后，微信会根据redirect_uri，把code写到这个链接上，例如上面的链接，微信那边会做重定向，重定向之后的链接就是http://www.baidu.com?code=123，然后前端拿到code之后，请求后端接口，获取openId，前端获取到openId之后，存在本地。当前端调用微信支付的时候再把openId传给后端。
后端会返回一些参数，例如：

"appId": "wx2421b1c4370ec43b",     //公众号ID，由商户传入     
"timeStamp": "1395712654",     //时间戳，自1970年以来的秒数     
"nonceStr": "e61463f8efa94090b1f366cccfbbb444",      //随机串     
"package": "prepay_id=wx21201855730335ac86f8c43d1889123400",
"signType": "RSA",     //微信签名方式：     
"paySign": 

前端拿到这些参数之后，再执行微信内置的方法，调起微信支付：

function onBridgeReady() {
    WeixinJSBridge.invoke('getBrandWCPayRequest', {
        "appId": "wx2421b1c4370ec43b",     //公众号ID，由商户传入     
        "timeStamp": "1395712654",     //时间戳，自1970年以来的秒数     
        "nonceStr": "e61463f8efa94090b1f366cccfbbb444",      //随机串     
        "package": "prepay_id=wx21201855730335ac86f8c43d1889123400",
        "signType": "RSA",     //微信签名方式：     
        "paySign": "oR9d8PuhnIc+YZ8cBHFCwfgpaK9gd7vaRvkYD7rthRAZ\/X+QBhcCYL21N7cHCTUxbQ+EAt6Uy+lwSN22f5YZvI45MLko8Pfso0jm46v5hqcVwrk6uddkGuT+Cdvu4WBqDzaDjnNa5UK3GfE1Wfl2gHxIIY5lLdUgWFts17D4WuolLLkiFZV+JSHMvH7eaLdT9N5GBovBwu5yYKUR7skR8Fu+LozcSqQixnlEZUfyE55feLOQTUYzLmR9pNtPbPsu6WVhbNHMS3Ss2+AehHvz+n64GDmXxbX++IOBvm2olHu3PsOUGRwhudhVf7UcGcunXt8cqNjKNqZLhLw4jq\/xDg==" //微信签名 
    },
    function(res) {
        if (res.err_msg == "get_brand_wcpay_request:ok") {
            // 使用以上方式判断前端返回,微信团队郑重提示：
            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        }
    });
}
if (typeof WeixinJSBridge == "undefined") {
    if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
} else {
    onBridgeReady();
}

需要注意的是WeixinJSBridge、WeixinJSBridgeReady，这些东西是微信内置的，只有在微信内部才有效，不需要前端自己安装sdk啥的。