微信，支付宝如何唤起H5支付

支付宝支付

// 请求后台时需要的数据
 this.userPay = {
          amount:  10,  // 支付金额
          rcharge_account: this.user.userPhone,  // 用户账号
          rcharge_type: "experience_volume",  // 请求自己后台接口时需要传的，具体传参数据看后台需要
          user_id: this.user.userId,  // 用户id
          source: "mobile"  // 手机端，
        };
        
// 请求成功会返回一个 form 表单信息，将该表单放在html中，即打开支付宝支付界面。
// 基于Vue框架做的，所以可以这样将 form表单信息放在html当中。

// html
 <div v-html="zfHtml"></div>

// script
export default {
  data() {
    return {
      zfHtml: "",
    };
  }
 }
 
 // 发起请求
 this.$axios.post("http://mp.youkuaiyun.com/eg-api/user/pay/aliPay", this.userPay)  // 请求地址为自己后台接口
        .then(res => {
          this.zfHtml = res.data.data;
 });
// 最后添加一个点击事件，触发支付宝表单事件，就唤起支付界面了
 document.forms[0].submit();
        

2. 支付成功之后的回调：
   同步：return_url 支付成功后回调的页面逻辑，是同步执行的
   异步：notify_url 为异步请求，重要逻辑可在该回调撰写

   支付成功，该项目并没有什么重要逻辑，所以我使用的是 同步回调，支付成功后返回支付该项目中的支付成功页面。
   return_url，链接为一个网页即可，支付成功后，会自动执行的，该链接地址为后台撰写，将链接地址的给后台人员即可。

微信支付

第一步肯定还是向后台请求订单信息，在该项目中，微信支付参数和支付宝参数一样，参数同上。（根据后台需要填写参数）

// 请求后台成功后，会返回一个url，跳转该地址即是微信网页支付页面；

this.$axios
        .post(
          "http://mp.youkuaiyun.com/eg-api/user/pay/wxH5Pay",
          this.userPay
        )
        .then(res => {
          this.wxUrl = res.data.data.mweb_url;
        });
 
 //  + 上回调函数
 let url ="&redirect_url=" +encodeURIComponent("http://mp.youkuaiyun.com/Success");
 // 回调地址 需要  encodeURIComponent()
 // 最后将请求到的url + 回调url 即可
 window.location.href = this.wxUrl + url;

微信H5 支付只能在浏览器端使用，在微信App内并不支持微信H5支付。

• 注意，在开发环境中可能会出现，商家缺少配置参数，换为线上环境。
• 一定不要忘了在微信账号中配置 域名

 
 
// 一个月薪2500的狗头，只能记录+分享它的狗生了…