关于javascript:微信支付前端开发指南

应用场景

1. 微信公众号内嵌 H5 网页调用微信领取
2. 在微信浏览器中的网页唤起微信领取界面

详情能够查阅微信领取官网文档 链接地址

性能思路

1. 后盾整合微信官网的相干下单接口，编写预下单接口提供前台调用，并返回订单相干参数
2. 前台依照下方示例代码，传递相干订单参数后唤起微信领取界面
3. 后盾整合微信官网订单状态查问接口，编写订单状态查问接口提供前台调用，并返回订单领取状态
4. 用户领取完后，通过微信返回的参数以及步骤 3 的订单状态接口来判断订单是否领取胜利，实现后续业务逻辑操作

前端代码

1. 设置判断是否能够调用微信领取的变量

let can_pay;

2. 判断 WeixinJSBridge 对象是否存在以后浏览器中，该对象只在微信浏览器中无效，并在回调函数中通过设置判断变量来确认微信领取可用，调用微信相干 API

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();
}

onBridgeReady() {
    can_pay = true;
    WeixinJSBridge.call('hideOptionMenu'); // 微信 API，用于暗藏右上角按钮，与之对应的是显示右上角按钮（showOptionMenu），还有显示暗藏底部导航栏的 API（showToolbar/hideToolbar）}

3. 如果判断变量为真则开始通过对象唤起领取界面，并在回调函数中实现其余业务逻辑操作，留神查看正文内容不要间接复制全副代码不做批改

if (can_pay) {
    WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
            // res.data 对象为后盾返回参数对象
            appId: res.data.appId, // 公众号 id，为以后服务商号绑定的 appid
            timeStamp: res.data.timeStamp, // 工夫戳，自 1970 年以来的秒数
            nonceStr: res.data.nonceStr, // 随机字符串，不长于 32 位
            package: res.data.payInfo, // 订单详情扩大字符串，对立下单接口返回的 prepay_id 参数值
            signType: res.data.signType, // 签名形式，默认为 MD5，反对 HMAC-SHA256 和 MD5
            paySign: res.data.sign // 签名
        },
        // 微信领取官网接口的返回函数
        function(res) {if (res.err_msg === 'get_brand_wcpay_request:ok') {console.log('这里调用后盾的订单状态查问函数，如果后盾查问胜利则微信领取胜利，反之失败')
            } else {console.log('领取异样')
            }
        }
    );
}

我是 fx67ll.com，如果您发现本文有什么谬误，欢送在评论区探讨斧正，感谢您的浏览！
如果您喜爱这篇文章，欢送拜访我的 本文 github 仓库地址，为我点一颗 Star，Thanks~ :)
转发请注明参考文章地址，非常感谢！！！