vue实现H5支付（微信，支付宝）

1.判断浏览器是微信还是支付宝或其他浏览器
2.微信浏览器调用微信支付的方法（调用后台接口创建订单，需要微信用户唯一标识openid；接口返回微信支付所需的支付参数）
3.支付宝浏览器支付方法

//支付
payBtn() {
    var ua = navigator.userAgent.toLowerCase();
    var isWeixin = ua.indexOf('micromessenger') != -1;
    var isAlipay = ua.indexOf('alipayclient')  != -1;
    if (isWeixin) { //判断当前环境是否是微信浏览器
        //是微信浏览器   调用公众号支付 
        let data = {
            其他参数与后台协商
            openid: 唯一标识,
        }
        createOrder(data).then((res) => {
            if (res.status == 200) {
                // console.log(res.data) 接口返回微信所需支付参数
                let data = {}
                if(res.message == "您还有待支付的订单"){
                    data = res.data.pay_info;
                }else{
                    data = res.data;
                }
                this.wxpayOrder(data);
            } else {
                Toast.fail(res.message);
            }
        }).catch((res) => {
            Toast.fail("请稍后重试");
        });
    } else if(isAlipay){
        // 其他浏览器  ，直接调用支付接口
        this.alipay()
        // Toast.fail("支付宝");
    }else {
        Toast.fail("请使用微信或支付宝浏览器");
    }

},
// 支付宝支付  请求接口，返回支付宝支付链接，跳转
alipay(){
    let data = {
        与后台约定支付参数
    }
    createOrder(data).then((res) => {
        if (res.status == 200) {
            var url = res.data.qrcode_url;
            window.location.href = url;
        } else {
            Toast.fail(res.message);
        }
    }).catch((res) => {
        Toast.fail("请稍后重试");
    });
},

// 微信支付
wxpayOrder(data) {
    console.log(111)
    let payParam = {
        appId: data.appId,
        nonceStr: data.nonceStr,
        package: data.package,
        timeStamp: data.timeStamp,
        signType: data.paySign,
        paySign: data.paySign,
    }
    if (typeof WeixinJSBridge === 'undefined') {
        if (document.addEventListener) {
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(payParam), false)
        } else if (document.attachEvent) {
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(payParam))
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(payParam))
        }
    } else {
        this.onBridgeReady(payParam)
    }
},
onBridgeReady(e) {
    let that = this
    console.log(e)
    let etr = {
        'appId': e.appId, // 公众号名称，由商户传入
        'timeStamp': e.timeStamp, // 时间戳，自1970年以来的秒数
        'nonceStr': e.nonceStr, // 随机串
        'package': e.package,
        'signType': e.paySign, // 微信签名方式：
        'paySign': e.paySign // 微信签名
    }
    WeixinJSBridge.invoke( //这个对象只有微信浏览器支持
        'getBrandWCPayRequest', etr,
        function(res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
                Toast('支付成功')
                setTimeout(function() {  //支付成功后的展示页面
                    that.$router.push({
                        path: "/homeIndex",
                    });
                }, 1500)
            } else {
                Toast('支付失败：' + res.err_msg)
            }
        })
},