2024年前端最全前端实现微信支付（H5，微信小程序）_微信h5支付(1)，2024年最新面试官问问题技巧

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

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

一、微信支付（H5，微信小程序）

通常一些电商项目使用到微信支付操作，所以简单地介绍一下微信支付的具体流程。

1.1 什么是微信支付？在什么业务场景会使用到微信支付？

微信支付是微信内置微信浏览器（其他浏览器不支持）或者微信小程序的支付接口，主要负责用户对商家执行支付操作的流程。
例如常见的电商在下单环节，就需要通过使用微信支付接口，唤醒支付金额以及输入支付密码界面。再通过支付是否成功，跳转到相应的支付成功，支付取消或者支付失败页面。

1.2 通常微信的支付流程

通常支付会分成两种形式：
一、在商品详情页跳转到下单页面去执行支付（此时订单未创建），对应以下的1.2.1 订单未创建的下单支付流程。
二、在订单页面处于待支付去支付（此时订单已经创建了），对应以下的1.2.2 订单已创建的下单支付流程。

1.2.1 订单未创建的下单支付流程

具体大概流程如下所述：

1. 在下单页面，用户通过表单输入自己的收货信息等。
2. 点击下单按钮，按钮事件中通过接口post请求把用户的收货信息等放在body内，后端会返回一个订单编号给前端。（订单创建接口）
3. 前端拿到此订单编号时，再通过接口post请求把第2步拿到的订单编号放在body内，后端会返回一组支付签名的数据给前端。（订单支付签名接口）
4. 前端再使用微信自带支付接口（以JSAPI 支付接口为例子），使用此接口时，把第3步获得的支付签名数据参数传给微信支付服务器。
5. 此时用户界面上会唤起支付页面，就是用户输入支付密码的界面。
6. 在接口JSAPI 支付接口返回，书写三种if的判断条件：
   ① 用户点击关闭支付密码界面，JSAPI 支付接口就会返回res.err_msg=“get_brand_wcpay_request:cancel”，即用户取消支付，前端书写跳转路由跳到支付取消页面；
   ② 用户支付密码输错后，JSAPI 支付接口就会返回res.err_msg == “get_brand_wcpay_request:fail”，即用户支付失败，前端书写跳转路由跳到支付失败页面；
   ③ 用户支付密码正确后，JSAPI 支付接口就会返回res.err_msg == “get_brand_wcpay_request:ok”，即用户支付成功，前端书写跳转路由跳到支付成功页面；

1.2.2 订单已创建的下单支付流程

具体大概流程如下所述：

1. 用户进入待支付的订单列表页面，此时后端会通过接口把所有的该用户待支付的订单以及它对应的订单编号传给前端（用户订单列表接口），前端做列表展示。
2. 用户点击其中一个待支付的订单中继续支付的按钮。按钮事件先把一个待支付的订单的订单编号拿出来。
3. 接着继续进行1.2.1的第3-6步操作，直至这个订单完成支付流程。

1.3 微信的支付接口

现在一般微信的支付接口会分成两种：
一、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接口列表
    });



### 总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://img-blog.csdnimg.cn/img_convert/ef336fc6eeb8c79b1e96f97e168df90a.png)

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://img-blog.csdnimg.cn/img_convert/d3ac9c078e3063bbc4ddc4fe929112c8.png)

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

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://img-blog.csdnimg.cn/img_convert/04656be82d9b13ba32131bdc8ec55836.png)



学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![最新阿里蚂蚁金服四面（已拿offer）Java技术面经总结](https://img-blog.csdnimg.cn/img_convert/04656be82d9b13ba32131bdc8ec55836.png)