1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > Vue项目中微信公众号调用支付宝接口被屏蔽的解决方案(全)

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

时间:2023-01-01 10:07:57

相关推荐

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

支付宝官网给出了常规的解决方案,链接如下:

https://docs./203/105285/

一、添加alipay.vue页面

需要将alipay.htm转换成一个vue页面,具体如下:

<template><div><div class="J-weixin-tip weixin-tip" ref="myWeixinTip"><div class="weixin-tip-content" ref="myWeixinTipContent">请在菜单中选择在浏览器中打开,<br/>以完成支付</div></div><div class="J-weixin-tip-img weixin-tip-img"></div></div></template><script>import _AP from '../../../common/js/ap'###说明:ap.js文件就是官网的js文件,自己找个文件夹放着,然后在alipay.vue页面中importexport 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 = param != '' ? _AP.decode(param) : 'pay.htm#error';}}},}</script>

注意,由于样式太长,就没有贴出来,自己手动粘贴

说明: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+ '&' + queryParamconsole.log(url)_Ap.pay(url)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。