调用支付宝跟微信支付

//判断是否是微信
isWeChatBrowser() {
    var ua = window.navigator.userAgent.toLowerCase()
    let isUa = ua.match(/MicroMessenger/i) || ''
    if (isUa == 'micromessenger') {
      return true
    } else {
      return false
    }
  }
//判断是否是支付宝
 isAliBrowser() {
    var ua = window.navigator.userAgent.toLowerCase()
    let isUa = ua.match(/AlipayClient/i) || ''
    if (isUa == 'alipayclient') {
    
      return true
    } else {
      return false
    }
  }
}

在vue中使用

 export default {
        data() {
            return {
                   isWeChat : false, // 控制默认的微信客户端
                    isAli : false, // 控制默认的支付宝客户端
              }
        }，
        created () {
              //判断是在支付宝或者微信页面
              this.isWeChat = isWeChatBrowser() ? true : false；
              this.isAli = isAliBrowser() ? true : false;
              //如果是微信扫码
              //先扫码获得二维码得到的ID 传给后台 后台会返回一个新的ID
               if(this.isWeChat){
                      //获得URL中带的支付需要的id跟回调回来的code
                      let Id = this.route.query.is;
                      let code = this.route.query.code；
                      //获得当前的URL的链接
                      const local = window.location.href
                      //打开微信支付界面
                  //先判断是否有这个ID 如果没有就去接口获得
             if (code == null || code == '') {
                    window.location.href =
                    'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
                    appID +
                    '&redirect_uri=' +
                    local +
                    '&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
                }else{
                    this.findOrder(Id,1003)
                }，
              //支付宝跟微信差不多就是回调链接不一样
            if(this.isAli) {
                  let Id = this.route.query.is;
                 let code = this.route.query.code；
                const local = window.location.href
                if (this.code == null || this.code == '') {
                    window.location.href = `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?                    
                      app_id=${2018122462693604}&scope=auth_base&redirect_uri=${local}`
                }else{
                    this.findOrder(Id,1004)
                }
            }
        }，   
    methods ：{
           findOrder(RegId,payTypeId) {
                根据后端的结婚获得所需要的信息。然后传递给  支付的方法中
            }；
              //微信
            wechatPay(Content) {
                let self = this
                WeixinJSBridge.invoke('getBrandWCPayRequest', JSON.parse(Content), function(res) {
                    if (res.err_msg == 'get_brand_wcpay_request:ok') {//成功之后返回的链接
                         window.location.href = `${你当前的URL}/erp/paymentFaiure.html`
                    }
                    if (res.err_msg == 'get_brand_wcpay_request:fail'){/成功之后返回的链接
                         window.location.href = `${你当前的URL}/erp/paymentFaiure.html`
                        }
                    })
                
            },
                // 支付宝   
            aliPay(Content) {
                let self = this
                let odernum = JSON.parse(Content)
                this.ready(
                 AlipayJSBridge.call(
                     'tradePay',{'tradeNO':odernum.tradeNo},
                      function(result) {
                          if('9000' == result.resultCode ){/成功之后返回的链接
                              window.location.href = `${你当前的URL}/erp/paymentsuccess.html`
                           }else  if('4000' == result.resultCode ){/成功之后返回的链接
                               window.location.href = `${你当前的URL}/erp/paymentFaiure.html`
                          }
                       }
                   )
                )
            },
      }
   
  }

微信成功之后没有返回到固定的URL 这个还在研究中。请大神指教
可能做的还不是很完善。可以去官方文档继续专研
https://pay.weixin.qq.com/wiki/doc/apiv3/apis/chapter3_1_1.shtml 微信支付文档
https://opendocs.alipay.com/fw/api/105942 支付宝支付文档