h5使用js拉起微信支付

近期，业务需求对接了微信支付，做个总结。web网页想要拉起微信支付，有两种方法： H5下单支付 , JSAPI支付 。首先纯前端做不了微信支付，必须配合后端才能通过微信的下单请求。接下来说说这两种方法的区别。

H5微信下单支付

这种支付方式是用户在浏览器端打开网页，通过下单等操作，与后端交互，后端向微信端下单获取到 支付链接地址 。然后返回给前端，前端通过打开这个链接地址跳转到微信APP，进行支付后返回到浏览器端。

• H5下单文档地址

• 下单流程图（来自微信官方）

• 电脑端做扫码支付

由于，前端下单后，后端获取到微信的支付链接地址。发送给前端，前端可以通过qrcode第三方库来转换成二维码在前端显示。这里以vue2.x版本项目为例。

1. 安装依赖

# 以你的项目文件夹 打开 cmd 命令
npm i qrcode -D #安装依赖

1. 使用

<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域名 为你的网站地址，否则会出现地址验证失败。