100-尚硅谷-尚品汇-微信支付业务上

好了各位同学，那咱们呢，刚刚呢，是通过饿了么UI啊，先把它的这个结构它漏出来，是这样的一个弹出框。对吧，那接下来咱们要做的另外一件事就是什么呢。中间你是不是得有个二维码。对不对吧，那二维码怎么做。老师二维码怎么咱们先看返回的这个支付信息当中，你看。返回的这个支付的信息当中，它是有一个字段叫的。远看。就市场。微信苏老师，这是一个什么呀，咱们先看一下。它是个字符串。苏老师，我放地址二德龙，它是不是一个二维码啊。不好意思。诶。有我，他啥也不是。你看嘛，它就是一个字符串啊。

而且最基本的也是得有个常识啊，你看再摁一下子走，你看。我这的这搜。啥也不是。对不，所以你要注意咱们要生成一个什么，生成一个二维码。但是要注意二维码咱能生成二。您可以找一些什么，找一些市场当中常见的一些插件，它是可以生成二维码。不管是iOS开发还是安卓开发。很多。这种移动端或者是PC端开发，因为他们也是属于前端方向。它们都有，这个函数叫Q。它是可以生成二维码，这里老师呢也说一下。咱们接下来要做的一件事是什么呢？是他。来这老师一遍就是二维码那个啥呀，剩下。咱们需要用到一个小小的一个函数，叫做Q。咱们要去找一下，当然你去找是最好的，但是咱们这个网也知道。

很难，去哪找？因为你最终下来是从下来。对吧，所以说咱们去算一下，这个小插件叫Q，它可以生成二维码。看一下这是怎么爱的魔力转圈圈的。去找一下，算一下NPM。就是他了。对不，你看。来搜一下叫QR。Cold。有没有？有吧，说老师哪个是第二？看是不是好像是。来点进去看一下。那所以它的每周的下载量，你可以看大概是多少个十百千万，十万四十多万，说不多说少他多少对吧，每40万。

那当然在咱们的项目当中有这个差价没有，就是一会儿咱们得的。地安对不？那当然安，很简单，咱们主要是看它怎么用。第一步是不是在教你在呢？完之后咱们先看看啊，第一种用法看这。老说你凡是这种用法。不是啊，哎，这他这是出现了谁。就是今天老师会给你们讲讲卡。当然他这种写法是不是在静态页面当中，一咱们不是咱们是不在主线是我块式开发。当然这种方式咱们不要再往底看。记住。页面当中有个标签，完了GS里边这么写。也不是的啊，咱们再找。在no g当中这么写。他也不是，这是ES无效。那咱们再往前上。

你得知道咱们现在写的是E是六。ES6的这种情况。对不，那当然咱们现在看能看懂，看懂没关系，但是咱最基本是不是得先有这个包。那咱们呢，先把这个包你先给他打的下一下，因为咱们没没有你给。所以说咱们给他按一下。搞一下啊。Stop问I加C2X加CNPM因哎，这不有了吗？这不就它对吧？这换成这cn PM install他告谁CI下。那接下来呢，咱们就看一下它怎么用来看这啊。看这咱们刚刚也找到了他用的一个位置，咱们这块得琢磨琢磨，第一件事，在你的组件当中要不要用这个依赖包。要你是唯一。引，那咱就直接找一个。直接给他。完了吧，叫直接给他带走。

在咱们的组建当中，咱是不是要用。诶，那咱演一下这他。接下来就是看怎么用看啊，大家看一下看。它暴露的是一个对象，对象的身上有个叫to date u这个方法，我问你这个方法反的是一个什么？一定是信不信。为啥点三点开始。对不，那当然这种写法也可以，那咱们经常用的是不是也有这种think？对吧，但你发发现不管它两者哪种情，是不是都是有这个对象打点这个方法传一个字符串会返回一个啥呢。Promise。你要走到前面是不是away，或者你看这这明显是不是一个黄意。所以说咱们先测试老师，你在什么什么地儿上传二维码，我说你说一点。一点那个按钮是不是在那个open里。对不对，对吧，那所以说咱们先找到哪到这。

