微信公众号h5使用微信支付及支付宝支付（前端）

方案：

一、微信支付

    考虑到授权的问题，微信支付使用JS-SDK进行支付

二、支付宝支付

    问题：h5微信授权后是无法再微信浏览器直接打开支付宝的付款链接

    解决：使用一个中间页 指向通过跳转到浏览器进行支付

实施：

一、微信支付：

第一步微信授权，在main.js中添加路由拦截，获取code，具体代码如下 ↓

// main.js
router.beforeEach(async (to: RouteLocationNormalized,from: RouteLocationNormalized,next) => {
    // 判断有没有openId 即授权了直接放行
    if (store.state.openId) {
        next()
    } else {
        // 没有授权去授权获取code 再放行
        const code = await getCode()
        await queryInfo(code)
        next()
    }
})
 
// 获取code
function getCode() {
    const code = getUrlCode()?.code
    if (!code) {
        // 没有code 请求后端接口进行链接跳转获取code(链接值微信的授权链接，成功授权后会跳回 回调地址，在回调地址上 会携带code参数)
        return getWxOauthUrl({
            redirectUrl: window.location.href
        }).then(async ({data}) => {
            if (data.statusCode === 0) {
                window.location.replace(data.msg)
            }
        })
    } else {
        return code
    }
}
 
// 通过code 获取用户信息
function queryInfo(code: string) {
    return getUserInfo({code}).then(({data}) => {
        const result = data.data || {}
        store.commit('getUserInfo', result)
        store.commit('getUserOpenId', result.openId)
    })
}
 
// 获取url 参数的通用方法
function getUrlCode() {
    // 截取url中的code方法
    const url = location.search;
    const theRequest = new Object();
    if (url.indexOf("?") !== -1) {
        const str = url.substr(1);
        const strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
            theRequest[strs[i].split("=")[0]] = strs[i].split("=")[1];
        }
    }
    return theRequest;
}

授权成功后即可以进行支付环节

核心代码

// 首先在index.html 中引入微信JS-SDK
 
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
 
 
// 然后在支付逻辑中添加以下代码即可~
 
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();
    }
 
 
 
function onBridgeReady(result) {
  WeixinJSBridge.invoke('getBrandWCPayRequest', {
    "appId": ,   //公众号ID，由商户传入
    "timeStamp": ,   //时间戳，自1970年以来的秒数
    "nonceStr": ,      //随机串
    "package": ,
    "signType": ,     //微信签名方式：
    "paySign": 
  },
  function (res) {
    if ((res.errMsg || res.err_msg) === "get_brand_wcpay_request:ok") {
      // 使用以上方式判断前端返回,微信团队郑重提示：
      //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

    }
  });
}

这样 微信支付就已经结束了

二、支付宝支付：

因为是在微信授权后的h5页面，所以不能直接在微信页面直接进行支付

所以第一步就是在点击支付的时候，进行跳转到中间页，

先定义一个中间页： pay.html

注意：要把这个页面放到publish目录下

// 跳转中间页，把请求支付的参数一并带过去
window.open(`${location.origin}/pay.htm?params=${encodeURIComponent(JSON.stringify(params))}`)

pay.html核心内容如下

let getQueryString = function (url, name) {
        let reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
        if (reg.test(url)) return RegExp.$2.replace(/\+/g, " ");
    };
 
    // 获取接口返回的表单 进行支付
    function handlePayForm(data) {
        const div = document.createElement("div");
        div.setAttribute("id", "payContainer");
        div.innerHTML = data
        document.body.appendChild(div);
        const payContainer = document.querySelector("#payContainer");
        const submit = payContainer.querySelector(
            'form[name="punchout_form"] input[type="submit"]'
        );
        submit.click();
        setTimeout(function () {
            div.remove();
        }, 500);
    };
    if (location.hash.indexOf('error') !== -1) {
        alert('参数错误，请检查');
    } else {
        // 判断当前的浏览器环境是不是微信浏览器
        let ua = navigator.userAgent.toLowerCase();
        let tip = document.querySelector(".weixin-tip");
        let tipImg = document.querySelector(".J-weixin-tip-img");
        const query = JSON.parse(decodeURIComponent(getQueryString(location.href, 'params')))
 
        if (ua.indexOf('micromessenger') !== -1) {
            // 如果是微信里的页面，做个指引（请通过浏览器进行支付）
            // 这个页面自己定义即可
        } else {
            // 好的，这是外部浏览器，请求接口获取支付的from表单
            axios({
                url: '',
                data: query,
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                }
            }).then(({data}) => {
                if (data.statusCode === 0) {
                    // 后端返回的form表单进行支付
                    if (data.data && data.data.returnCode === "SUCCESS") {
                        // data.data.result ==> 是一个支付的from表单
                        handlePayForm(data.data.result)
                    }
                }
            })
        }
    }

这样即可 跳转到微信外部浏览器进行正常的支付功能