VUE爬坑之---支付宝支付功能

之前感觉支付宝很亲民，今天再做，感觉也是很多需要注意的地方，记录以防日后再入坑

一、在子组件中，引入ab.js

(function() {
	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));
		window.location.replace(window.location.origin+' /csgch/#/FullMast?goto= '+c)
		// location.href = "/csgch/#/FullMast?goto= " +   中间跳转页面，可以是静态.HTML,也可以是.VUE，一定记得写 #
	};
	b.decode = function(c) {
		return a.decode(decodeURIComponent(c))
	};
	window._AP = b
})();

一、子组件中，请求后台地址

this.$axios.post('后台接口地址',data).then((res)=>{
	this.html = res.data
	var form= res.data;
	const div = document.createElement('div')  //创建div
    div.innerHTML = form  //此处form就是后台返回接收到的数据
    document.body.appendChild(div) //document.forms[0].submit()
    var queryParam = '';
    Array.prototype.slice.call(document.querySelectorAll("input[type=hidden]")).forEach(function (ele) {
          queryParam += '&' + ele.name + "=" + encodeURIComponent(ele.value);
          });
     var gotoUrl = document.querySelector("#alipaysubmit").getAttribute('action')  + queryParam;
          _AP.pay(gotoUrl);

        })

二、编写中间跳转页面 FullMast.vue，可以是html，也可以使用vue

<template>
	<div class="mark">
		<div class="J-weixin-tip weixin-tip">
		    <div class="weixin-tip-content">
		        请在菜单中选择在浏览器中打开,<br/>
		        以完成支付
		    </div>
		</div>
		<div class="J-weixin-tip-img weixin-tip-img"></div>
	</div>
</template>

<script>
import ap from '@/assets/js/ap'
export default{
	data(){
		return{

		}	
	},
	mounted(){
		if (location.hash.indexOf('error') != -1) {
	        alert('参数错误，请检查');
	    } else {
	        var ua = navigator.userAgent.toLowerCase();
	        var tip = document.querySelector(".weixin-tip");
	        var tipImg = document.querySelector(".J-weixin-tip-img");
	        if (ua.indexOf('micromessenger&#