127-尚硅谷-尚医通-前台用户系统-微信登录-生成微信二维码-前端整合

各位大家好，刚才呢，我们完成了生成微信扫描二维码，返回二维码，需要相关参数的接口，那咱们下面呢，先通过swa把这接口先完成测试，测试之后我们再来整合前端页面，在前端页面中显示二维码，那咱下面来测试一下，首先我把这个服务给它先重新启动起来。我们等它先完成启动，现在我这个user，它这样的端口号应该是这个8203，所以咱们通过8203的swa来测试一下，看一下接口的效果是什么样的，这个接口比较简单，它就是返回相关的参数，那我们来试一下啊，我在里面写一下。Local host。8203加上swa。

杠Uy.HTML咱们进行访问，找到刚才咱们编写这个接口，应该就是啊这个接口然后在里边呢，现在我进行访问，然后大家看目前的参数是不是都返回了，包括ID scope，重境项的地址，以及里边这个set主要是上面几个值，所以这个接口我们就完成测试，然后完成测试之后，下面咱开始整合它的前端页面，那我们来写一下啊，首先第一部分呢，因为咱要调接口，所以我在这个前端中先把咱们调到接口在里边先完成定义。我在API中给它建个文件，咱们叫微信点JS，然后微信点JS里边把接口的路径，我从这个里边给它推过去。咱们的名字就是刚才看到的这个名字，APIU3微信，然后下面加上咱们接口的名称。

和这个叫get login。把这给头说过来，然后这个方法我也叫get log p，它的提交方式就是一个get提交，所以这个咱就完成定义，然后完成定义之后咱们在买head中把它引入进去。我们加个import微信API from加上路径。艾特斜杠A片。微信这样的话，那就完成了，然后完成之后呢，在页面中怎么做呢？刚才给大家分析过，首先因为咱是弹出框显示二维码，所以咱的第一步呢，就先把JS文件先引入进去，然后来初始化对象调用接口传入它的参数，那引入文件呢，我们可以用原始方式直接用标签引入，或者说我们可以这么来做，我就用这种方式把这文件引入进去。那这怎么做呢？咱们找到了一个方法，叫wanted。

Mount咱们说过是不是在页面渲染之后执行了，然后在mount中大家看我写了这么条代码，然后代码什么意思呢？你看啊，第一行用盗墓对象建个标签script。然后包括在里面写入内容，这是tag属性，这是SRCSRC里边的，就是咱们那个微信log JS文件，然后把它加到包的下边，也就是在包D下面加上这么一个文件，然后里边引入它的相关内容啊，所以这是我们写的里边的第一部分。然后这个写完之后呢，咱们下面在里边就来初始化一下这个对象，然后大家看怎么做啊，来往上看，因为咱们要做的话，就是我一点击里边的就是这个按钮，是不是就是进入到那个页面，所以咱们找到里边的这个按钮位置应该是在上面的。

是不是这个地方，比如我们点这个微信log in，它就会触发事件调样方法，然后在微信log in中，咱们看是这里边，所以在这里边的那就初始化对象，而初始化对象就是咱们在课件中写到的里边的这个地方。但是各位再看一下，或者说你通过它的官方文档也能看到，就这句话溜上一个微信捞印，然后里边创口参数，那我现在把这个内容给各位就说过来，咱们在这个微信捞印中来写示内容，但是内容中呢，因为咱们要调用接口，调到它的参数，所以我这里边给大家写下。就是初始化。微信。相关的参数，然后咱们调这个微信A片里边这个方法，因为微信A片是我刚才写的里边的就是这个名字啊，咱网上找一下就是这里。

微信被骗。然后现在我把它就是拿到下边来，咱们做一个调用啊。我们找到刚才那个方法啊，在这里微信API点上里面这个叫get login time。然后这里边呢，它应该是不需要什么特别参数，咱们加上一个。点赞，然后点赞中加上一个response。箭头函数通过response到它里边的就内容，然后在response中咱就new上这个微信lo，我把这段代码给各位直接附过来，就是课件中文档中写到就是微信官方约定好的代码，然后代码中咱们看到啊new上一个微信捞。然后里边首先第一个DD呢，就是你显示二维码那个容器的ID，因为咱们二维码呢，要显示到我们的这个地方。

咱找一下啊，应该是在上面的。这个位置你看这ID是不是叫微信log in啊，在这边显示，所以咱的值就写它，然后第二个从我们的棒中得到这个a pd，得到这个sot so，还有这个re uri，还有这个set，比如咱们传入里边的这个纸啊，咱们叫这个名字。下划线。改成我们的。这个名字，然后最终这些值就得到了，得到之后呢，现在这个微信二维码在我们的页面中就能够进行显示，所以咱们现在就完成了前端的整合，就是里边这个过程，那完成之后呢，咱们下面可以把它做测试，看一下目前的效果到底是怎么样的，那我们来测试一下啊，来我们来看一下。

我们现在呢，打开浏览器，在浏览器中呢，点击登录注册，是不是弹出一个登录框，然后在里边呢，我们点击这个按钮，它正确应该会显示二维码，比如大家看我现在点一下，你发现二维码是没有出来呀，那咱看什么问题啊，我把F12点开，我们再来试一下啊，看它为什么没有出来。比如现在我把这个给它先关掉，然后我再打开。打开之后我点击这个按钮。然后大家看啊，这里边告明错误是什么，是不是404说这个没有找到，那咱看一下他为什么没有找到，看一下问题啊，因为这个过程中呢，第一个路径我们应该没记错，因为刚才我是复制了，而它首先肯定经过网关，所以咱到网关中找一下看，它是网关中没有做配置。

我们来排查一下啊。然后呢，大家看啊。我这类名字叫A片U3特微信，而我这个位置好像没有配置这个东西吧，所以他没有找到，那咱给他再配置一个啊，因为之前我们叫这个user，现在给它换成另外一个路径名字，我们再加一个规则，就这个我们写个四。这个啊，给他加一下。我们是第四个。然后这个是service。右。这里边是优桑。然后下面名字我们叫U3头。把这个复制过来，你刚才是这个没有配置，然后这个写完之后，咱们把这个网关重新启动一下，最终我们再做个测试。我们等他先请起来。包括U给它也是重新启动一下。

好，各位看，目前都行起来了，然后咱们现在来到这个页面中，我们再重新测试，点击登录注册，进入到这个登录团购页面，然后我点击按钮，大家看微信扫描二维码是不是就显示出来了，所以咱就完成了第一步生成微信扫描二维码，包括大家看啊下面写一个名字，是不是叫我的鼓励就就是我们申请那个应用名称，所以咱们现在就完成了微信登录的第一部分。然后这个完成之后呢，咱们下面做什么呢？各位应该能想到啊，当我现在微信是不是要扫这二维码呀，而我扫完之后他怎么做，微信那端会回调咱的方法，然后咱在方法中会得到扫码人的信息，把信息加到数据库中，这过程中然后微信要给他绑定一个手机号，最终完成操作。

所以咱们马上就做这个接口，获取扫码人的信息，包括在页面中完成它最终的准备过程，所以目前完成的第一步生成扫描的二维码。