vue h5项目 接支付方式 微信支付还有支付宝支付

首先判断，是在微信中打开还是非微信打开，非微信打开，创建订单式，判断选择支付宝支付，还是微信支付

支付宝支付：请求后端给的api，传入订单号，或者你们自定义的参数，然后请求成功后返回的地址是后端直接配置的，支付成功后跳转相应的界面，
注意：判断有无支付宝app，是支付宝自己的界面

测试地址 ：https://wxh5.hyxhbao.com/home

  //支付宝app支付
              this.$api.order
                .payWithAlipayH5({ order_number: res.order_number })
                .then((res) => {
                  window.location.href = res.pay_url;
                  console.log(res.pay_url, "支付宝app支付");
                })

图一

tu’s
图三

微信支付：
接入微信支付首先要接入微信api

    /**
         * 调起微信加入
         * @param {Object} order_number 订单号
         * @param {function} cb 成功回调
         * @param {function} errCb 失败回调
         */
        getWxApi(order_number) {
            let _this = this
            return new Promise((resolve,reject) => {
                this.getWxType(["chooseWXPay"]).then(_ => {
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                    // console.log('3、开始获取加入', order_number)
                    // 3、获取微信加入前需要的数据
                    _this.$api.purchase.payWithWxpayMini({
                        order_number: order_number
                    }).then(res => {
                        if (!res || !res.package) {
                            reject({title:'3、payWithWxpayMini接口没有返回数据',err:res})
                            return
                        }
                        // 4、调用微信加入
                        wx.chooseWXPay({
                            timestamp: res.timestamp, // 加入签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的加入后台生成签名使用的timeStamp字段名需大写其中的S字符
                            nonceStr: res.nonce_str, // 加入签名随机串，不长于 32 位
                            package: res.package, // 统一加入接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                            signType: "MD5", // 签名方式，默认为'SHA1'，使用新版加入需传入'MD5'
                            paySign: res.sign, // 加入签名
                            success: function (res) {
                                // console.log('4、加入成功')
                                resolve(res)
                            },
                            fail: function(err) {
                                // console.log('4、加入失败')
                                reject(err)
                            },
                            cancel: function (err) {
                                // console.log('4、加入失败,用户取消')
                                reject({err: '用户取消支付'})
                            },
                        })
                    }).catch(err => {
                        reject(err)
                    })
                }).catch(err => reject(err))
            })
        },

微信支付调取后台接口

        // 微信公众号支付
              this.$api.order
                .payWithWxpayH5({ order_number: res.order_number })
                .then((res) => {
                  window.location.href = res.pay_url;
                  this.isdialog = true;
                  console.log(
                    window.location.href,
                    res.pay_url,
                    "微信公众号支付"
                  );
                })
                .catch((err) => {
                  this.$Toast(err.msg);
                  this.isdialog = true;
                });

微信支付界面：

<template>
    <div>
    </div>
</template>

<script>
import wxType from "@/mixin/wxType.mixin";
export default {
    name: 'wxPay',
    mixins: [wxType],
    data() {
        return {
        }
    },
    mounted() {
        let order_number = this.$route.query.order_number
        let toUrl = this.$route.query.toUrl
        console.log('这是要跳转的地方：', toUrl)
        this.getWxApi(order_number).then(res => {
            this.$Toast({
                message: '加入成功',
                duration: 2000,
            });
            this.$router.replace({
              name: "Success",
              query: {
                order_number: order_number
              }
            });
            // if (this.$route.query.toUrl) {
            //     this.$router.replace({
            //         name: toUrl
            //     })
            // } else {
            //     this.$router.go(-1)
            // }
        }).catch(err => {
            console.log('err',err)
            try {
                let e = ''
                if (err.err.errMsg) e = err.err.errMsg
                else if (err.err) e = err.err
                else if (err.msg) e = err.msg
            this.$Toast({
                message: '加入失败，' + e,
                duration: 2000,
            });
            } catch (error) {}
            this.$router.replace({
                name: "Orders",
                query: {
                    order_number: order_number
                }
            });
            // if (this.$route.query.toUrl) {
            //     this.$router.replace({
            //         name: toUrl,
            //         query: {
            //             order_number: order_number
            //         }
            //     })
            // } else {
            //     this.$router.go(-1)
            // }
        })
    }
}
</script>

选择微信支付，将唤起微信支付，然后在微信界面点击返回，微信自己则会判断是否放弃付款，因为微信没有字符没有自己的回调函数可实时返给前端，则需要自己写个弹窗由用户选择是否完成支付

![在这里插入图片描述](https://img-blog.csdnimg.cn/20201216113017907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjcxOTk2,size_16,color_FFFFFF,t_70


支付成功界面也可自定义