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

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

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

https://docs.open.alipay.com/203/105285/

官方提供了ap.js和pay.htm内容，而我们是vue项目，需要进行一些改动,具体改动如下:

然后这里参考了几篇博客，我也一并列出来:

https://www.jianshu.com/p/9e8dba48b628

https://blog.csdn.net/jerrica/article/details/80626088

一、添加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)