java 支付宝h5网页支付接口 移动端h5网页调用支付宝支付接口

领导第一次让我做h5支付宝支付的时候，去了支付宝开放平台，一顿上上下下左左右右，看完了长呼一口气。这个支付好像没我啥事儿啊！小伙伴儿们自行查看：/open/203/105285

QQ截图094630.png

关于手机网页内支付宝支付，核心代码就是，后端会返回给你一个form，然后你拿着这个form去调用就行了。

这样就需要你准备俩网页。一个是你写好的盛装后台返回的支付页面，一个是支付成功后，给return_url跳转的成功页面。并且你可以通过获取网页url参数的方法去根据参数在这个回调页面里做些什么。

首先我们先请求后端给我们的支付接口

//点击支付业务页面

去支付

export default {

data(){

return {

load:false

}

},

methods:{

//点击支付

handlePay(){

this.load = true;

//请求支付参数

let data = {

orderId:this.payForm.orderId

}

aliPaySignH5(data).then((res) => {

if (res.status == 1000) {

if (res.data !== null) {

//这里我用了缓存来处理返回值，用router传参，一个会显示在浏览器上，

//一个强制刷新会消失参数，而且form表单过长。个人喜好，自行更改

sessionStorage.setItem('html',res.data);

this.$router.push({path:'/bigdatapay'})

}

}

}).finally((res)=>{

this.load = false;

Toast.fail(res.data.msg);

})

.catch((err) => {

//你想吃点啥吃点啥吧

})

},

}

}

//支付宝返回表单前端调用页面

export default {

data(){

return {

apply:'',

}

},

mounted(){

let form = sessionStorage.getItem('html')

this.apply = form;

this.$nextTick(()=>{

document.forms[0].submit()

})

},

methods:{

}

}

这里还有一个地方就是，支付宝支付是无法在微信环境内打开的，所以你需要在支付页面加一个判断，如果是微信环境，就给用户一个操作提示，打开右上角，去在浏览器里打开页面。判断微信环境的方法之前我们已经封装好了，这里不重复写出，朋友们自行前去查看即可(前面的文章，微信分享和支付中都有这个方法)。

好了，到这里，我们的支付宝和微信常用的几个接口我们都做完了。相信你在离前端入门到放弃的道路上越走越近了。码文不易，如果觉得对你有帮助的话，点个赞吧！谢谢！