注意!!!由于近期在做博文搬迁,说明一下本文在其他公共博文平台的初次发布时间为:2021年10月21日

使用场景

  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~ 😃
转发请注明参考文章地址,非常感谢!!!

Q.E.D.


Hi!欢迎访问 fx67ll.com 的个人博客站点!Code is my life ~