近期，业务需求对接了微信支付，做个总结。web网页想要拉起微信支付，有两种方法： H5下单支付 , JSAPI支付 。首先纯前端做不了微信支付，必须配合后端才能通过微信的下单请求。接下来说说这两种方法的区别。
H5微信下单支付
这种支付方式是用户在浏览器端打开网页，通过下单等操作，与后端交互，后端向微信端下单获取到 支付链接地址 。然后返回给前端，前端通过打开这个链接地址跳转到微信APP，进行支付后返回到浏览器端。
-
下单流程图（来自微信官方）
- 电脑端做扫码支付
由于，前端下单后，后端获取到微信的支付链接地址。发送给前端，前端可以通过qrcode第三方库来转换成二维码在前端显示。这里以vue2.x版本项目为例。
- 安装依赖
# 以你的项目文件夹 打开 cmd 命令
npm i qrcode -D #安装依赖
- 使用
<template>
<div class="qrcode">
<img :src="payImg" alt="支付二维码" />
</div>
</template>
<script>
import QRCode from "qrcode";
export default {
data(){
return {
payImg: null,
}
},
methods:{
getUrlSrc(words) {
return new Promise((res, rej) => {
var QRCodeOpts = {
errorCorrectionLevel: "H",
type: "image/jpeg",
quality: 0.8,
width: 400,
margin: 1,
};
QRCode.toDataURL(words, QRCodeOpts, function (err, url) {
if (err) {
console.log(err);
return rej(err);
}
res(url);
});
});
},
},
mounted(){
// 调用方法 生成二维码图片
this.getUrlSrc("https://weixin.....")
.then(url => {
// 显示到img元素上
this.payImg = url
})
.catch(err => {
// 报错了。。。
alert(err)
})
}
}
</script>
- 注意事项
此方法支付不能在微信内访问页面拉起支付。必须在 外部浏览器 跳转 微信返回的支付地址 才能打开。（否则会提示：请从微信外打开订单，进行支付）。
JSAPI下单支付
这种支付方式适用 微信公众号 ，或 微信内置浏览器 内打开的网页来拉起微信支付。通过与后端交互，后端获取到微信下单所需要的参数(openid至关重要)返回给前端，前端通过此参数直接调用微信的JSAPI，就可以拉取支付了。
- 网页需要获取
code下单发送给后端。
推荐使用 静默授权 获取到 code 后发送给后端，后端通过微信接口获取到微信用户的 openid 。获取code方法。先要获取到code，然后把这个code发送给后端，后端去通过微信的接口获取到openid（微信用户的openid是唯一的）。
- 通过调用微信浏览器内置的API拉起支付
// 判断是否在微信浏览器内
if (/MicroMessenger/i.test(window.navigator.userAgent)) {
WeixinJSBridge.invoke('getBrandWCPayRequest', {
// 此参数需要通过后端发送到前端 不推荐前端生成
"appId": "wx2421b1c4370ec43b", //公众号ID，由商户传入
"timeStamp": "1395712654", //时间戳，自1970年以来的秒数
"nonceStr": "e61463f8efa94090b1f366cccfbbb444", //随机串
"package": "prepay_id=up_wx21201855730335ac86f8c43d1889123400",
"signType": "RSA", //微信签名方式：
"paySign": "...." //微信签名
},
function(res) {
// get_brand_wcpay_request:cancel 支付过程中用户取消
// get_brand_wcpay_request:fail 支付失败
if (res.err_msg == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示：
//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
}
});
}
- 注意
微信公众号需要在设置 网页授权域名 ， jsAPI域名 为你的网站地址，否则会出现地址验证失败。