方案：
一、微信支付
考虑到授权的问题，微信支付使用JS-SDK进行支付
二、支付宝支付
问题：h5微信授权后是无法再微信浏览器直接打开支付宝的付款链接
解决：使用一个中间页 指向通过跳转到浏览器进行支付
实施：
一、微信支付：
第一步微信授权，在main.js中添加路由拦截，获取code，具体代码如下 ↓
// main.jsrouter.beforeEach(async (to: RouteLocationNormalized,from: RouteLocationNormalized,next) => { // 判断有没有openId 即授权了直接放行 if (store.state.openId) { next() } else { // 没有授权去授权获取code 再放行 const code = await getCode() await queryInfo(code) next() }})// 获取codefunction 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) } } }) } }这样即可 跳转到微信外部浏览器进行正常的支付功能
