微信支付（关于h5支付与JSAPI支付）

微信支付（关于h5支付与JSAPI支付）

需求：如果在微信自带浏览器可直接调用支付(JSAPI支付)，如果是在非微信浏览器(qq浏览器，safari…)拉取微信客户端再支付。

设置order.vue页面：

goToPay() { // 点击确认付款
    let { tradeno,amount } = this.$route.query;
    if(this.$utils.isWeixin()) { // 如果是微信自带浏览器中，获取openid，由后端重定向到/person/wallet/pay页面
        let url = encodeURIComponent(`${window.location.origin}/wxopenid/?tradeno=${tradeno}&amount=${amount}`)
        this.$http.post(this.$api.APPID03).then((res) => { // 从后端获取appid
            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${res}&redirect_uri=${
            url
        }&response_type=code&scope=snsapi_base&state=123#wechat_redirect`;
        });
    } else { // 再浏览器中自我跳转
        this.$router.push({
            path: '/person/wallet/pay',
            query: {
                tradeno,
                amount
            }
        })
    }
},

pay.vue:

<template> 
    <div class="pay">
        <div class="item-wrap">
            <img src="@/assets/image/wxpay.png" alt="" />
            <div>微信支付: ￥ {{ $route.query.amount }}元</div>
            <div>收保费</div>
        </div>
        <div class="item-btn">
            <van-button
                color="#ff721f"
                v-if="isWeixin"
                type="primary"
                @click="goToPay"
                >确认支付</van-button
            >
            <van-button color="#ff721f" v-else type="primary" @click="goToPage"
                >确认支付</van-button
            >
        </div>
    </div>
</template>

如果是外部浏览器，后端通过调取H5下单的接口，，会生成h5_url,，在h5直接window.location.href,意思就是下面的在非微信浏览器中点击确认支付调用goToPage方法

mounted() {
    this.initData();
},
async initData() {
    let { amount, tradeno, openid } = this.$route.query;
    this.amount = amount;
    let obj = {
        tradeno,
        paytype: this.isWeixin ? 1 : 0,
    };
    if (openid) {
        obj.openid = openid;
    }
    let res = await this.$http.post(this.$api.WXPAYPARAM, obj);
    this.url = res.url;
    this.timestamp = res.timeStamp || res.timestamp;
    this.nonceStr = res.nonceStr;
    this.package1 = res.package;
    this.signType = res.signType;
    this.paySign = res.paySign;
    this.appId = res.appId;
},
goToPage() {
    window.location.href = this.url;
},

微信浏览器中支付，使用JSAPI 支付：

goToPay() { // 点击确认支付调用goToPay
    this.bridgePay();
},
 bridgePay() {
     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();
     }
 },
     onBridgeReady() {
         let { timestamp, nonceStr, package1, signType, paySign, appId, notifyurl } =
             this;
         WeixinJSBridge.invoke(
             "getBrandWCPayRequest",
             {
                 appId: appId, //公众号ID，由商户传入
                 timeStamp: timestamp, //时间戳，自1970年以来的秒数
                 nonceStr, //随机串
                 package: package1,
                 signType, //微信签名方式：
                 paySign, //微信签名
             },
             function (res) {
                 if (res.err_msg == "get_brand_wcpay_request:ok") {
                     // 使用以上方式判断前端返回,微信团队郑重提示：
                     //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                 }
             }
         );
     }, 

通过上面的简单介绍，画个简单的图

贴上pay.vue完整代码

<template>
    <div class="pay">
        <div class="item-wrap">
            <img src="@/assets/image/wxpay.png" alt="" />
            <div>微信支付: ￥ {{ $route.query.amount }}元</div>
            <div>收保费</div>
        </div>
        <div class="item-btn">
            <van-button
                color="#ff721f"
                v-if="isWeixin"
                type="primary"
                @click="goToPay"
                >确认支付</van-button
            >
            <van-button color="#ff721f" v-else type="primary" @click="goToPage"
                >确认支付</van-button
            >
        </div>
    </div>
</template>

<script>
import wx from "weixin-js-sdk";
import { Dialog } from "vant";
export default {
    data() {
        return {
            timestamp: "",
            nonceStr: "",
            package1: "",
            signType: "",
            paySign: "",
            appId: "",
            amount: "",
            orderid: "",
            pcode: "",
            username: "",
            deeplink: "",
            isWeixin: false,
            notifyurl: "", // 支付成功跳转
        };
    },
    mounted() {
        if (this.$utils.isWeixin()) {
            this.isWeixin = true;
        } else {
            this.isWeixin = false;
        }
        this.$nextTick(() => {
            this.initData();
        });
    },
    methods: {
        async initData() {
            let { amount, tradeno, openid } = this.$route.query;
            this.amount = amount;
            let obj = {
                tradeno,
                paytype: this.isWeixin ? 1 : 0,
            };
            if (openid) {
                obj.openid = openid;
            }
            let res = await this.$http.post(this.$api.WXPAYPARAM, obj);
            this.url = res.url;
            this.timestamp = res.timeStamp || res.timestamp;
            this.nonceStr = res.nonceStr;
            this.package1 = res.package;
            this.signType = res.signType;
            this.paySign = res.paySign;
            this.appId = res.appId;
            this.notifyurl = notifyurl;
        },
        goToPay() {
            this.bridgePay();
        },
        goToPage() {
            window.location.href = this.url;
        },
        bridgePay() {
            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();
            }
        },
        onBridgeReady() {
            let { timestamp, nonceStr, package1, signType, paySign, appId, notifyurl } =
                this;
            WeixinJSBridge.invoke(
                "getBrandWCPayRequest",
                {
                    appId: appId, //公众号ID，由商户传入
                    timeStamp: timestamp, //时间戳，自1970年以来的秒数
                    nonceStr, //随机串
                    package: package1,
                    signType, //微信签名方式：
                    paySign, //微信签名
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                    }
                }
            );
        },
    },
};
</script>

<style lang="scss" scoped>
.pay {
    padding-top: 200px;
    .item-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        & div {
            margin-top: 20px;
            font-size: 28px;
        }
    }
    .item-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 120px;
    }
}