微信h5支付

微信h5支付
vue项目、微信h5浏览器环境
参考文档
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842
微信网页开发->微信网页授权->第一步：用户同意授权，获取code

https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6
微信内h5调起支付

原理:
前端: 微信浏览器内的h5通过微信api获取code，
后台: 后台通过code及前端用户选择的商品信息获取openid和支付信息
前端: 通过后台返回的支付信息调起微信支付

1.获取code
getCode:function(){

  let postData = this.$qs.stringify({
    appid:'', //公众号的appId
    redirect_uri: window.location.origin + '/myproject/payWx?' + this.$qs.stringify(this.$route.query), 
                //重定向页面，我的页面就是/myproject/payWx，也就是重定向会自己，把自己的参数一并传回
    response_type:'code', 
    scope:'snsapi_base', 
    state:101//随便写一个表明不同的状态，因为要区分重定向回来当前页面
  })

  postData += '#wechat_redirect'

  var url = 'https://open.weixin.qq.com/connect/oauth2/authorize'

  window.location.href = url+'?'+postData

}, 

redirect_uri就是跳转到微信链接后，微信执行完毕，需要跳转的页面，这里我写的是自己的页面
把当前的参数一并传给微信，微信会把参数再次传回来，并且带上code和state两个参数。当前页面就可以通过code和state参数判断当前是第一次进来，还是被微信重定向回来

注意微信的重定向链接中不能带#，因为#后面的参数微信不会解析，如果又加密信息，一定要注意空格，空格在url传输的过程中可能会变成+, 自己的数据可以自己控制，加密解密aes base64过程可能产生的空格要自己处理

2.通过code换取支付信息和openid，
后台实现，通过code换取支付信息，并把openid注入到cookie
参考文档
https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=11_1
SDK与DEMO下载

3.调起微信支付
在获取后台数据成功后，前端继续调用支付
gotoWxPay:function(){
  //WeixinJSBridge是微信浏览器的内置对象，android手机中可能没有初始化好，要执行如下步骤（微信的例子）
  if ('undefined' == typeof WeixinJSBridge) {
    if( document.addEventListener ){
      document.addEventListener('WeixinJSBridgeReady', this.callWxPay, false);
    }else if (document.attachEvent){
      document.attachEvent('WeixinJSBridgeReady', this.callWxPay);
      document.attachEvent('onWeixinJSBridgeReady', this.callWxPay);
    }
  }else{
      this.callWxPay();
  }
}, 
//真正的支付
callWxPay:function(){

  //第二步中获取到支付信息，便把信息赋值给payData
  var data = this.payData

  if (typeof WeixinJSBridge == 'undefined') {
    console.log('WeixinJSBridge undefined');
    return
  }else{
    console.log('WeixinJSBridge prepared')
  }

  WeixinJSBridge.invoke('getBrandWCPayRequest', {
    "appId":data.appId, 
    "timeStamp":data.timeStamp, 
    "nonceStr":data.nonceStr, 
    "package":data.package,
    "signType":"MD5", 
    "paySign":data.paySign
  },
  (res)=>{

    if(res.err_msg == "get_brand_wcpay_request:ok"){
      this.$router.replace('/paySuccess')
    }else if(res.err_msg == "get_brand_wcpay_request:cancel"){
      this.payCancel()
    }else{
      this.payFailed()
    }
  })

}, 
//自己定义支付失败，支付取消的处理函数

 

微信h5支付可以省去一步
前端获取code的时候的redire_uri可以设置为后台接口，后台接口可以从参数中获取code和其他传入的参数，然后通过code获取openid，通过参数获取支付信息，然后调用输出支付页面，浏览器会跳转到支付页面，支付页面只需要调起微信支付即可，前端省去了获取支付信息的步骤，只需要获取code，然后调起支付即可

 

微信企业付款详见:

https://pay.weixin.qq.com/wiki/doc/api/tools/mch_pay.php?chapter=14_2