微信支付（微信浏览器内），微信h5支付（微信外部浏览器），支付宝支付

支付环境判断

export function versions() {
  const u = navigator.userAgent
  // let app = navigator.appVersion
  return {
    iphonex: /iphone/gi.test(u) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812,
    isIPhoneXSMax: /iphone/gi.test(u) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 414 && window.screen.height === 896,
    isIPhoneXR: /iphone/gi.test(u) && window.devicePixelRatio && window.devicePixelRatio === 2 && window.screen.width === 414 && window.screen.height === 896,
    trident: u.indexOf('Trident') > -1, // IE内核
    presto: u.indexOf('Presto') > -1, // opera内核
    webKit: u.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') === -1, // 火狐内核
    mobile: !!u.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
    iPhone: u.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
    iPad: u.indexOf('iPad') > -1, // 是否iPad
    webApp: u.indexOf('Safari') === -1, // 是否web应该程序，没有头部与底部
    weixin: u.indexOf('MicroMessenger') > -1, // 是否微信 （2015-01-22新增）
    qq: u.match(/\sQQ/i) === ' qq', // 是否QQ
    chrome: u.indexOf('Chrome') > -1, // 是否Chrome
    safari: /Safari/.test(u) && !/Chrome/.test(u), // 是否Safari
    alipay: /AlipayClient/.test(u)
  }
}

页面中点击支付(data为需要给后端传递的数据)

   async handlePay(data) {
      const isWeiXin = versions()//判断当前支付环境
      if (!isWeiXin.mobile) {
        this.$toast.fail('抱歉，请用使用手机支付')
        return false
      }
      if (!data.studentId) {
        this.$toast.fail('请选择学生信息')
        return false
      }
      if (!data.takeDeliveryId) {
        this.$toast.fail('请选择收货地址')
        return false
      }
      this.btnLoading = true
      if (data.type === 'ALIPAY') {
        // 支付宝支付
        this.alipayPay(data)
      } else {
        if (isWeiXin.weixin) {
          // 微信浏览器支付 需要使用code获取openId
          this.wechatPay(data)
        } else {
          // h5支付
          this.wechatPayH5(data)
        }
      }
    },

微信内部支付

async wechatPay(data) {
      const response = await handlePayApi(data)
      this.btnLoading = false
      // const that = this
      if (response.code == 0) {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: '**************', // 公众号名称，由商户传入
            timeStamp: response.response.timeStamp, // 时间戳，自1970年以来的秒数
            nonceStr: response.response.nonceStr, // 随机串
            package: response.response.package,
            signType: response.response.signType, // 微信签名方式：
            paySign: response.response.paySign // 微信签名
          },
          function(res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              Toast('支付成功！')
              setTimeout(() => {
                location.href = `结果页面地址/${response.response.id}`
              }, 800)
              // that.$router.push(`/paySucceed/${this.address.id}`)
            } // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
            if (res.err_msg == 'get_brand_wcpay_request:cancel') {
              Toast('你已经取消支付了！')
              setTimeout(() => {//在页面里面再选择跳转
                location.href = `结果页面地址/${response.response.id}`
              }, 800)
            }
            if (res.err_msg == 'get_brand_wcpay_request:fail') {
              Toast('支付失败了！')
            }
          }
        )
      }
    },

微信h5支付（微信外部浏览器）

// h5支付
    async wechatPayH5(data) {
      const res = await handlePayApi(data)
      this.btnLoading = false
      if (res.code == 0) {
        window.location.href = res.response.h5_url
      }
    },

支付宝支付

// 支付宝支付
    async alipayPay(data) {
      const res = await handlePayApi(data)
      this.btnLoading = false
      if (res.code == 0) {
        const div = document.createElement('div')
        /* 此处form就是后台返回接收到的数据 */
        div.innerHTML = res.response.html
        document.body.appendChild(div)
        document.forms[0].submit()
      }
    }