咱先尝试一下它生成一个啥。二维码来看没有。就是生。成。生成啊生成。二维码，那咱看他用的是不是叫QR。扣的点凸什么玩意。突突突，啥玩意啊，To date URL，你会发现它里面是不是有传参。他传的是一个就是一个地址。就是支付当中那个。就那个叫什么什么微信。什么什么URL。他是需要传的啊，这这不是，这是看着咱们找一下，你看他是不是需要这个东西，他是一个是微信，说白后来给咱一个字符串。说白是不是一个字符串，那咱们就给它传起来，你看这个这字呢叫这点。Info点后的。

老师问你啊。咱了一个字符串，这个字符串说白了就是你看跟谁有关系。再找一下哪去了。诶，怎么没了呢。好家伙，幺三七三四五六七八九十十一走123456走。希望咱运气好一点，这次一次都给的成功。买一个小米。第二页第二页没啥是吧。买个它吧，试一下。喂。买十个。走。这谁呀，这是。你杀了？走走结算给谁买李四？信息123。走。哎，过来对吧，你看现在老师你一点，老师说你说他反的是一个什么鬼。

哎，咱去看这你看这你这说是一个字符串。这没问题吧，通过这个字块咱是不是进来了，你看他房子一定是个。排里，你行。你看咱可以看下，你看他反回是不是一个跑米light个啥在咱打印一下。你看嘛，cons.log一个谁，你自己看是不是一个promise。来看这啊。是不是？对不？高老说你，咱是要毫米子不是吧？是不是得等待他成功的结果？所以这咱得来个啥week？Awa，这是等于啥？你看这个反回来是个什么鬼，你再看。走，这是啥？地址啊，你点击你自己看。啊，朋友们说白了是不是可以把一个字符串。

转化为啥？一个二维码说白是不是就是把一个字符转化成二维码。今天那个字符串，谁是咱们那个老师的那个。他们自己的一个。就是后台老师那个微信的那个，动不动就是你要花钱的那个地儿啊，哎，但是你看你自己一点是你的二维码。这个地址是不是一个二维码，那说白就是就是图片的。Hay。这能懂不？能懂。啊，所以说咱这比较。URL其实生成的是二维码或啥？地址。妈妈说你，你说生成这个二维码，老师问你要在哪展示。你是不是要再找A？啊，底下再发啥呢。这咱在打水道，你是不是要在咱的这个弹出框的中间这一部分是不要展示。你这地址都有了，你就展示呗。

你看老师看老师，老师给你给看，你看这样可以放啥。丢几啊，当然这这块不叫at，这叫请你。请你微信支付，看这就中间那个字。等会给他干两下样，是不是叫请你微信。对不，你中间这部分是不是要显示个二维码，很简单。其实就是。你这就不能让他用咱换啥。但是你要你要注意啊，你里面放个一妹纸，你的src是不是要插变量。对不对，你在写啥？是模板字符串啊。对不对，因为你里面是不是插这个URL是变量。再来呗，走。走，这来啥？Src等于啥？是。对不？对，但是有一个细节你看啊。老师说你这个反斜杠跟这大是不是连着。

你看。我说转不转移，他不处理了。你看这个小反斜杠和这个不留空格。懂不，也就说你语法必须要严格一些。对，总共啊，这一定要要他是不是就来了。那接下来的问题就简单了，这玩意儿我告诉你是谁，是咱是咱老师的。微信的二维码。就是你现在想接你要。你说咱正常人见到二维码是不是偷手机扫？但老说你。用户少，他可能成功。也可能失败。如果成功，你是不是要跳？如果失败。你是不是得提示一下是不是败？那老师问你啊。你说咱支付的这件事儿，成功与失败是谁给他返回？

