36-尚硅谷-微信支付-基础支付APIv3-Native下单-下单流程前端代码解析

好，上节课呢，我们已经展示了一个支付的二维码，那么支付二维码的展示呢，实际上是依赖于前端的组件的，所以这节课呢，我简单的来介绍一下前端代码的一个呃，大致的情况，那么如果你对view比较熟悉的话呢，是最好的了，如果你对view不熟悉的话呢，那我们只需要掌握啊它的一个代码执行的流程就可以了。好，那首先呢，我们来找到这个页面，我们打开我们的前端工具Vs code，那么我们打开我们的payment front这个项目的目录，我们展开src，在src下面呢，有一个views。在views下面有一个index view，那么这个index view呢，就是当前我们的这个课程列表这个页面了，那么在这个课程列表页面里面呢，我们先关注这样的啊，几组组件，第一组组件呢，就是课程列表这组组件。我们找一下。

那么在课程列表下面呢，有一个u Li Li，也就是无序列表，那么在这个无序列表当中呢，有一个v for，那么实际上即使你对view不熟悉的话，你也可以猜得到这是一个便利对吧？啊，它便利的是什么呢？便利的是我们的课程的数据列表的数据，那么这个课程的数据列表呢，之前我们是在后端的代码当中已经给它获取出来了，那么我们来看一下我们的后端的代码。我们之前呢，是写了一个controller，并且呢，在这个controller里面呢，我们写了一个list接口，那么在list接口当中呢，我们返回了一个product list，好，那么在前端。我们呢，就遍历这个list，那这个product list呢，在我们的当前的index view的页面的脚本当中定义。我们找到脚本部分。

在脚本部分呢，我们有一个，那这个是如何的呢。这面有个create方法，Create方法呢是一个生命周期方法，我们说它呢是页面加载式执行好页面加载时自动执行，执行了这个方法，那这个方法呢，里面就为这个list赋值了，那么这个product list的值是从哪来的呢？当然是从我们后端接口的返回结果当中来的，那么很显然上面这句话就是对我们后端接口的调用了，那么这个问就是一个回调了，那么后端接口如果调用成功，就会在这个里面呢出后端结果的应，然后从后端的应里面到数据里面的，所以我们来看我们的后端。

后端确实是这以后给前端返回的数据属性了，那么前端这面的就是从后端取出数据属性，所以这面的前端的数据的取值一定要和这面后端的数据的赋值呢要严格对应。那这面就是我们的赋值了，那么这个阿贾克斯它很显然就是在这个list方法当中执行的，那么这个类呢，就像我们的后端接口发起了远程调用，那么这个list又是在哪执行的呢？它是被product API调用的，那product API呢，是在上面这个位置定义的一个，我们管它叫模块，那么在我们的Java当中呢，也有这样的import关键词，我们Java当中的import关键字呢，引用的是一个类，那么在javascript当中呢，引用的是一个模块，那这个模块呢，你可以把它理解为我们Java当中的对象啊，所以呢，这个product API引进来之后，在后面这个位置是直接可以调用里面的方法的啊，用法有点类似于我们Java当中的对象，那么这个product API是在哪定义的呢？是在这个位置定义的，我们找到API文件夹下的product。

这个文件API文件夹件，其实呢，就是定义的，我们打开。打开它之后呢，你会发现这里面呢，有一个远程调用，因为这里面很显然有一个URL，有一个method，那正好这个AA就和我们之前的这个A，容易就理解了，这段代码实际上呢，就是对我们远程接口的调用好，那么这段代码呢，它只指定了我们远程接口的URL的后面的路径部分，因为我们整个的前端和后端呢，它是一个分离的啊项目，前端呢是8080，而后端呢是8090，所以呢，如果我们的前端要能够调用到后端的这个接口的话呢，一定要写完整的地址，那这个主机地址是在哪定义的呢？你会发现呢，其实这个request方法呀，是在这个文件当中引进来的，那这个文件又是哪个文件呢？它是我们的下面的request点。

