一、微信浏览器支付

1、 获取code换取openId

ps:code和openId主要是用来传给后台，获取微信支付所需配置的参数的

//登录成功后获取code
let url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base#wechat_redirect`;
window.location.href = url;
//在路由的beforeEach里面保存opendid
let code = to.query.code
let openId = getStore('openId')
if (code && !openId) {
    let openIdRes = await getOpenId({ code });
    // console.log("openIdRes", openIdRes);
    if (openIdRes.errors) {
        return;
    }
    setStore("openId", openIdRes.data.openid);
}

2、获取微信配置的参数，调起微信支付

 let params = this.getParamsPay(orderInfo);
            params.openid = getStore("openId");
            let payRes = await goPay(params);//后台的接口
            this.btnLoading = false;
            if (payRes.errors) {
                this.$toast("获取微信支付参数失败");
                return;
            }
            let config = payRes.data || {};
            const onBridgeReady = () => {
                WeixinJSBridge.invoke(
                    "getBrandWCPayRequest", {
                        appId: config.appId, //公众号ID，由商户传入
                        timeStamp: config.timeStamp, //时间戳，自1970年以来的秒数
                        nonceStr: config.nonceStr, //随机串
                        package: config.package,
                        signType: config.signType, //微信签名方式：
                        paySign: config.paySign, //微信签名
                    },
                    (res) => {
                        console.log("payrespayres", res);
                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                            this.$router.push({
                                path: returnUrl ? '/' + returnUrl : "/pay_success",
                                query: { orderId: orderInfo.id },
                            });
                        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                            this.$toast("取消支付");
                        } else {
                            this.$toast("支付失败");
                        }
                    }
                );
            };
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener(
                        "WeixinJSBridgeReady",
                        onBridgeReady,
                        false
                    );
                } else if (document.attachEvent) {
                    document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
                    document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
                }
            } else {
                onBridgeReady();
            }

二、普通浏览器支付

通过后台接口获取跳转地址直接跳转

三、pc支付

通过后台接口获取二维码地址，展示在页面上，让用户直接手机扫码支付