互谈，你说要咋的？发请求，那你要明白，这个只能发一次就完事了。得琢磨。咱咱你看这样，你咱得先就现在我老说你支付的二维码是已经有了。那老师你你在这的业务，我问你是不是得做一件啥事。你得将来你得知道。就说你将来需要知道支付。成功或者是失败。对不？那如果支付成功，你要干什么？你是不跳人？是不是路由的。路由到跳转，那如果失败。你什么提示信息呀。就这能想通，但是现在现在很迫在眉睫的一个问题是，我怎么才能知道他不成功是？

老师就举个例子，你说最终钱是谁说了算，是不是在后台那捅？那你说用户支付成功与失败谁知道？后台你要不要向他发起？但你要明白，这个请求发一次就完事了。你得想明白。就一点这个这个弹弹出光出来了，发一次情就完事了。举个例子，我先这么一点。我这个手机欠费了，我过了俩点手续费才出来。那两个小时之后我支付，我们是菜场。这能理解老师的意思吗？那就说你这个请的翻译是对吗？啥求？就是你要获取到啥？他支付的情况是成功还是失败。举个例子，我现在。我一点击它，是不是弹出它。说老师我发一次请求就完事了，完我获取到支付成功是不就完事了。

不可能啊。举个例子，那假如说老师这个二维码出来了，我手机欠费了，我三年之后我才扫的才成功。那老师你是不是在一直在问服务器，他有没有支付成功。支付成功干什么？支付失败干什么？昨晚是不是这么回事？虽然你这块要想明白一件事，什么事咱们需要获取支付成功与失败的信息，但是你要注意这个情况只发一次吗？不是。你是需要常允许，就是一直发进去。你得一直向胡奇问他有没有成功？这能想通吗？你想咱的A就是咱的请求，咱应该知道请求。是长回去还是短回去？啊，咱比如长还短一些，就是那个咱应该对HTP请求老师问你，一般比如这行代码执行一次我问你。

请求只发几次？一次一次过后写完之后是就不再发了。但你要想明白一件事，什么事咱将来得向夫妻问他支付成功与失败。那我问你，你是不是要一直。为啥？因为到底殖民支付这个行为是谁用功？对不对。这能懂不能吧，但是你先别管别的，那老师问你，你说支付成功与失败，我问你后台是不是要给他返回，一个是你是不是得发请求。后台是不是得返回一些支付的结果，是成功还是失败？那所以说你看啊，其实这里的做法有几种，有好多种。咱们先说这种，你看它有一个接口是可以查询审核。看这它有一个接口，是可以查询你这次订单支付的啥结果。找一下。这儿。查询支付订单状态，你看你要带着谁？

是不，这次的订单ID发是不是可以获取到你。支付的情况。是支付支付失败，支付成功状态是可以拿到。这能懂吗？那所以说老师你要不要写接口，要那你这还在哪。接水器API。对不，所以说你回到回到咱的这个API当中，你还得写一个口什么口。获取了。获取支付。获取支付订单状态。订单上状态，他可能成功。可能正在支付，也可能支付失败，比如说钱包钱不够。对不，所以咱叫X跑，咱先把这个YL给放这。这是URL。这是他什么请求？Get，那咱就来吧，叫export cost，叫req，啥呢？叫pay state sta老师问这个单词见不见？

学小学那个叉MLP的时候是不是见过就绪状态？状态对吧，那老师你要不要带，要带这order ID，那咱是不是得发请求request，那这玩意URL。当然这模板这块是不是把这拉过来。当然你把它给它往里放，那这你得点什当然。那这再加谁。为什么请求为get？那也就是说，当你的这个弹出框。一弹出来你就得一直下去。一直向后台。找刚刚那个机构一直要问的时候。支付的啥情况？这能懂不？第六注意啊，是要一直问。为啥呢？你就举个例子，现在这个这个弹出层，弹出框是不是已经弹出来了。

