支付宝|Vue项目中微信公众号调用支付宝接口被屏蔽的解决方案（全）支付宝|wx

支付宝官网给出了常规的解决方案，链接如下:
https://docs.open.alipay.com/203/105285/

文章图片

一、添加alipay.vue页面 【支付宝|Vue项目中微信公众号调用支付宝接口被屏蔽的解决方案（全）】需要将alipay.htm转换成一个vue页面，具体如下:

> import _AP from '../../../common/js/ap' ###说明：ap.js文件就是官网的js文件，自己找个文件夹放着，然后在alipay.vue页面中import export default { data() { return {} }, mounted() { if (location.hash.indexOf('error') != -1) { alert('参数错误，请检查'); } else { var ua = navigator.userAgent.toLowerCase(); let tip = this.$refs.myWeixinTip; let tipImg = this.$refs.myWeixinTipContent; if (ua.indexOf('micromessenger') != -1) {tip.style.display = 'block'; tipImg.style.display = 'block'; if (ua.indexOf('iphone') != -1 || ua.indexOf('ipad') != -1 || ua.indexOf('ipod') != -1) { tipImg.className = 'J-weixin-tip-img weixin-tip-img iphone'; } else { tipImg.className = 'J-weixin-tip-img weixin-tip-img android'; } } else {var getQueryString = function (url, name) { var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i"); if (reg.test(url)) return RegExp.$2.replace(/\+/g, " "); }; var param = getQueryString(location.href, 'goto') || ''; location.href = https://www.it610.com/article/param !='' ? _AP.decode(param) : 'pay.htm#error'; } } }, }

注意，由于样式太长，就没有贴出来，自己手动粘贴
说明：ap.js文件就是官网的js文件，自己找个文件夹放着，然后在alipay.vue页面中import
二、引入ap.js文件 vue项目中不能直接引入ap.js，需要进行一点小小的修改，内容如下:

var b = {}; var a = {}; a.PADCHAR = "="; a.ALPHA = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/"; a.makeDOMException = function() { var f, d; try { return new DOMException(DOMException.INVALID_CHARACTER_ERR) } catch(d) { var c = new Error("DOM Exception 5"); c.code = c.number = 5; c.name = c.description = "INVALID_CHARACTER_ERR"; c.toString = function() { return "Error: " + c.name + ": " + c.message }; return c } }; a.getbyte64 = function(e, d) { var c = a.ALPHA.indexOf(e.charAt(d)); if (c === -1) { throw a.makeDOMException() } return c }; a.decode = function(f) { f = "" + f; var j = a.getbyte64; var h, e, g; var d = f.length; if (d === 0) { return f } if (d % 4 !== 0) { throw a.makeDOMException() } h = 0; if (f.charAt(d - 1) === a.PADCHAR) { h = 1; if (f.charAt(d - 2) === a.PADCHAR) { h = 2 } d -= 4 } var c = []; for (e = 0; e < d; e += 4) { g = (j(f, e) << 18) | (j(f, e + 1) << 12) | (j(f, e + 2) << 6) | j(f, e + 3); c.push(String.fromCharCode(g >> 16, (g >> 8) & 255, g & 255)) } switch (h) { case 1: g = (j(f, e) << 18) | (j(f, e + 1) << 12) | (j(f, e + 2) << 6); c.push(String.fromCharCode(g >> 16, (g >> 8) & 255)); break; case 2: g = (j(f, e) << 18) | (j(f, e + 1) << 12); c.push(String.fromCharCode(g >> 16)); break } return c.join("") }; a.getbyte = function(e, d) { var c = e.charCodeAt(d); if (c > 255) { throw a.makeDOMException() } return c }; a.encode = function(f) { if (arguments.length !== 1) { throw new SyntaxError("Not enough arguments") } var g = a.PADCHAR; var h = a.ALPHA; var k = a.getbyte; var e, j; var c = []; f = "" + f; var d = f.length - f.length % 3; if (f.length === 0) { return f } for (e = 0; e < d; e += 3) { j = (k(f, e) << 16) | (k(f, e + 1) << 8) | k(f, e + 2); c.push(h.charAt(j >> 18)); c.push(h.charAt((j >> 12) & 63)); c.push(h.charAt((j >> 6) & 63)); c.push(h.charAt(j & 63)) } switch (f.length - d) { case 1: j = k(f, e) << 16; c.push(h.charAt(j >> 18) + h.charAt((j >> 12) & 63) + g + g); break; case 2: j = (k(f, e) << 16) | (k(f, e + 1) << 8); c.push(h.charAt(j >> 18) + h.charAt((j >> 12) & 63) + h.charAt((j >> 6) & 63) + g); break } return c.join("") }; b.pay = function(d) { var c = encodeURIComponent(a.encode(d)); ###################千万注意这个地方################# //location.replace (window.location.origin+"#/alipay?goto="+c) //####我的'#/alipay'是pay.htm页面改装过来的路由地址，需要自行替换 //###################千万注意这个地方################# //由于微信浏览器会在你带链接打开其他页面时截取掉 #后面的参数所以需要一波处理 location.replace (window.location.protocol + "//" + window.location.host + "/?time=" + new Date() + "#/payzfbx?goto=" + c) }; b.decode = function(c) { return a.decode(decodeURIComponent(c)) }; export default b

必须要注意：我的’#/alipay’是pay.htm页面改装过来的路由地址，需要自行替换,同时，加上#是因为我的vue-router是默认基于hash的，如果没有使用hash跳转的同学们可以不加
’#/alipay’路由换成自己的路由
三、业务逻辑调用获取form表单

###这里前后就不贴了，只贴关键的代码 import _Ap from '.....ap.js的地址自己填'###业务逻辑部分，获取到后台传来的form表单，搞支付宝接口的应该都知道传来form表单是啥吧 let htmls = res.data.data #res.data.data就是返回的表单 const div = document.createElement('div'); div.innerHTML = htmls; document.body.appendChild(div); document.forms[0].acceptCharset='utf-8'; // document.forms[0].submit(); var queryParam = ''; Array.prototype.slice .call( document .querySelectorAll("input[type=hidden]")) .forEach( function(ele) { queryParam += ele.name + "=" + encodeURIComponent(ele.value) + '&'; }); let url = document.forms[0].action+ '&' + queryParam console.log(url) _Ap.pay(url)