标签：支付宝 网页 res h5 支付 微信 data 页面

领导第一次让我做h5支付宝支付的时候，去了支付宝开放平台，一顿上上下下左左右右，看完了长呼一口气。

这个支付好像没我啥事儿啊！小伙伴儿们自行查看：https://opendocs.alipay.com/open/203/105285

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

这样就需要你准备两网页。一个是你写好的盛装后台返回的支付页面，一个是支付成功后，给return_url跳转的成功页面。

并且你可以通过获取网页url参数的方法去根据参数在这个回调页面里做些什么。

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

//点击支付业务页面<template>  <div>    <button @click="handlePay" class="pay_money_button" type="info" :loading="load" loading-text="支付中">去支付</button>  </div></template><script>  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) => {                //你想吃点啥吃点啥吧            })        },    }  }</script>

//支付宝返回表单前端调用页面<template>    <div class="container">        <div v-html="apply">        </div>    </div></template><script>export default {    data(){        return {            apply:'',        }    },    mounted(){        let form = sessionStorage.getItem('html')    this.apply = form;    this.$nextTick(()=>{        document.forms[0].submit()    })    },    methods:{    }}</script>

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

标签：支付宝,网页,res,h5,支付,微信,data,页面
来源： https://www.cnblogs.com/ommph/p/14648555.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。