对不对，举个例子，我夏老师跟你聊天。我一直聊，我聊了半个点儿，我才想起支付。那你是不是作为你的，你这个代码是不是要一直向问为什么。有没有支付，有没有支付，有没有支付，有没支付，支付完了，支付失败再对不对，对吧，那所以说你看这。那也就是说咱回到图片这，比如说当你的这个二维码一展示出来，你要做一件事啥事。常轮许，什么叫长轮许？咱们得知道HT是短允许电。什么叫短允许？发一次。响应一次完事了，什么叫长规矩？找链接对。做完就一直放对吧，那所以说你这要咋就得来个定时器。对不对，对吧，而且定时器你们应该知道定时器它恶不恶心。我信，该清的时候，你必须得给我清，清个明明白白。

对不对，对吧，所以说呢，将来你说老师在这来个我来个啥，来个开门，我不知道你们都能理解，开门公道，就他将来接受那个计算器，到时候清的时候说找这个总监要就行了。再到高那吧，那你这块就可以判断怎么判断，就是如果如果啥。你的face time，没有没有，你要干啥？开启一个什么定时器。你说这这也能看懂吧。比如说定时器没有老师要咋的开启一个新的呀。定时器，那这就怎么办？这点。Timer老师为什么要用this timer接收？将来我有可能要清，因为就像如果支付成功了，你是不是把清了。对不对吧，那怎么办。银头。是不是有相应的回调，那接下来的问题是老师多长时间发一次？

看你的，看你的情况，一秒够不够。光荣的你别到时候给我整一毫秒。那像一，我发1000次，一一次够了。够了对不，那你这块就可以怎么办了，我说。是不是就一直发起，就问他支付的情况，那这是不是就可以发啥，发请求获取啥。获取。获取用户支付的状态。因为他有可能成功，有可能正在支付，有可能支付失败。对不，这玩意你该怎么找？This点儿Dollar API点黄了。这啥玩意？叫IQPS，当然你是代ID。对不，那点它带着ID是谁，这点order ID。当然，你是不是他法律上是不promise，你得接受他成功的结果。

你这为模拟这样邪恶性。是不是这个是不是这个回调。对不？那咱接受一下他返回的啥结果。赖谁？Result。那咱这里先别着急，咱先咋的。打印一下。来看这儿啊。走，看着。先说明你发请求了。你这一出来你看。我看见。是不是一直在发请求，他一直在问为啥？支付。2050支付中。对不？啊。这两种。那你看，假如说老师真的支付了，你看。你看一下啊。

完事了吗？支付成功了。对呀，但老说你主要想要。支付成功，我问你支付成功与与别的有没有区别，就说代码12。对不对啊，大家说老师怎么比较咱们一起呢。如果你状态二代支付，你就说这。重要。对不？举个例子，将来你点这到底跳不跳转取决于什么？这是咱现在这玩意你点不点就加一点，假如你支付成功，你点。直接在跳。但是取决于你的是不是多少。给他讲通。所以说如果支付拿到我问你，他有可能成功失败，你得干啥呢，很多。比如说，如果你的扣子等于多少？200个这个代表啥？你如果你的不是如果你的。

点。是的，如果你的你你你。哎，这个想法很对，你还没有先过说老师跳路鱼跳路油之前，是不是还有很多事要第一个定器要清。对不对，你看嘛。你如果支付成功了，那我说你啊，咱虽然现在没想你支付成功了，我问你一件事，定期是不是得清。对不？第二这玩意儿你得。槽了。这玩意得隐藏啊。因为他的资金是很大的，你去跳下一步他也会在那进行展示。对不，它的隐藏第三个。我问你，就是这个扣的200。重要，因为举例在别地可能会会可能如果你在这儿，我就点支付成功，一直不成功，你什么时候支付成功。空等等。

