37-尚硅谷-微信支付-基础支付APIv3-Native下单-前端支付二维码的展示

在前面的课程当中呢，我们了解到我们在前端通过阿贾克斯调用调用了我们的native下单接口，并且呢从接口当中返回了一个code的URL，那么这个code的URL呢，就是我们要展示二维码的链接地址，那么这个链接地址是如何展示在我们的弹窗当中，并且以二维码的形式展示出来的呢？接下来呢，我们就来具体的分析一下，首先我们先来看一看弹窗是怎么实现的，那么在我们的确认支付这个按钮当中。有一个属性的设置，那这个属性的设置呢，就是二维码弹窗的是否显示属性叫code dial visible。我们是在。贝塔这个位置定义的，那么这个code diible在页面当中。我们用在了dialogue这个组件当中，Dialo组件呢有一个visible属性，Visible属性呢绑定了刚才我们的code dialo visible这个值，这个值如果是的话，我们的弹窗就会显示出来，这个值如果是false的话，我们的弹窗呢就不会显示出来，或者呢会被关闭掉。那么所以。

在我们点击。确认支付按钮的时候，我们把原本关闭的弹窗展示了出来，所以呢，就有了这样的一个展示弹窗的效果。好，接下来呢，我们来看一下二维码是怎么在弹窗中展示出来的，那么说到二维码的展示呢，在view当中呢，我们是需要引入一个第三方的模块的，那么我们需要打开我们的package Jason，你会发现在这个里面我们已经是先引入了一个第三方的模块，这个模块呢，就是专门用于展示二维码的。那么当前的这个文件呢，有点类似于我们Java当中项目当中的泡沫文件，所以呢，这个dependence节点呢，就配置了我们项目当中的所有的依赖的模块。

我们在我们的项目的源代码当中有一个javascript的入口文件，点JS在javascript的入口文件当中。将刚才我们的package点儿Jason当中配置进来的二维码组件进行了一个引入，那么通过这种方式引入了这个二维码组件之后呢，在我们的页面之中，我们就可以通过这样的一个HTML标签的形式去显示我们的二维码了，那么具体的显示方式呢，就是把刚才得到的扣的URL的值复制给它的Y流属性就可以了。那么在弹窗显示出来的同时，这个二维码呢，也会被这个组件渲染出来。这节课的最后呢，我们再补充一个内容，当我们点击确认支付的时候，我们的应用程序呢，展示二维码。

那么展示完二维码之后呢，你会发现我们的应用程序呢，会接连不断的去弹出一些错误提示哈，那这个错误提示呢，是因为当展示完二维码的时候，我们的应用程序呢，会等待用户扫码，那在这个过程当中呢，因为没有办法判断用户究竟什么时候扫码，所以呢，后台我们有一个定时任务，会去不断的去查询用户的支付是否已经完成了，那么现在呢，因为我们还没有去开发我们的查询订单的接口，所以这个地方呢，就会啊，接连不断的定时的产生一个错误信息，那所以目前为止呢，大家可以先暂时把这个定时器呢给他屏蔽掉，那么它呢，是在我们的src。Index，点这个页面当中，我们可以在第大约100多行的这个位置呢，找到这个定时器呢。CTRL加斜线CTRLS啊把它屏蔽掉，屏蔽完成之后呢，如果你是在Vs code当中进行代码的查看，并且呢，这个前端项目已经启动的话，那么整个的Vs code的开发环境呢，会对我们的应用程序进行自动的编译和重新的执行，也就是说会对我们的前端应用程序进行自动的编译和重新的执行，那这样的话呢，我们的定时器呢，就暂时的屏蔽掉了，然后呢，我们在这面刷新一下我们的应用程序，那我们再点击确认支付，这个时候弹出二维码之后呢。

就不会接二连三的弹出错误提示了，所以呢，我们临时先把这个定时器呢给它关闭掉。