支付宝微信扫H5网页展示二维码

一、场景描述

1.支付宝、微信扫一扫功能，扫描网页二维码(格式：https://www.iloveyou.com?token=1314521)，进行支付。（聚合二维码功能）

2.需要抓包工具代理手机网络，进行手机APP扫码（支付宝、微信APP）。

抓包工具：https://www.charlesproxy.com/download/
破解网站：https://www.zzzmode.com/mytools/charles/

3.文件源码逻辑

ybPay.vue文件结构😂😂😂

<template>
 <div></div>
</template>
<script>
import { getBrowserType } from "@/libs/util";
import { ybPayInitiatePayment, ybPayQueryOrder } from "@/api/ybpay";
import "amfe-flexible"; //  px 转为rem
export default {
 data() {
   return {
     //微信配置
     wxAppid: "wx****************",
     wxCode: this.$route.query.code,
     wxPayData: {}, //支付参数
     //支付配置
     alipayCode: this.$route.query.auth_code,
     aliPayResult: {}, //支付成功查询结果参数
     aliPayParams:'',//支付宝支付参数
     // public params
     moneyParams: {}, // 显示金额数据
   };
 },
 //data() -- end 

 created() {
   let token = this.$route.query.token;
   localStorage.setItem("token_ybpay", token);//存储token为刷新url之后使用，授权时候回刷新url

   if (getBrowserType() == "wx") {
     if (!this.wxCode) {
       // 获取code
       this.getCodeApi();
     } else {
       //使用code进行请求
       this.judgeBrowserWXPay();
     }
   } else if (getBrowserType() == "alipay") {
     
     if (!window.AlipayJSBridge) {
       document.addEventListener("AlipayJSBridgeReady", null, false);
     }
     if (!this.alipayCode) {
       this.aliPayGetCode();
     } else {
       this.judgeBrowserAliPay();
     }

     //支付宝逻辑 -- end
   } else {
     this.isLoading = false;
     this.$dialog.confirm({
       title: "提示",
       message: "请使用支付宝或微信打开",
       showCancelButton: false,
     });
   }
 },
 //created() -- end
 methods: {
   /**
    * ---- publick method
    * */
   // 0x000000
   payBtnClick() {
     // 立即支付点击方法

     if (getBrowserType() == "wx") {//微信支付
       this.wxPayMethod(this.wxPayData);
     } else if (getBrowserType() == "alipay") {//支付宝支付
        this.alipayPayMethod(this.aliPayParams);
     } else {
       this.isLoading = false;
       this.$dialog.confirm({
         title: "提示",
         message: "请使用支付宝或微信打开",
         showCancelButton: false,
       });
     }
   },
   //0x000001
   getCodeApi() {
     // 微信环境  // 获取code
     let urlNow = encodeURIComponent(window.location.href);
     //snsapi_base   //静默授权 用户无感知
     let url =
       "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
       this.wxAppid +
       "&redirect_uri=" +
       urlNow +
       "&response_type=code&scope=snsapi_base#wechat_redirect";
     window.location.href = url; //刷新url,会有授权信息
   },

   /**
    * private methods ------------------------------------------------------------------------  支付宝
    * */
   //0x000000
   aliPayGetCode() {
     //auth_base   //静默授权 用户无感知
     let app_id = "****************";//16位
     let authUrl = `https://openauth.alipay.com/oauth2/publicAppAuthorize.htm?app_id=${app_id}&auth_skip=false&scope=auth_user&redirect_uri=${encodeURIComponent(
       window.location.href
     )}`;
     window.location.href = authUrl;//授权之后会有授权信息
   },
   //0x000001
   aliPayGetUrlKey(name) {  //获取
     return (
       decodeURIComponent(
         (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
           location.href
         ) || [, ""])[1].replace(/\+/g, "%20")
       ) || null
     );
   },
   //0x000002
   judgeBrowserAliPay() {
     // 支付宝支付
     this.aliPayQuery("aliPay", this.alipayCode);
   },
   //0x000003
   aliPayQuery(payType, codeStr) {
     this.$toast.loading({
       message: "处理中...",
       forbidClick: true,
       loadingType: "spinner",
       duration: 0,
     });
     let tokenStr = localStorage.getItem("token_ybpay");
     let queryParams = { token: tokenStr, payType: payType, code: codeStr };
     let _this = this;
     ybPayInitiatePayment(queryParams).then((res) => {//ybPayInitiatePayment请求接口
       _this.$toast.clear(); //关闭loading
       if (res.data.code == 200) {
         if (res.data.msg != "成功") {
           _this.$toast(res.data.msg);
           return;
         }
         _this.aliPayResult = {
           outTradeNo: res.data.data.outTradeNo,
           ptTradeNo: res.data.data.ptTradeNo,
         };

         _this.moneyParams = {
           totalFee: res.data.data.totalFee,
           cashFee: res.data.data.cashFee,
           insuranceFee: res.data.data.insuranceFee,
         };
         _this.aliPayParams = res.data.data.payData;
         _this.alipayPayMethod(_this.aliPayParams);
       } else {
         _this.$toast(res.data.msg);
       }
     });
   },
   //0x000004 -- 支付宝调起支付
   alipayPayMethod(dataParams) {
     let _this = this;
     AlipayJSBridge.call(
       "tradePay",
       {
         tradeNO: dataParams,
       },
       function (res) {
         console.log(JSON.stringify(res));
         switch (res.resultCode) {
           case "9000"://支付成功
             _this.queryOrderMethod();//查询支付结果接口
             break;
           case "8000":
             Dialog.alert({
               title: "提示",
               message: "支付处理中，点击查看支付结果",
             }).then(() => {
               // window.location.href = _this.returnUrl;
             });
             break;
           case "6004":
             Dialog.alert({
               title: "提示",
               message: "支付处理中，点击查看支付结果",
             }).then(() => {
               // window.location.href = _this.returnUrl;
             });
             break;
           case "4000":
             _this.$toast("支付失败");
             break;
           case "6001":
             _this.$toast("已取消支付");
             break;
           case "6002":
             _this.$toast("支付失败，网络错误");
             break;
           default:
             _this.$toast("支付失败，错误码：" + res.resultCode);
             return;
         }
       }
     );
   },
   /**
    * private methods --------------------------------- ------------------------------------------ 微信
    * */
   //0x00000
   judgeBrowserWXPay() {
     // 微信支付
     this.payQuery("wxPay", this.wxCode);
   },
   //0x000001
   payQuery(payType, codeStr) {
     this.$toast.loading({
       message: "处理中....",
       forbidClick: true,
       loadingType: "spinner",
       duration: 0,
     });
     let tokenStr = localStorage.getItem("token_ybpay");
     let queryParams = { token: tokenStr, payType: payType, code: codeStr };
     let _this = this;
     ybPayInitiatePayment(queryParams).then((res) => {
       _this.$toast.clear(); //关闭loading
       if (res.data.code == 200) {
         if (res.data.msg != "成功") {
           this.$toast(res.data.msg);
           return;
         }
         let paramsJson = res.data.data.wxPayData;
         this.wxPayData = paramsJson;

         this.moneyParams = {
           totalFee: res.data.data.totalFee,
           cashFee: res.data.data.cashFee,
           insuranceFee: res.data.data.insuranceFee,
         };

         //接口查询之后，直接调用接口 -- zlj
         this.wxPayMethod(this.wxPayData);
       } else {
         this.$toast(res.data.msg);
       }
     });
   },
   //0x000002 -- 微信调起支付
   wxPayMethod(dataParams) {
     let data = dataParams;
     let _this = this;
     WeixinJSBridge.invoke(
       "getBrandWCPayRequest",
       {
         appId: data.appId,
         timeStamp: data.timeStamp,
         nonceStr: data.nonceStr,
         package: data.package,
         signType: data.signType, //微信签名方式：
         paySign: data.sign, //微信签名
       },
       function (res) {
         if (res.err_msg == "get_brand_wcpay_request:ok") {
           //支付成功
         } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
           _this.$toast("已取消支付");
           return;
         } else {
           _this.$toast("支付失败");
           return;
         }
       }
     );
   },
   //0x000003 -- 暂时用不到
   queryOrderMethod() {
     this.$toast.loading({
       message: "查询支付结果",
       forbidClick: true,
       loadingType: "spinner",
       duration: 2000,
     });
     let param = this.aliPayResult;
     let that = this;
     ybPayQueryOrder(param).then((res) => {
       that.$toast.clear(); //关闭loading
       if (res.data.code == 200) {
         let params = res.data.data;
         that.$router.push({ path: "/ybpayresult", query: params });
       } else {
         that.$toast(res.data.msg);
       }
     });
   },
   //0x000004
 },
 // methods -- end
};
</script>
<style  >
</style>

JS部分缩略

<script>
import { getBrowserType } from "@/libs/util"; // 工具库
import { ybPayInitiatePayment, ybPayQueryOrder } from "@/api/ybpay"; // 接口
import "amfe-flexible"; //  px 转为rem UI库
export default {
 data() {
   return {};
 },
 //data() -- end  
 created() {},
 //created() -- end
 methods: {
   /**
    * ---- publick method
    * */
   // 0x000000
   payBtnClick() {},
   //0x000001
   getCodeApi() { },

   /**
    * private methods ---------------  支付宝
    * */
   //0x000000
   aliPayGetCode() {},
   //0x000001
   aliPayGetUrlKey(name){},
   //0x000002
   judgeBrowserAliPay() {},
   //0x000003
   aliPayQuery(payType, codeStr){},
   //0x000004
   alipayPayMethod(dataParams) {},
   /**
    * private methods ------------------------- 微信
    * */
   //0x00000
   judgeBrowserWXPay() {},
   //0x000001
   payQuery(payType, codeStr) {},
   //0x000002
   wxPayMethod(dataParams){},
   //0x000003 -- 暂时用不到
   queryOrderMethod(){},
   //0x000004
 },
 // methods -- end
};
</script>