在微信内通过浏览器打开支付宝功能,也是爬坑之一
一、首先要在【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中也要写跳转页面!