对不，所以咱们一个做第一个，这个可能想不到，但是这块一定要注意，第一个你要干什么，第一步。这个你能想清楚啥？定时器怎么听clear interval，谁、this paper以及把this点。智慧上老。这以前写过吗？第二步应该。你要保存什么，保存你支付成功。返回的上扣。扣的如果是200，他一定是支付成功，就举个例子，咱现在是一扫，就假如说我将来咋的。我点，就比如说我点了支付成功，假如我没支付，你就直接挑。我不知道你能不能理解，老师就举个例子，现在假如是扫码是直接跳，那将来我没扫码。我就点那个已支付成功。我就直接听了。不可能吧？你是不是得判断啊，你得判断啥，你要判断你这个扣子等等于多少，200 200是不是往那边跳。

这能想通不？所以说你这还得存一样东西。谁空？这种分共所扣的这你该存存哪，是不是存这。这是咱来就是要支付的那个啥。支付的状态吧。状态上马后的起始为己为己封串。将来如果支付成功了，你把它变成多少？就200这条Co等于谁？造点。除此之外，他也是要走。也是要啥？把这个弹出侧。大框，你要给他干？你不隐藏，你跳到下一步，它还是有。OK吗？那怎么？怎么关呢？这老师说一下，你看API也行，老师直接写了好吧，就关你谁。

关闭咱们的弹出框。这点Dollar咱还记得，咱咱时是有一个Dollar叫message box。不就俩吗？你叫book，叫alert，你把message box.close关闭。的API。OK吗？大家关闭这个探测框。那如果这事你都做了，我说你来。你说跳跳哪去？支付成功。说下一。但是下周再写。没有了吧，那所以说咱咱先向他跳咋的，是不是跳转到下一页。路由叫支付成功，这点Dollar。root.push我push叫杠。呸。当然这个路由咱有啊，没有没有咱先咋的。是一个，所以说把咱们支付成功的这个录入组件，咱也给他捞过来找一下。

看哪了？说这叫配success，咱给他注册一下。回到咱们的这个项目当中，咱找一下咱的。是不这那一样，咱给他起注册一下路由。陆游找谁？Root是不在这。这咱也拿一个。就是也。Hot叫pays for。爱的杠，Views下的是他。给他拉过来。那还有什么呢？还有这那这你是不得写一个，这咱就直接打的。复制也是一级路由，当然咱今天也要练习一下二级路由。二级路由估计是不是全忘了。配sus，那这是是不是就是这个配什么什么这个size。

咱们自己先悄悄测试一下，看有没有懂吗？这叫啥配Su，就它有没有。对吧，好，那咱回手重新测试。OK吗？今晚你点测试。走，老师，买一个小米还是他？晚上。走就加。我杀的。他买十扫过来，前面是不是也买了是吧，那再买小米，小米现在反正能跳过。买俩。走。科结算老师给谁买的？给张换李四？来一个叫亲爱的。走，没问题吧。没问题吧，看这啊。立即支付。现在老师问你。有没有一直在问成功？有你看啊，再扫一下。得费钱了。

一分钱。1:1应该是你看结果成功过来。对不？电脑想偷？能不能小朋可以吧啊，但是你要注意一件事，老师为什么要存那个扣，举个例子，我再买一个。买谁呢？买糖没土是吧？走，老师就会拍卖小明拍他。这能买是吧，看到还有一种情况是啥，就现在老师一支付成功是不是就OK了，能跳，但你要注意件事什么事，假如说我现在还没支付呢。我问你，我现在没说话。就有一些用户，他就认为我先不走，我就我就直接点。一支付成功，我就直接跳。不可能吧，你连支付都没支付呢，你怎么能跳？甚至说老师为什么要存储那个扣呢？防止他还没扫先先法。先点。这能懂？

我再说一遍，啥一读老师为什么要在这存储谁？存储这个扣的防止什么？防止他还没扫呢，一看，哎，这不有个已支付成功吗？我就点了点了八直接跳空。你是不是得判断判断啥，如果你点你确实我，你去如果真止付我，你这扣是多少。二百一是200，我是才能让你跳过去。就像你钱都没花，我让你过去。休想。对不对。这能理解，不那么啊。能不能？老板好。老师也挺想。