微信公众号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)                     }                 }             })         }     }

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