VUE爬坑之----微信打开支付宝支付功能

在微信内通过浏览器打开支付宝功能,也是爬坑之一

一、首先要在【src–assets–js】下新建ap.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 +' **vue跳转页面(我的是:/dist/#/fullMast?)**?goto= '+c)
	};
	b.decode = function(c) {
		return a.decode(decodeURIComponent(c))
	};
	window._AP = b
})();

二、跳转页面:pay_mask.vue

我用的是新建一个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') != -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>

<style scoped>
        *, :before, :after {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
        }

        body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, p, blockquote, th, td {
            margin: 0;
            padding: 0
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        fieldset, img {
            border: 0
        }

        li {
            list-style: none
        }

        caption, th {
            text-align: left
        }

        q:before, q:after {
            content: ""
        }

        input:password {
            ime-mode: disabled
        }

        :focus {
            outline: 0
        }

        html, body {
            -webkit-touch-callout: none;
            touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
            tap-highlight-color: transparent;
            height: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            font-size: 15px;
            font-weight: 300;
            font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif
        }

        a {
            text-decoration: none
        }

        body {
            background: #F4F4F8
        }

        .weixin-tip {
            display: none;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            position: absolute;
            top: 15px;
            right: 20px;
            width: 265px;
            padding: 55px 0 0;
            text-align: left;
        }

        .weixin-tip-img {
            display: none;
            padding: 110px 0 0
        }

        .weixin-tip-img::after {
            display: block;
            margin: 15px auto;
            content: ' ';
            background-size: cover
        }

        .weixin-tip-img.iphone::after {
            width: 150px;
            height: 150px;
        }

        .weixin-tip-img.android::after {
            width: 173px;
            height: 240px;
        }
    </style>

三、在需要的页面进行 import 引用

import ap from ‘@/assets/js/ap’

四、在支付方法中调用

_AP.pay(gotoUrl);
在pay方法里跳转到pay_mask.vue页面

一定要写跳转页面,ap.js中也要写跳转页面!

发布了8 篇原创文章 · 获赞 23 · 访问量 6266

猜你喜欢

转载自blog.csdn.net/weixin_45102071/article/details/90410102
今日推荐