前端 js 微信 支付二维码

这里使用了 js 以及一个网上的工具包，巨j2简单的生成了微信的支付二维码

下载微信二维码包

点击下载感谢所有菜鸟

生成微信二维码

<div id="qrcode"></div>
<script type="text/javascript">
	var qrcode = new QRCode(document.getElementById("qrcode")); // 获取将要呈现二维码的容器
	$.ajax({
		...
		success: function(data) {
			if (data&& data.data=== 200) {
            	qrcode.makeCode(data.data.code_url); // 这里调用工具里的 `makeCode` 方法，传入我们在后端那里获取到的weixin支付二维码地址，然后。。。
            	// 然后二维码就生成了。。。。。。。
        	}
		}
		...
	})
</script>

事后：安抚一下后端(听一下客户完事儿后，有没有给他付钱)

我们这里还需要监听一下用户的支付状态 （使用定时器）

wxTimer = setInterval(() => {
	$.ajax({
		url: baseUrl + "/api/queryPayStatus", // 支付状态接口 ： 找后端要
		data: { outTradeNo: out_trade_no },
		success: function (status) {
		// 这个请求只会在用户支付完成的时候返回一大串数据，如果用户没有支付，这个请求会一直等待服务器的响应，超时的话会，请求就会失败（还是没有返回数据）
			if (status && status.status === 200) {
				if (wxTimer) { // 支付成功！钱收到了！就不用在监听了
		            clearInterval(wxTimer);
		            wxTimer = null;
		        }
			}
		}
	})
}, 1000);

重点：总结

• 两个使用到的重要方法
  var qrcode = new QRCode(document.getElementById("qrcode")); // 获取将要呈现二维码的容器
qrcode.makeCode(data.data.code_url); // 这里调用工具里的makeCode方法，传入我们在后端那里获取到的weixin支付二维码地址
  这样就可以在页面生成我们需要的支付二维码了
  

• 监听一下用户的支付状态
  这样我们前端的支付二维码就生成了，完事儿。

附上菜鸟手册

菜鸟手册 QRCode.js 使用说明