JS这个文件，那在这个文件当中呢，用了一个叫做的一个模块，那么这个呢，就是在view程序当中，专门做阿贾克斯请求，专门发送阿贾克斯请求的一个模块。我们的package Jason当中。定义了咱们整个项目的所有的依赖。这个package Jason有点类似于我们的。

Va里面的这个po xml文件。我们大家都知道po.xl文件当中呢，实际上是定义了项目依的，那么同样这个package点文件当中在节目，那么这个括个xus啊这样的一个工具，所以呢，我们在这个位置引入了我们的发送阿贾克斯请求的这样的一个工具，引入进来之后呢，在这个位置大家可以看到它呢，就初始化了我们所有远程阿贾克斯请求的主机地址，那么这个就是我们的后端接口地址了，8090，好，那这个位置呢，定义的是所有的阿贾克斯请求的请求超时时间，那这面呢，为了方便大家测试哈，我这面定义的请求超时时间呢，定义了十秒。

因为大家的网络环境可能各不一样，所以呢，有些同学如果网络条件不是特别好的话，我们在这个地方。去请求我们的这个微信支付二维码的时候，可能呢，它的延迟时间比较长，因为呢，我们这个是毕竟是向远程的微信服务器来发送请求，对不对，那如果它延迟的时间比较长的话呢，它就有可能超时。那么他等待的时间是多长时间呢？就是十秒，我给大家啊演示一个等待的时间比较短的情况，比如说只等待100毫秒。也就是说前端向后端进行阿贾克斯调用的时候，如果后端的接口在100毫秒之内还没有返回数据的话，那么前端就会报告这个错误，所以大家你们自己哈，在课下的时候，自己去做测试的时候，那么如果啊报了这个错误的话，那你看一看是不是因为你的网络环境不太好而导致的，那如果你的网络环境实在不好，那么你就把这个时间呢设置的长一点，这样的话呢，他就能够等的久一点，那不至于前端报错。

那我们回到我们刚才的用这块，我们的呢，其实就是做一个初始化好，然后后面这些代码呢，大家就不用太关注了，它是呢，对ex access这个对象呢，做一些统一的公共的处理，比如说这面呢，会统一的去处理一些错误信息啊，如果我们有正确的结果的话，那么呢，就会在这个地方展示。这个问这个代码段当中会展示我们这面的远程请求的正确结果，那错误结果是怎么处理的呢？错误结果呢就是在这个下面这块处理的，如果你能看得懂view就更好了，如果你看不懂的话，那么就知道这一段代码是对响应的拦截，然后呢会统一处理一下错误消息。那么接下来呢，我们再回头把我们整个啊，刚才阿贾克斯请求的一个发送的过程呢再捋一遍，首先我们项目当中要有一个package。

那么在package当中呢，要引入这个专门去发送贾克斯的这样的一个工具啊，在javascript当中当中，我们管它叫us模块，好，然后接下来我们在这个里面定义了一个request。那么在request里面呢，引入了刚才的X，并且呢，对呢，做了初始化的设置，并且呢统一处理了X的一个响应结果，那么在这里面呢，我们是统一处理它的错误的响应结果。然后呢，在这个模块当中，对我们的request模块进行了一个调用，那么接下来呢，在index当中，我们呢，又通过index view呢，又调用了product啊这个模块，那么在这个里面呢，我们通过product API，也就是说。

这个API是从这个地方定义的啊，那么它来源于模块，所以在这个位置呢，我们又通过API调用了刚才product这个里面的类似方法。然后呢，通过问方法，我们呢，定义了一个成功的响应回调，那么响应数据呢，就被封装到了里面，那我们后端呢，在response的这个结果属性里面呢，装了list，所以呢，我们的list呢，就被给了我们当前的数据定义的product list啊这个数据值。这个值有了之后呢，我们就可以将这个值在我们的页面当中，我们找到刚才我们页面当中循环这个位置啊，在我们的页面当中对它进行渲染了。所以这块呢，就是我们前端的啊，这样的一个动态的一个脚本啊，对数据进行便利的一个动态脚本，实际上这块跟我们后端的一些模板语言呢，也都大同小异，所以如果你啊了解后端的模板语言，比如说GS啊等等这些语言的一些便利语法的话，那么大家很容易呢就能够理解这个里面的一些语法规则。

