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

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

https://docs.open.alipay.com/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页面中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 = 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+ '&' + queryParam
console.log(url)
_Ap.pay(url)