微信支付前端开发指南微信支付前端开发指南

使用场景

微信公众号内嵌H5网页调用微信支付
在微信浏览器中的网页唤起微信支付界面

详情可以查阅微信支付官方文档链接地址功能思路

后台整合微信官方的相关下单接口，编写预下单接口提供前台调用，并返回订单相关参数
前台按照下方示例代码，传递相关订单参数后唤起微信支付界面
后台整合微信官方订单状态查询接口，编写订单状态查询接口提供前台调用，并返回订单支付状态
用户支付完后，通过微信返回的参数以及步骤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~ :)
转发请注明参考文章地址，非常感谢！！！