• 前端微信支付代码(公众号支付)

    一.场景 (完成代码见附录)

            其他商户跳转到我们支付页面，传入参数openId,fromTradeType,订单号，流水号，借由我们页面进行微信支付。具体在小程序后台如何配置，见微信官方文档。

    二.包引入部分

    import _ from "lodash";

    引入lodash主要使用防抖功能

     三.控制微信支付按钮显示隐藏的代码

    1. this.showWxPay = this.isWeChat() && tmp.subOpenId;
    2.  
    3. isWeChat() {
    4.       let ua = window.navigator.userAgent.toLowerCase();
    5.       if (ua.match(/MicroMessenger/i) == "micromessenger") {
    6.         return true; //是微信内部
    7.       } else {
    8.         return false;
    9.       }
    10.     },

    满足1.是在微信内核进入。2.传入了openId

    四.点击微信支付后的流程代码

    1.  wxPay: _.debounce(function () {
    2.       let url = "";        //接口获取后端timeStamp，nonceStr等微信支付拉起的参数
    3.       let data = this.wxParams;
    4.  
    5.       if (!this.passJudge(data)) {        //对进入的数据进行判读，必须每一个数据都是存在的
    6.         //对参数做一次校验
    7.         return;
    8.       }
    9.  
    10.       this.$axios
    11.         .post({
    12.           url,
    13.           data,
    14.           headers: { "Content-Type": "application/json" },
    15.         })
    16.         .then((res) => {
    17.           this.$emit(
    18.             "getPayResult",
    19.           );
    20.           let judge =
    21.             res.hasOwnProperty("data") &&
    22.             res.data.hasOwnProperty("ERRCODE") &&
    23.             res.data.ERRCODE == "000000" &&
    24.             res.status == "SUCCESS";
    25.           if (judge) {
    26.             let _data = res.data;
    27.             this.weChatParameter = {        //记录拉起支付的参数
    28.               //微信搭桥需要的数据
    29.               appid: _data.appId || "",
    30.               timeStamp: _data.timeStamp || "",
    31.               nonceStr: _data.nonceStr || "",
    32.               package: _data.package || "",
    33.               signType: _data.signType || "",
    34.               paySign: _data.paySign || "",
    35.             };
    36.             this.weixinPay(); //微信内置对象判断
    37.           } else {
    38.             this.$message({
    39.               message: res.retMsg || "提交订单失败",
    40.               type: "warning",
    41.             });
    42.           }
    43.         })
    44.         .catch((error) => {
    45.           this.$message({
    46.             message: "提交订单失败",
    47.             type: "warning",
    48.           });
    49.         });
    50.     }, 240),

    其中，passJudge函数为:

    1.  passJudge(data) {
    2.       if (!data) {
    3.         this.$message.error("缺少请求参数");
    4.         return false;
    5.       }
    6.       if (!data.reOrderNo) {
    7.         this.$message.error("缺失参数:reOrderNo");
    8.         return false;
    9.       }
    10.       if (!data.tranNo) {
    11.         this.$message.error("缺失参数:tranNo");
    12.         return false;
    13.       }
    14.       if (!data.subOpenId) {
    15.         this.$message.error("缺失参数:subOpenId");
    16.         return false;
    17.       }
    18.       if (!data.fromTradeType) {
    19.         this.$message.error("缺失参数:fromTradeType");
    20.         return false;
    21.       }
    22.       return true;
    23.     },

    五.进行微信搭桥，进行环境处理 

    1. let that = this;
    2.       if (typeof WeixinJSBridge == "undefined") {
    3.         if (document.addEventListener) {
    4.           document.addEventListener(
    5.             "WeixinJSBridgeReady",
    6.             that.onBridgeReady(),
    7.             false
    8.           );
    9.         } else if (document.attachEvent) {
    10.           document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady());
    11.         }
    12.       } else {
    13.         that.onBridgeReady();
    14.       }

     六.环境准备好后，拉起支付

    1. onBridgeReady() {
    2.       let that = this;
    3.       let timestamp = Math.round(this.weChatParameter.timeStamp).toString();
    4.  
    5.       window.WeixinJSBridge.invoke(
    6.         "getBrandWCPayRequest",
    7.         {
    8.           appId: that.weChatParameter.appid, //公众号名称，由商户传入
    9.           timeStamp: timestamp, //时间戳，自1970年以来的秒数
    10.           nonceStr: that.weChatParameter.nonceStr, //随机串
    11.           package: that.weChatParameter.package,
    12.           signType: that.weChatParameter.signType, //微信签名方式：
    13.           paySign: that.weChatParameter.paySign, //微信签名
    14.           // jsApiList: ["chooseWXPay"],
    15.         },
    16.         function (res) {
    17.           that.$emit(
    18.             "getPayResult",
    19.             `拉起支付返回结果为:${JSON.stringify(res)}`
    20.           );
    21.           // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
    22.           if (res.err_msg == "get_brand_wcpay_request:ok") {
    23.             //支付成功
    24.             that.$emit("toSuccess");
    25.           } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
    26.             //取消支付
    27.           } else {
    28.             //支付失败
    29.             that.$emit("toFail");
    30.           }
    31.         }
    32.       );
    33.     },

    七.附录：完整代码

    2.   
    3. <script>
    4. import _ from "lodash";
    5. import Bus from "@/utils/bus.js";
    6. export default {
    7.   data() {
    8.     return {
    9.       weChatParameter: "",
    10.     };
    11.   },
    12.   props: {
    13.     wxParams: {
    14.       type: Object,
    15.       default: {},
    16.     },
    17.   },
    18.   created() {},
    19.   mounted() {
    20.     Bus.$on("getDetail", (amount, settlementNo, reconciliationTime) => {
    21.       this.payAmount = amount;
    22.       this.amount = amount;
    23.       this.settlementNo = settlementNo;
    24.       this.reconciliationTime = reconciliationTime;
    25.     });
    26.   },
    27.   components: {},
    28.   computed: {},
    29.   watch: {},
    30.   methods: {
    31.     wxPay: _.debounce(function () {
    32.       let url = "";
    33.       let data = this.wxParams;
    34.       this.$emit("changeWay", 3);
    35.  
    36.       if (!this.passJudge(data)) {
    37.         //对参数做一次校验
    38.         return;
    39.       }
    40.  
    41.       this.$axios
    42.         .post({
    43.           url,
    44.           data,
    45.           headers: { "Content-Type": "application/json" },
    46.         })
    47.         .then((res) => {
    48.           this.$emit(
    49.             "getPayResult",
    50.             "进入/cashier/PublicPay，数据为：" + JSON.stringify(res)
    51.           );
    52.           let judge =
    53.             res.hasOwnProperty("data") &&
    54.             res.data.hasOwnProperty("ERRCODE") &&
    55.             res.data.ERRCODE == "000000" &&
    56.             res.status == "SUCCESS";
    57.           if (judge) {
    58.             let _data = res.data;
    59.             this.weChatParameter = {
    60.               //微信搭桥需要的数据
    61.               appid: _data.appId || "",
    62.               timeStamp: _data.timeStamp || "",
    63.               nonceStr: _data.nonceStr || "",
    64.               package: _data.package || "",
    65.               signType: _data.signType || "",
    66.               paySign: _data.paySign || "",
    67.             };
    68.             this.weixinPay(); //微信内置对象判断
    69.           } else {
    70.             this.$message({
    71.               message: res.retMsg || "提交订单失败",
    72.               type: "warning",
    73.             });
    74.           }
    75.         })
    76.         .catch((error) => {
    77.           this.$message({
    78.             message: "提交订单失败",
    79.             type: "warning",
    80.           });
    81.         });
    82.     }, 240),
    83.  
    84.     weixinPay() {
    85.       let that = this;
    86.       if (typeof WeixinJSBridge == "undefined") {
    87.         if (document.addEventListener) {
    88.           document.addEventListener(
    89.             "WeixinJSBridgeReady",
    90.             that.onBridgeReady(),
    91.             false
    92.           );
    93.         } else if (document.attachEvent) {
    94.           document.attachEvent("WeixinJSBridgeReady", that.onBridgeReady());
    95.         }
    96.       } else {
    97.         that.onBridgeReady();
    98.       }
    99.     },
    100.  
    101.     //微信内置浏览器类
    102.     onBridgeReady() {
    103.       let that = this;
    104.       let timestamp = Math.round(this.weChatParameter.timeStamp).toString();
    105.       this.$emit(
    106.         "getPayResult",
    107.         "进入onBridgeReady，数据为：" + JSON.stringify(that.weChatParameter)
    108.       );
    109.       window.WeixinJSBridge.invoke(
    110.         "getBrandWCPayRequest",
    111.         {
    112.           appId: that.weChatParameter.appid, //公众号名称，由商户传入
    113.           timeStamp: timestamp, //时间戳，自1970年以来的秒数
    114.           nonceStr: that.weChatParameter.nonceStr, //随机串
    115.           package: that.weChatParameter.package,
    116.           signType: that.weChatParameter.signType, //微信签名方式：
    117.           paySign: that.weChatParameter.paySign, //微信签名
    118.           // jsApiList: ["chooseWXPay"],
    119.         },
    120.         function (res) {
    121.           that.$emit(
    122.             "getPayResult",
    123.             `拉起支付返回结果为:${JSON.stringify(res)}`
    124.           );
    125.           // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
    126.           if (res.err_msg == "get_brand_wcpay_request:ok") {
    127.             //支付成功
    128.             that.$emit("toSuccess");
    129.           } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
    130.             //取消支付
    131.           } else {
    132.             //支付失败
    133.             that.$emit("toFail");
    134.           }
    135.         }
    136.       );
    137.     },
    138.  
    139.     passJudge(data) {
    140.       if (!data) {
    141.         this.$message.error("缺少请求参数");
    142.         return false;
    143.       }
    144.       if (!data.reOrderNo) {
    145.         this.$message.error("缺失参数:reOrderNo");
    146.         return false;
    147.       }
    148.       if (!data.tranNo) {
    149.         this.$message.error("缺失参数:tranNo");
    150.         return false;
    151.       }
    152.       if (!data.subOpenId) {
    153.         this.$message.error("缺失参数:subOpenId");
    154.         return false;
    155.       }
    156.       if (!data.fromTradeType) {
    157.         this.$message.error("缺失参数:fromTradeType");
    158.         return false;
    159.       }
    160.       return true;
    161.     },
    162.   },
    163. };
    164. script>
    165.   
    166. <style lang="scss" scoped>
    167. .check-box {
    168.   padding: 0px 10px;
    169.   height: 28px;
    170.   display: flex;
    171.   justify-content: center;
    172.   align-items: center;
    173.   border: 1px solid rgb(220, 220, 220);
    174.   margin-left: 10px;
    175.   cursor: pointer;
    176.  
    177.   .check-img {
    178.     width: 18px;
    179.     height: 18px;
    180.   }
    181.  
    182.   .check-word {
    183.     margin-left: 5px;
    184.     font-size: 14px;
    185.   }
    186. }
    187. style>

  • 相关阅读:
    动物静态HTML网页作业作品 大学生野生动物保护网页设计制作成品 简单DIV CSS布局网站
    Spring Boot中实现发送文本、带附件和HTML邮件
    【Vue】Provide,Inject,模版 Ref 的用法
    作业 增删改查 三个功能
    C++如何在main函数开始之前(或结束之后)执行一段逻辑？
    Node.js基础知识点
    Singleton Pattern 单例模式简介与 C# 示例【创建型】【设计模式来了】
    io多路复用：select、poll和epoll
    SCT52240STDR，SCT52240MTER，SCT52240QSTDR，SCT52240QMTER,栅极驱动器
    uniapp 之 本地存储
  • 原文地址：https://blog.csdn.net/qq_36566924/article/details/127687420