微信支付前端流程

其实官网介绍的已经很明确了也有示例代码 但还是想写一下，毕竟琢磨了一天了

首先要保证你的项目外网可以访问到， 我的是vue项目，用nginx做的代理， 这里是不需要jssdk的

onBridgeReady: function () { //支付
const openId = localStorage.getItem(‘openId’)
WeixinJSBridge.invoke(
‘getBrandWCPayRequest’, {
“appId”:“wx5b334b8d334098ed”, //公众号名称，由商户传入
“timeStamp”:“1539685581”, //时间戳，自1970年以来的秒数
“nonceStr”:“2f0ddaaf4fda4958b01bd8667e028455”, //随机串
“package”:“prepay_id=wx16182618444488b89a68da7f3822972560”,
“signType”:“MD5”, //微信签名方式：
“paySign”:“2B091758218B61A642AB2F6A731F6E2D” //微信签名
},
function (res) {
console.log(res)
if (res.err_msg === ‘get_brand_wcpay_request:ok’) {
Toast(‘微信支付成功’)
this.$router.push(’/MineOrder’)
alert(‘支付成功’)
} else if (res.err_msg === ‘get_brand_wcpay_request:cancel’) {
Toast(‘用户取消支付’)

          // window.location.href = 'gift_failview.do?out_trade_no=' + this.orderId
        } else if (res.err_msg === 'get_brand_wcpay_request:fail') {
          Toast('网络异常，请重试')
        }
      }
    )
},
handleClick: function () {
  if (typeof WeixinJSBridge === 'undefined') {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(), false)
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady())
      document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady())
    }
  } else {
    this.onBridgeReady()
  }
}