微信支付

最新推荐文章于 2024-10-16 10:11:51 发布

weixin_48597380

最新推荐文章于 2024-10-16 10:11:51 发布

阅读量123

点赞数

分类专栏：微信支付文章标签：小程序 openid

本文链接：https://blog.csdn.net/weixin_48597380/article/details/115657777

版权

微信支付专栏收录该内容

2 篇文章 0 订阅

订阅专栏

微信支付

在微信公众凭条绑定js安全接口域名（线上域名外网可以访问到的，只有此公众号的管理员才可以添加）
在此域名下上传微信凭证一个txt文件（绑定时会有提示）微信支付平台绑定接口域名
引入js文件 https://res.wx.qq.com/open/js/jweixin-1.6.0.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--H5页面窗口自动调整到设备宽度，并禁止用户缩放页面-->
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <!--忽略将页面中的数字识别为电话号码-->
    <meta name="format-detection" content="telephone=no" />
    <!--忽略Android平台中对邮箱地址的识别-->
    <meta name="format-detection" content="email=no" />
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
</head>

<body>
    <div class="index" id="index">
        <button @click="toPay">缴纳</button>
    </div>
    <script>
        new Vue({
            el: "#index",
            data: function data() {
                return {

                }
            },
            methods: {
                //确认支付 调起微信
                toPay: function () {
                    var that = this
                    var lay = layer.open({
                        type: 2,
                        shadeClose: false,
                        content: '调起支付中...',
                    });
                    utils.req({
                        url: api.order.payMoney,
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify({
                            orderNumber: that.content.orderNumber,
                            payChannelId: "WX_JSAPI", //支付渠道  WX_NATIVE= 微信扫码，WX_JSAPI = 微信小程序
                            payDevice: 'h5' // 设备 (h5 ,pc)  
                        }),
                    }).then(function (res) {
                        if (typeof WeixinJSBridge == "undefined") {
                            if (document.addEventListener) {
                                document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady(res.data), false);
                            } else if (document.attachEvent) {
                                document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady(res.data));
                                document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady(res.data));
                            }
                        } else {
                            layer.close(lay);
                            that.onBridgeReady(res.data);
                        }
                    }).catch(function (err) {
                        layer.close(lay)
                    });
                },
                // 参数 data 为服务端返回json
                onBridgeReady(data) {
                    var that = this;
                    WeixinJSBridge.invoke(
                        'getBrandWCPayRequest', {
                        appId: data.payParams.appId, // 公众号id     
                        timeStamp: data.payParams.timeStamp, // 时间戳     
                        nonceStr: data.payParams.nonceStr, // 随机串     
                        package: data.payParams.package, // 订单详情扩展字符串
                        signType: data.payParams.signType, // 微信签名方式    
                        paySign: data.payParams.paySign // 微信签名 
                    },
                        function (res) {
                            if (res.err_msg == "get_brand_wcpay_request:ok") {
                                setInterval(() => {
                                    utils.req({
                                        url: api.order.ordernumber + that.content.orderNumber,
                                        type: "GET",
                                        contentType: "application/json",
                                    }).then(function (res) {
                                        if (res.state) {
                                            //支付成功
                                        }
                                    }).catch(function (err) {
                                        console.log(err);
                                    });
                                }, 1500);
                                // res.err_msg将在用户支付成功后返回ok，这时调取你本身服务端业务查询，若已支付成功，则跳转成功页面，展示给用户。
                            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                layer.open({
                                    content: "取消支付",
                                    skin: 'msg',
                                    time: 3
                                });
                            } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                                layer.open({
                                    content: "支付失败",
                                    skin: 'msg',
                                    time: 3
                                });
                            }
                        });
                },
                //获取微信code
                getCode() {
                    // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
                    let code = this.getUrlParam('code')
                    if (code == null || code === '') {
                        // scope=snsapi_base 静默授权（不弹出授权页面，直接跳转，只能获取用户openid）
                        // scope=snsapi_userinfo 非静默授权 （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）
                        var redirectUri = "http://zhdj.dosion.cc/duespay.html";
                        document.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx810b9554371db32e&redirect_uri=http://zhdj.dosion.cc/duespay.html&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect"
                    } else {
                        this.getOpenid(code) //把code传给后台获取用户信息
                    }
                },
                //获取openid
                getOpenid: function (code) {
                    var that = this;
                    utils.req({
                        url: api.getopenid,
                        type: "GET",
                        contentType: 'application/json',
                        data: {
                            userId: that.userId,
                            code: code,
                        },
                    }).then(function (res) {
                        if (res.errMsg == "request:ok" && res.statusCode == 200) {
                            // that.sessionKey = res.data.data.sessionKey;
                        }
                    }).catch((err) => {
                        console.log("err2", err);
                    });
                },
            },
            mounted: function () {
                var that = this;
                that.getCode();
            }
        });
    </script>
</body>

</html>