应用场景

  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~ :)
转发请注明参考文章地址，非常感谢！！！