微信中使用支付宝不能直接使用，由于微信内置浏览器的原因，在微信中使用支付宝时无法跳转出去，支付宝官网给出了实例文档
支付宝官网地址
下载后
将其例子融入到vue中使用
步骤：
第一步：将ap.js放在vue项目中
第二步：在需要使用的页面引入ap.js
第三步：使用ap.js里面的方法
注意事项：
在引入ap.js的时候需要注意，这个跟引入的方式有关联，经测试使用
import '../../../src/assets/js/ap';
引入没有问题，使用
import '@/assets/js/ap';
这样引用会有问题，
如果没有引用点击支付的时候不会进行任何操作
在页面中使用
在响应的点击事件中执行如下方法即可
这里的this.urlon是传入地址，及后端返回的支付地址
_AP.pay(this.urlon);
编译打包后再同一目录下放入pay.htm
完整例子
支付的vue文件
<div class="login-btn">
<el-button type="primary" @click="alipay()">支付宝</el-button>
</div>
<script>
import '../../../src/assets/js/ap';
export default {
data: function () {
return {
localurl: '',
urlon: ''
};
},
mounted() {
},
methods: {
login_info() {
this.$axios({
url: 'https://www.qinhonor.com:9100/api/payinfo/',
// url: 'https://www.singsoft.cn:8000/api/login',
method: 'post',
data: {
openid: '041v9G0003ZcUK1GOd400Bwpo13v9G0K'
}
})
.then((response) => {
console.log(response.data, 'res');
if (response.data.status == 200) {
sessionStorage.setItem('user', this.param.username);
sessionStorage.setItem('type', response.data.type);
sessionStorage.setItem('permissions0', response.data.permissions0);
sessionStorage.setItem('permissions1', response.data.permissions1);
sessionStorage.setItem('permissions2', response.data.permissions2);
sessionStorage.setItem('permissions3', response.data.permissions3);
this.$router.push('/dashboard');
} else {
alert('您好！用户名或密码错误，请重试!');
}
})
.catch(function (error) {});
},
alipay() {
this.$axios({
url: '后端地址',
method: 'post',
data: {
out_trade_no: '这个订单编号随意写，不能重复（例如：041v9G0003ZcUK1GOd400Bwpo13v9G0K3）',
total_fee: '0.01',
subject: '99预约'
}
}).then((response) => {
if (response.data.return == 'SUCESS') {
let ids = response.data.return1;
let ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
// alert('您好！微信内置浏览器');
this.urlon = ids;
_AP.pay(this.urlon);
}
} else {
alert('您好！用户名或密码错误，请重试!');
}
});
},
}
};
</script>
到此成功
方式二：使用静态html
将demo_get.htm中的a标签地址修改成支付回调地址即可
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>确认订单</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name='apple-touch-fullscreen' content='yes'>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<style>
body{margin:0}a:active,a:hover{outline:0}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}img{vertical-align:middle;border:0}@-ms-viewport{width:device-width}html{font-size:312.5%;-webkit-tap-highlight-color:transparent;height:100%;min-width:320px;overflow-x:hidden}body{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;font-size:.28em;line-height:1;color:#333;background-color:#F0EFED}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:500;line-height:1.2;line-height:1.1}h1 small,h1 .small,h2 small,h2 .small,h3 small,h3 .small,h4 small,h4 .small,h5 small,h5 .small,h6 small,h6 .small,.h1 small,.h1 .small,.h2 small,.h2 .small,.h3 small,.h3 .small,.h4 small,.h4 .small,.h5 small,.h5 .small,.h6 small,.h6 .small{font-weight:400;line-height:1}h1,.h1,h2,.h2,h3,.h3{margin-top:.28rem;margin-bottom:.14rem}h1 small,h1 .small,.h1 small,.h1 .small,h2 small,h2 .small,.h2 small,.h2 .small,h3 small,h3 .small,.h3 small,.h3 .small{font-size:65%}h4,.h4,h5,.h5,h6,.h6{margin-top:.14rem;margin-bottom:.14rem}h4 small,h4 .small,.h4 small,.h4 .small,h5 small,h5 .small,.h5 small,.h5 .small,h6 small,h6 .small,.h6 small,.h6 .small{font-size:75%}h1,.h1{font-size:.364rem}h2,.h2{font-size:.2996rem}h3,.h3{font-size:.238rem}h4,.h4{font-size:.175rem}h5,.h5{font-size:.14rem}h6,.h6{font-size:.119rem}h6{margin-top:0;margin-bottom:0}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#2BB2A3;text-decoration:none;outline:0}a:focus{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}ul{margin:0;padding:0;list-style-type:none}hr{margin-top:.28rem;margin-bottom:.28rem;border:0;border-top:1px solid #DDD8CE}p,h6{line-height:1.41;text-align:justify;margin:-.2em 0;word-break:break-all}weak,small{color:#666}space{display:inline-block;width:.12rem}.imgbox img{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%)}input.mt[type=radio],input.mt[type=checkbox]{-webkit-appearance:none;width:.45rem;height:.45rem;margin:-.07rem 0;border-radius:50%;border:.02rem solid #DDD8CE;text-align:center;vertical-align:middle;line-height:.45rem;outline:0}input.mt[type=checkbox]{border-radius:.06rem}label.mt{margin-right:.16rem;vertical-align:middle;font-size:.3rem}input.mt[type=radio]:checked,input.mt[type=checkbox]:checked{background-color:#2BB2A3;border:0;color:#FFF}input.mt[type=radio]:checked:after,input.mt[type=checkbox]:checked:after{content:"✓";font-size:.4rem;font-family:base_icon}.mt[disabled=disabled]{background:#EEE;border-color:#CCC;color:#CCC}.stepper input{outline:0}.stepper .btn{width:.6rem;padding:0;outline:0;font-size:.5rem;line-height:.6rem;font-weight:lighter;font-family:CourierNewPSMT, "Times New Roman"}.stepper .btn.minus{font-family:CourierNewPSMT, Verdana}.automove .page{-webkit-transition:-webkit-transform .2s}.albumContainer .page img{display:block}.albumContainer .page-number-container{z-index:2;position:absolute;color:#FFF;font-size:.4rem;left:0;top:0;text-align:center;width:100%;margin-top:.3rem}.albumContainer .page-number{padding:.2rem;background:rgba(0, 0, 0, .5)}button:focus{outline:0}.btn{display:inline-block;margin:20px 0 0;text-align:center;height:.6rem;padding:0 .32rem;border-radius:.06rem;color:#FFF;border:0;background-color:#FE6000;font-size:.28rem;vertical-align:middle;line-height:.6rem;box-sizing:border-box;cursor:pointer;-webkit-user-select:none}.btn-block{display:block;width:100%}.btn-larger{height:.94rem;line-height:.94rem;font-size:.4rem}.wrapper{overflow:hidden;padding:0 .2rem}.wrapper h4{font-size:.3rem}.wrapper-list h4{margin:.6rem .2rem .2rem;font-size:.34rem;font-weight:400}.weapper-list h4:first-of-type{margin-top:.3rem}.box-btn a{padding:.2rem}dl.list{border-top:1px solid #DDD8CE;border-bottom:1px solid #DDD8CE;margin-top:.2rem;margin-bottom:0;background-color:#FFF}dl.list dt,dl.list dd{margin:0;border-bottom:1px solid #DDD8CE;overflow:hidden;font-size:inherit;font-weight:400;position:relative}dl.list dt:last-child,dl.list dd:last-of-type{border-bottom:0}dl.list .dd-padding,dl.list dt,dl.list dd > .react{padding:.28rem .2rem}dl.list dt{font-size:.34rem;padding-bottom:.2rem;color:#333}dl.list .db{height:.88rem;line-height:.88rem;font-size:.3rem}dl.list dd dl{margin:0;margin-bottom:-1px;padding-left:.2rem;border:0}dl.list dd dl > .dd-padding,dl.list dd dl dd > .react,dl.list dd dl > dt{padding-left:0}dl.list .db > .react{color:#2BB2A3;padding:0 .2rem}dl.list-in{margin:0;border-top:0}dl.list:first-child{margin:0;border-top:0}dl.list dd > .input-weak{width:100%;display:block}dl.list dd > .btn{margin-top:-.15rem;margin-bottom:-.15rem}.kv-line > h6,.kv-line > .kv-k{display:block;width:5em;font-size:inherit;font-weight:400}.kv-line > .kv-v,.kv-line > p{display:block;-webkit-box-flex:1;-moz-box-flex:1;-ms-flex:1}.kv-line-r{display:-webkit-box;display:-ms-flexbox;margin:.2rem 0}.kv-line-r > h6,.kv-line-r > .kv-k{-webkit-box-flex:1;-moz-box-flex:1;-ms-flex:1;font-size:inherit;font-weight:400;margin-right:.2rem;display:block}.kv-line-r > .kv-v,.kv-line-r > p{display:block}ul.tab-strong{border-color:#2BB2A3;color:#2BB2A3}.tab-strong li{border-right-color:#2BB2A3}.tab-strong li.active{background:#2BB2A3}.taba li{display:block;text-align:center;-webkit-box-flex:1;-ms-flex:1;position:relative}.taba.noslide li.active:after{content:null}.taba li.active:after{content:"";display:block;position:absolute;bottom:-.08rem;border-bottom:.08rem solid #2BB2A3;width:100%}.taba li a.react{padding-top:.28rem;padding-bottom:.2rem}.taba.noslide li.active:after{content:none}.navbar{height:1.01rem;color:#FFF;background:#FE6000;display:-webkit-box;display:-ms-flexbox;position:relative}.navbar h1.nav-header{-webkit-box-flex:1;-ms-flex:1;font-size:.36rem;font-weight:lighter;text-align:center;line-height:1rem;margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
</style>
</head>
<body id="order-check" data-com="pagecommon">
<header class="navbar">
<h1 class="nav-header">确认订单</h1>
</header>
<div class="wrapper-list">
<h4>分水农家菜代金券</h4>
<dl class="list">
<dd>
<dl>
<dd class="kv-line-r dd-padding">
<h6>购买数量：</h6>
<p>1</p>
</dd>
<dd class="kv-line-r dd-padding">
<h6>项目单价：</h6>
<p>0.01元</p>
</dd>
<dd class="kv-line-r dd-padding">
<h6>总额：</h6>
<p>
<strong class="color-stronger highlight-price">0.01元</strong>
</p>
</dd>
</dl>
</dd>
</dl>
<div id="pay-methods-panel" class="pay-methods-panel">
<div class="wrapper buy-wrapper">
<!-- 该链接是拼接的请求，需要做urlEncode -->
<a id="links" class="J-btn-submit btn mj-submit btn-strong btn-larger btn-block">确认支付</a>
</div>
</div>
</div>
<script type="text/javascript" src="ap.js"></script>
<script>
var btn = document.querySelector(".J-btn-submit");
btn.addEventListener("click", function (e) {
document.getElementById("links").href=这里是回调地址;
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
//ele.href 是GET到支付宝收银台的URL
_AP.pay(e.target.href);
return false;
}, false);
</script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
