微信支付和h5支付详解与示例

----------------------------------------------------------------------------------------------------------------------------

（下图：微信支付流程图）

 

2 微信公众号支付的基本逻辑如下

  《1》---配置好一个url,直接通过window.location.href的方式访问  ，与此同时会重定向到配置好的redicturl中，微信会给改url自动加上两个参数：code和state
  《2》---前端截取到code参数，访问后端接口拿到如下参数
     "appId":self.appId,     //公众号名称，由商户传入     
                    "nonceStr":self.nonceStr, //随机串     
                    "package":self.package,     
                    "paySign":self.paySign,//微信签名 
                    "signType":self.signType,         //微信签名方式：
                    "timeStamp":self.timeStamp, 
 《3》拿到后端给与的参数以后，就可以监听微信提供的事件来唤醒微信支付，只要微信提供的事件被监听到，就会出现金额弹窗进行支付
    如下：
    onBridgeReady(){
                let self=this
                WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                        "appId":self.appId,     //公众号名称，由商户传入     
                        "nonceStr":self.nonceStr, //随机串     
                        "package":self.package,     
                        "paySign":self.paySign,//微信签名 
                        "signType":self.signType,         //微信签名方式：
                        "timeStamp":self.timeStamp,         //时间戳，自1970年以来的秒数     
                        },
                        function(res){
                            if(res.err_msg == "get_brand_wcpay_request:ok" ){
                                console.log("支付成功",res)
                                window.location.href=`http://http://testaa.bb.net/#/pay?orderCode=${decodeURIComponent(self.orderCode)}&isWxPayOk=true`
                        }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                                console.log("取消支付")
                                window.location.href='http://testaa.bb.net/#/pay/#/myOrder/1'
                        }else if(res.err_msg == "get_brand_wcpay_request:fail"){
                                console.log("支付失败")
                                // WeixinJSBridge.call('closeWindow');
                                window.location.href=`http://testaa.bb.net/#/pay?orderCode=cls${decodeURIComponent(self.orderCode)}`
                    }
            }); 
        },
    
再说一说h5支付。h5支付再唤醒微信支付时候的逻辑基本一致，都是先有一个配置好的url然后重定向到对应 的
redirecturl地址然后获取code，再向后端发请求拿到appid等参数，最后通过这些参数调用微信提供的方法唤醒微信支付。
但是在配置url时有一个地方却迥然不同。
对于微信浏览器，
const wxurl="https://open.weixin.qq.com/connect/oauth2/authorize"
 let deCodeUrl=encodeURIComponent('http://testaa.bb.net/#/pay')---->这里是你要重定向的页面地址
const httpWxUrl=wxurl+`?appid=wx12345678&redirect_uri=${deCodeUrl}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`
然后通过window.location.href=httpWxUrl
而对于其他浏览器而言：
这个wxurl地址却并非我们写死的。是需要后端提供的。所以h5支付在唤醒微信支付的时候流程应该是这样的:
(1)请求后端接口获取到一个url，本例中的mwebUrl，
(2）拼接一个带有redirectur的新的地址，本例中的url
(3)重定向到这个地址，页面打开获取code---->请求接口获取appid等参数---->调用微信提供的WeixinJSBridgeReady方法在改方法内通过 WeixinJSBridge.invoke的回调内处理成功或失败的跳转逻辑
let orderCode=db.ls.get("vuex").user.orderCode
let res= await orderApi.wxCreateOrder({...data,tradeType:'MWEB'})
console.log("获取微信支付参数,",res.data.data.mwebUrl)
let mwebUrl=res.data.data.mwebUrl||""
let url=`${mwebUrl}&redirect_url=${encodeURIComponent('http://testaa.bb.net/#/pay?orderCode='+orderCode+'&isWxPayOk=true')}`
window.location.href=url

接下来说一说踩坑

1 微信支付的回调函数
  onBridgeReady(){
            let self=this
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId":self.appId,     //公众号名称，由商户传入     
                    "nonceStr":self.nonceStr, //随机串     
                    "package":self.package,     
                    "paySign":self.paySign,//微信签名 
                    "signType":self.signType,         //微信签名方式：
                    "timeStamp":self.timeStamp,         //时间戳，自1970年以来的秒数     
                },
                function(res){
    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        console.log("支付成功",res)
                        window.location.href=`http://testaa.bb.net/#/pay/#/pay?orderCode=${decodeURIComponent(self.orderCode)}&isWxPayOk=true`
                        // self.$router.push({path:"/pay",query:{orderCode:decodeURIComponent(self.orderCode),isWxPayOk:true}})
                    }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
                        console.log("取消支付")
                        window.location.href=`http://testaa.bb.net/#/pay?orderCode=${decodeURIComponent(self.orderCode)}`
                    }else if(res.err_msg == "get_brand_wcpay_request:fail"){
                        console.log("支付失败")
                        // WeixinJSBridge.call('closeWindow');
                        window.location.href=`http://testaa.bb.net/#/pay?orderCode=cls${decodeURIComponent(self.orderCode)}`
                    }    
｝
对于微信浏览器内打开的网页进行支付，取消支付，支付成功，和支付失败都会有触发，也就是里面的console.log（）
但是对于h5支付而言。也即是除了微信浏览器而言。不管是取消还是成功或是失败。都会都get_brand_wcpay_request:ok"成功的回调。
也正是如此，微信官方希望在取消支付或者支付成功的redirecturl里开发者自己设计一个弹窗，让用户手动点击，而点击的时候走自己后端的接口
从而确定订单是否真实完成。

既然上面提到了获取code需要通过重定向一个页面。然后通过该页面的url截取到code。那容易就想到做一个中间页面，这样在点击支付的时候
跳转到该页面获取到code，但是这也是坑的开始。因为每次在支付成功以后返回都会退回到这个中间页，再返回才能回到之前的支付页面。而正常的交互
显然不是这样的，用户支付成功以后点击退回应该是支付页面才对。而且还有一个问题是因为返回到了中间页，而中间页此时url没有code，（只有正常点击
支付按钮走支付进入到中间页此时中间页的url才会出现code，所以获取不到code。也就意味着请求后端的接口走不通），这时就会出现一旦用户取消获取支付成功
以后返回就会报错appid不存在之类的。
所以能不能不走中间页，直接在点击支付的前一个页面获取到code
所以正确的流程应该是

在进入支付页面的前一个页面进行重定向，在支付页面获取code 

 在这个页面重定向

代码如下：主要要区分下h5浏览器还是微信浏览器

 

在支付页面

1 获取code 

2 通过code请求后端接口获取openid

3用户点击支付 ，先走后端接口，传入openid和其他参数，获取到appid，nonceStr，signType等参数

4 在步骤3的成功回调里拿到appid，nonceStr，signType等参数，触发微信内置的函数唤醒微信支付

5触发步骤4的函数逻辑里将有成功，失败，取消等相应，前端进行相应的逻辑跳转