普通商户（直连）开发jsapi支付时，前端唤起微信收银台，用户支付并确定后页面闪退，退出窗口

最新推荐文章于 2024-10-21 15:30:07 发布

smile_life_

最新推荐文章于 2024-10-21 15:30:07 发布

阅读量817

点赞数

文章标签：前端微信

本文链接：https://blog.csdn.net/smile_life_/article/details/131865549

版权

如果你一直不知道原因，请耐心看完，也许会给你灵感和提示

1、普通商户付款成功的回调关闭界面（也有人说闪退）是因为这段代码WeixinJSBridge.call('closeWindow'); 造成的。而注释掉没有效果是因为手机端的微信缓存了旧代码，导致新的代码并没有运行到。（一个jsapi的支付流程中，会有两个回调，一个是请求微信下单时告诉微信支付成功后回调后台某个接口，另一个回调是html页面WeixinJSBridge.invoke这段js代码的回调。以上我说的回调都是指html页面的js回调）

2、在微信内置浏览器alert 是可以出弹窗的，网上说alert失效也是缓存问题，因为缓存中根本没有alert这段代码。但是WeixinJSBridge.invoke的回调函数这个位置比较特殊，这个位置使用alert效果不好，因为用户输入支付密码后会展示支付成功的页面，这个时候在原来页面已经执行alert，当用户在微信的支付成功页面点击最下方的确定时，回到原来页面就不会看到alert的弹窗了。

3、手机端的微信（苹果的）缓存，要到微信的通用-存储空间去清理相关缓存，直接杀进程，甚至重启手机缓存都是存在的

4、微信的缓存的原理不知道是怎样的，有时候缓存了，有时候又不缓存（我在idea里修改代码按ctrl+f9 重构下，手机微信里重新访问就有新的代码效果了，而有时候怎么重构怎么重启怎么修改更新都不行，这很容易误导人啊）

5、别人说微信开发者工具首页 - 点击打开公众号网页项目，然后在最上面输入url 调试相当于调试微信内置浏览器，不知道是不是这样，有知道的麻烦告知

6、手机想看下调试信息，可以在你想看的页面上加入以下代码，但功能没有谷歌强大

// VConsole will be exported to `window.VConsole` by default.

var vConsole = new window.VConsole();

</script>

7、页面调用微信收银台关键代码

//微信充值
                                var param = {body: '水电控充值-微信', payType:payType ,money: money};
                                $.ajax({
                                    url: "hydropower/recharges",
                                    method: 'post',
                                    dataType: 'json',
                                    data: JSON.stringify(param),
                                    contentType: "application/json",
                                    success: function (res) {
                                        if (res.data != null) {
                                            // 支持回调必要方法start
                                            if (typeof WeixinJSBridge == "undefined") {
                                                if (document.addEventListener) {
                                                    document.addEventListener('WeixinJSBridgeReady', function () { onBridgeReady(res.data); }, false);
                                                } else if (document['attachEvent']) {
                                                    document['attachEvent']('WeixinJSBridgeReady', function () { onBridgeReady(res.data); });
                                                    document['attachEvent']('onWeixinJSBridgeReady', function () { onBridgeReady(res.data); });
                                                }
                                            } else {
                                                onBridgeReady(res.data);
                                            }
                                        }
                                    }
                                })



function onBridgeReady(obj) {
            if (obj.appid == null || obj.appid == '') {
                return;
            }
            var timeStamp = Date.parse(new Date()) / 1000;
            var nonceStr = getRandomString(30);
            var packageId = "prepay_id=" + obj.prepay_id;
            var sign = paysignjs(obj.appid, nonceStr, packageId, timeStamp);
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": obj.appid,     //公众号ID，由商户传入
                    "timeStamp": timeStamp.toString(),         //时间戳，自1970年以来的秒数
                    "nonceStr": nonceStr, //随机串
                    "package": packageId,
                    "signType": "MD5",         //微信签名方式：
                    "paySign": sign //微信签名
                },
                function (res) {
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        //WeixinJSBridge.call('closeWindow');
alert("在微信回调函数这个位置alert没效果的，或者说效果不好，所以测试的时候不要在这里alert，可以用location.href 这些。如果真的要alert，要在服务端后台断点调试，才可能看到这个alert弹窗。至于其他地方，这个alert弹窗还是正常可用的")
                        getRoomData();//这个是回显一些信息到页面上
                    }
                });
        }


function paysignjs(appId, nonceStr, packagePay, timeStamp) {
            //字符串拼接的顺序不要乱，必须按照这个格式
            var string = "appId=" + appId//appId
                + "&nonceStr=" + nonceStr//随机字符串
                + "&package=" + packagePay//预支付ID
                + "&signType=MD5"//签名类型
                + "&timeStamp=" + timeStamp//时间戳
                + "&key=XklIzzMj1vJqOm9LbcO48NWXWyecrJ58";//32位的密钥，商户密钥或者是小程序的密钥(我设置的是一样的，所以不大知道是哪个)
            var miyao = hexMD5(string).toUpperCase();//使用加密
            return miyao;
        };

        /**
         * 随机生成字符串
         * @param len 指定生成字符串长度
         */
        function getRandomString(len) {
            let _charStr = 'abacdefghjklmnopqrstuvwxyzABCDEFGHJKLMNOPQRSTUVWXYZ0123456789',
                min = 0,
                max = _charStr.length - 1,
                _str = '';                    //定义随机字符串 变量
            //判断是否指定长度，否则默认长度为15
            len = len || 15;
            //循环生成字符串
            for (var i = 0, index; i < len; i++) {
                index = (function (randomIndexFunc, i) {
                    return randomIndexFunc(min, max, i, randomIndexFunc);
                })(function (min, max, i, _self) {
                    let indexTemp = Math.floor(Math.random() * (max - min + 1) + min),
                        numStart = _charStr.length - 10;
                    if (i == 0 && indexTemp >= numStart) {
                        indexTemp = _self(min, max, i, _self);
                    }
                    return indexTemp;
                }, i);
                _str += _charStr[index];
            }
            return _str;
        }