好，然后接下来呢，我们在便利的过程当中，每一个课程都给他设置了一个事件，这个事件呢，是我们前面在有的入门课程当中，我简单的给大家介绍过，对吧？啊，它是一个点击事件，当我点击这个课程的时候，那么呢，它会调用一个selectem方法，并且呢，把当前的这个课程的ID呢进去，那我们来找一下这个select item方法。所以这面呢，就定义了一个select item，然后传入了一个课程ID，并且呢，这面我们将传入的课程ID呢，给当前页面当中的这个数据里面的ID这个。

那么我们的呢，就是在这个地方定义的，所以呢，当前的这个订单信息呢，有两个基本信息，一个呢，就是我们刚才选择的商品信息，还有一个呢，就是一会儿我们要选择的支付方式。接下来呢，我们来看啊，刚才这个商品信息这块，我们已经分析完了这个代码，接下来我们看支付方式，支付方式这块呢，有两种，一个是微信支付，一个是支付宝支付，那么我们来看微信支付。我们找到刚才这两种支付方式，这面呢，就是微信支付的支付方式的那个HTML的相关的代码，这块呢，就是支付宝支付的HTML相关的代码，那么当我们点击微信支付的时候，就相当于呢，响应了这个事件，执行了这个方法，那这个方法呢，传了一个参数叫微信，那我们来找一下select这个方法。

所以在里面呢，我们有一个select，那么就把刚才我们传入的参数呢，就制给了这个对象的属性，所以通过这个选择商品的过程，选择支付方式的过程，那我们里面呢，就有ID和商品ID以及支付方式这样的两个值了。那这两个值有了之后呢，也就是说我们的商品和我们的支付方式已经确认了，我们就可以点击这个确认支付按钮了，那我们再来找一下确认支付按钮。这个呢是我们的确认支付按钮，在确认支付按钮当中呢，我们有两个关键的属性，一个呢是这个按钮是否被禁用，还有一个呢，是这个按钮的点击事件，那么这个按钮如果被禁用的话，这个配b TN disable的，也就是我们在这个地方定义的值啊，配BTNDC报的它的值呢会是true。

如果没有被禁用的话，它的值会是false，所以默认情况下这个按钮呢是没有被禁用的，一旦我们点击了这个按钮，通过click这个调用的to配方法，我们点击了这个按钮，我们会把它的值呢设置为true，那我们来找一下这个to配方法。好，这是我们这个里面的第三个方法，图配禁用按钮的目的呢，是防止重复提交。紧接着下面这块就是判断一下当前用户选择的这个pay是否是微信支付，那么因为前面这块我们通过选择支付方式这块呢，已经给这个payo pay传递了一个值就是微信支付了，所以呢，我们如果点击微信支付的话，它就会走刚才我们的这个统一下单接口。

那么同样，如果你选择了支付宝支付的话，那刚才这个二维码呢，就不会展示出来了。那这是我们确认支付这个按钮的事件调用。我们再来看一下我们调用事件的时候是怎么调用的呢？当我们选择了微信支付的时候，那我们就调用了微信api.native pay，那么很显然微信API也是和我们刚才的API一样，我们的API这个文件夹当中引进来的一个模块。那么这个里面呢，就有对刚才前面我们写的这个远程接口的调用，那么我们来看一下这个远程接口的地址哈。它和我们之前写的这个。程的地址，你看是不是API信，然后是不是，那我们由此可以看出这个方法呢，就调用了我们的后台接口，并且传递了ID，这个参数使用的呢是post这种请求方式。

那我们再来到index view当中，我们在找到刚才的方法，那这个置就是用刚才的微信配API这个对象了，并且那么这个应果。如果我们整个的这个请求，也就是统一下单成功了的话。那我们前面在接口端返回的这个map集合，就是二维码和订单号就会被通过response。返回到前端，那么在前端的代码当中，我们从response data这个属性里面就可以拿到我们后端封装的code URL和order了。