微信支付 前端从开发到配置

1.首页在微信公众号设置，微信到网页授权目录，此目录作用是，在这网页授权目录下调微信官方接口，获取用户到code
网页授权目录 为  域名
例如 www.xxxx.com

document.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${common.weixinAppID}&redirect_uri=${encodeURIComponent(common.weixinredirect_uri)}&response_type=code&scope=snsapi_base&state=${orderSn}gap${orderAmount}gap${storeId}#wechat_redirect`;

redirect_uri   回调地址
response_type 微信官方返回到code
state 自己需要带过来到参数

2. 在回调页面，拿到  code 和 state  带过来到参数

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
var code = getQueryString("code");
var state = getQueryString("state");

3.拿到code和参数 调取后台接口，获取数据，再调微信官方调SDK，就可以输入密码进行支付了。
* 调起微信官方的SDK,还需要在微信商户号设置，微信支付授权目录，此目录是，该网页在服务器的上一级文件路径就好）
比如   www.xxxx.com／调sdk的网页
支付目录就可以设置为 www.xxxx.com
比如 www.xxxx.com／pay/调sdk的网页
支付目录就可以设置为 www.xxxx.com／pay
orderApi.toPayApi({
    orderSn,
    orderDesc,
    orderAmount,
    code,
}).then(r => {
    if (r.result == 1) {
        let payInfo = r.data[0];
        // function onBridgeReady(){
        WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": payInfo.appId, //公众号名称，由商户传入
                "timeStamp": payInfo.timeStamp, //戳，自1970 年以来的秒数
                "nonceStr": payInfo.nonceStr, //随机串
                "package": payInfo.package,
                "signType": payInfo.signType, //微信签名方式:
                "paySign": payInfo.paySign  //微信签名,
            }, function (res) {
                if (res.err_msg == "get_brand_wcpay_request:ok") {
                    Toast.info("微信支付成功!")
                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                    Toast.info("用户取消支付!");
                } else {
                }
            }
        );
    } else {
        message.info(r.msg);
    }
})