2024年Web前端最全前端实现微信支付（H5，微信小程序）_微信h5支付，前端开发网络培训

最新推荐文章于 2024-06-06 17:12:30 发布

2401_84411522

最新推荐文章于 2024-06-06 17:12:30 发布

阅读量696

点赞数 3

分类专栏：程序员文章标签：前端微信微信小程序

本文链接：https://blog.csdn.net/2401_84411522/article/details/138454915

版权

程序员专栏收录该内容

213 篇文章 0 订阅

订阅专栏

前端框架

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。

以 Vue 为例，我整理了如下的面试题。

Vue部分截图

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

现在一般微信的支付接口会分成两种：
一、JSAPI 支付接口
二、微信公众号的JSSDK中的wx.chooseWXPay
通常支付接口会封装好放在全局中，以便前端调用可以减少重复书写。

1.3.1 JSAPI 支付接口相关代码

// 检测支付环境中的 WeixinJSBridge
   if (typeof WeixinJSBridge == "undefined") {
      if (document.addEventListener) {
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
      } else if (document.attachEvent) {
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
      }
    } else {
      onBridgeReady();
    }

    function onBridgeReady() {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": "appId", //公众号名称，由商户传入
            "timeStamp": "timeStamp", //时间戳，自1970年以来的秒数
            "nonceStr": "nonceStr", //随机串
            "package": "package",
            "signType": "MD5", //微信签名方式：
            "paySign": "paySign" //微信签名
          },
          function(res) {
            // 支付成功
            if (res.err_msg == "get\_brand\_wcpay\_request:ok") {
              // 使用以上方式判断前端返回,微信团队郑重提示：
              //res.err\_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            }
            // 支付过程中用户取消
            if (res.err_msg == "get\_brand\_wcpay\_request:cancel") {

            }
            // 支付失败
            if (res.err_msg == "get\_brand\_wcpay\_request:fail") {

            }
            /\*\*
 \* 其它
 \* 1、请检查预支付会话标识prepay\_id是否已失效
 \* 2、请求的appid与下单接口的appid是否一致
 \* \*/
            if (res.err_msg == "调用支付JSAPI缺少参数：total\_fee") {

            }
          });
      }

从上述代码中我们可以看出，先会检测支付环境中的 WeixinJSBridge，个人认为是为了判断执行代码是否处于微信环境。在执行WeixinJSBridge.invoke()的接口请求时，会用到一组支付签名的数据，这正是通过后端请求支付签名所给的。
分别为以下五种数据：

appId为公众号名称
timeStamp为时间戳，自1970年以来的秒数
nonceStr为随机串
package为订单详情扩展字符串
signType为微信签名方式，默认为MD5
paySign为微信签名，通过签名生成算法生成
（注意：在调用支付接口的参数，支付签名的数据中的字段名受大小写敏感）

1.3.2 微信公众号的JSSDK中的wx.chooseWXPay

1.3.2.1 使用wx.chooseWXPay的前置条件

wx.chooseWXPay使用前需要先准备jweixin-1.6.0.js文件，并在需要使用的页面引用此JS文件。具体使用说明可以查看微信官方JSSDK文档

1.3.2.2 wx.chooseWXPay相关代码

let WeChatPay = function() {
// 2、引入js后、获取公众号校验信息
    let timestamp = '',
      nonceStr = '',
      signature = '';
    let v = {
      // 用于换取微信校验信息的参数：要求不可以包含 “#” 号
      url: location.split('#')[0]
    };

    // 3、通过config接口注入权限验证配置（需要同步进行，在获取到校验信息后方可注入config，否则校验失败！）
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
      appId: '', // 必填，公众号的唯一标识
      timestamp: , // 必填，生成签名的时间戳
      nonceStr: '', // 必填，生成签名的随机串
      signature: '', // 必填，签名
      jsApiList: ["checkJsApi", "chooseWXPay", "updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
    });

    axios.post('/wx/pay/orderPay\_XXXX', data).then(res => {
      // 支付成功状态
      if (res.code == 200) {
        // 获取支付必备的参数
        let {
          nonceStr,
          package,
          signType,
          paySign
        } = res.data;
        // 4、通过ready接口处理成功验证
        wx.ready(function() {
          /\* 微信支付 \*/
          wx.chooseWXPay({
            timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
            nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
            package: package, // 统一支付接口返回的prepay\_id参数值，提交格式如：prepay\_id=\\*\\*\\*）
            signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
            paySign: paySign, // 支付签名
            success: function(res) {
              // 前端判断返回方式，微信团队郑重提示：不保证绝对可靠，切记！
              if (res.errMsg == 'chooseWXPay:ok') {
                // 【支付成功】
              } else if (res.errMsg == 'chooseWXPay:cancel') {
                // 【支付取消】：用户取消支付不会进入这个判断，而是进入complate和cancel函数
              } else {

              }
            },
            complete: function(res) {
              // 接口调用完成时执行的回调函数，无论成功或失败都会执行
              if (res.errMsg == 'chooseWXPay:ok') {
                // 【支付成功】：支付成功提示页面，点击完成按钮之后
                wx.closeWindow(); /\* 关闭微信窗口，调用时需要在config中进行校验 \*/
              } else if (res.errMsg == 'chooseWXPay:cancel') {
                // 【支付取消】
              } else {

              }
              /\*\*
 \* iOS和Android支付成功点击“完成”后都会进入success和complete函数，都返回'chooseWXPay:ok'
 \* （也有人说Android支付成功不进入success函数，）
 \* 原因是【iOS和Android返回数据不同。支付成功后Android返回 {"errMsg":"getBrandWCPayRequest:ok"}，iOS返回{"err\_Info":"success","errMsg":"chooseWXPay:ok"}，故Android找不到success方法，导致失败】
 \* \*/
            },
            fail: function(err) {
              // 接口调用失败
            },
            cancel: function(err) {
              // 用户点击取消时的回调函数：用户取消支付后实际上进入cancel 和 complate函数
            }
          });
        });


###  最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

![](https://img-blog.csdnimg.cn/img_convert/933fcbaebe2fb9dd15ef97ac66b6eef1.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/8d44feb5e9c689db75f63e67774272f0.webp?x-oss-process=image/format,png)


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

说技术时的话就好了

[外链图片转存中...(img-SUjS3q3G-1714842510665)]

[外链图片转存中...(img-Ac7kegHA-1714842510666)]


**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

2401_84411522

关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
2024年Web前端最全前端实现微信支付（H5，微信小程序）_微信h5支付，前端开发网络培训

前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。在执行WeixinJSBridge.invoke()的接口请求时，会用到一组支付签名的数据，这正是通过后端请求支付签名所给的。以 Vue 为例，我整理了如下的面试题。
复制链接

扫一扫