05. 尚硅谷_mpVue_主页面交互功能完成.avi原创

好，咱们接着上课，那么上节课呢，我们把这个主页面的这个静态页页面呢，已经写完了，那么这节课呢，我们还是要去动态的去获取用户登录的信息，然后呢，展现给用户，哎展现给用户，那这些东西呢，倒是不难，倒是不难，因为呢，我们写过一次，呃，但是呢，在这儿呢，要注意现在呢，我们是使用VGS去开发什么。小程序一定要注意我们书写的位置。哎，首先呢，获取用户登录的信息，这个大家还记不记得用哪个方法呀？啊，注意你现在想去干一件事情，哎，还记不记得我之前给大家说过，当你想去使用某个功能的时候，找这三个里面的哪一个呢？哎，对，是不是要找这个API啊，那API这一块呢，它有很多的这个微信给我们提供的API供我们去使用，那这里呢，有个开放接口，这诶其中有一个叫get your info，那它呢，是不可以获取用户的信息啊好，那这个API我们并不陌生。

那关键是这个API我们要写在哪里呢？之前我们在原生的小程序，咱是不写在load的，哎，那个生小程序页面的生命周期回调里边，呃，首先我给大家证明一个事情。它是叫什么叫onload对吧？OK，把它写上来，我们去呢，打印一下这个onload。嗯，再加一个on load，然后呢，这个是小程序的生命周期对吧？那其实呢，在我们里面有什么，有before mount，还有什么有mounted对吧？这是我们哎，View里边组建生命周期的回调，那在这呢，我们我会把这个粘过来吧，这儿也不要写了，然后呢，把里边这个给它替换一下，来替换一下，那这个时候我CTRLS保存一下来到这一块，我们可以看一下这三个回调是不是都执行了呀。

哎，那正好是响应，我上来就给大家说的，就是在map view里边，它既有view组件的生命周期，同时呢也支持小程序页面的生命周期函数。只不过是，哎，只不过是在这儿我给大家写了几个这个注意事项，你们完了去看一下，那在生命周期这一块的话，这儿呢，也给大家列出来了啊，也列出来了，这不是这小程序的生命周期，哎，只不过是注意一下，我这儿给你们标红的，哎标红的东西就是说除特殊情况以外呢，不建议使用小程序的生命周期，哎，钩子函数。

哎，这怎么会有一个空格。这个大家能懂吧，好，那也就是说我们尽量是不在这些生命周期函数里边去写呀，而你现在是要获取用户的那个信息展现给用户，那是不是越早越好呀，所以呢，我会选择在哪在before mount，在这个钩子函数里边去获取用户的登录信息，哎，我们在这写一下获取用户登录信息用到的API呢，叫微信，哎然后呢，是get user info没问题，那在这里边呢，这个方法呢，我们，哎是不是直接有一个叫哎，Success。那这是成功的回调，对吧，因为待会我们要去做一些事情，哎，修改一些状态，所以呢，我在这儿什么用箭头函数了呀，哎，用介头函数了，OK，那首先呢，在这儿是不是有个data塔，然后呢，如果是能拿到的话，我们是不是能打印一下它，当然了，如果说你失败的话，是不是还有失败的回调，那我直接在这儿，哎，获取失败。

没有问题，好，那这个时候呢，我们来看一下。哎，这有个打印，那这不用说，这是不是已经拿到了，我登我这个微信登录的一些信息啊。没有问题，那这种情况是属于什么情况呢？我想问一下大家，他上来默认就能拿到吗？哎，上来直接拿到用户的信息，这种逻辑本身就是不对的，因为用户登录的信息属于敏感信息，你是不是应该先去征求一下人家的同意啊，也就是说上来你应该是拿不到他的信息才对，哎，为什么会出现这样，是不是因为我之前授权过呀？哎，在这儿呢，有个缓存，我点击一下清除这个授权缓存，那接下来我们重新编译一下。

OK，他是不是就拿不到了呀，哎，拿不到是不是走的是获取失败，哎这个失败的回调呀，OK，哎，那其实走这个的话，我们不关心他啊，不关心他，那重点是他没有进来到这儿。对吧，哎没有进来到这儿，那如果是进来到这儿怎么办呢？我们是不是哎要初始化一个数据，然后显示在页面上呀，哎，注意现在在view里面数据是不是应该初始化在这儿，比如说我来个比如说INF对象上来，假如说为空对象。对吧，哎上来呢为空对象，那当我们拿到了以后，我是不是要在这儿去修改它的状态就完了，那现在这种情况，你说能拿到他那个哎数据吗。

拿不到，哎拿不到，那这个时候呢，哎，我们要做一些事情，是不是要出现一个弹框，是提示用户，你是否允许获取那个信息呀，还记不记得怎么整出那个弹框呀。哎，使用一个button，那这个时候我就要说一下，哎，这个button呢，是人家小程序提供的button，因为呢，在这里边我们要用到它一个属性，是不是叫open type啊，这叫get什么user INF来可能有的同学忘了来，我们去找一下小程序给我们提供一个组件叫什么来着。点击一下组件在这儿button button下边呢，它有一个东西叫什么叫open type。对吧，其中这是不是有get your in。没有问题，然后呢，他说。获取用户信息是不可以从这个回调中获取用户信息啊，啊这个我们说过OK，我先把它贴过来啊，把它贴过来我们之前这样写是没有问题，然后呢，后边这你比如我就写个get you in这回调，但是你想一下啊，这个BY是不是在原生小程序里面用于绑定事件的。

但我们现在是在有GS里面啊。好，来大家回想一下，在VGS中我们如何去绑定世界。啊。哎，其实我们VU里边呢，有很多种方式，可能会这样，哎，最原始的你把V杠对吧，On冒号，那这种方法是不是，哎写起来比较麻烦啊，或者说什么veg by，但是呢，后来提供了一种简单的方式，是不是使用的是at呀，注意在这儿呢，不需要BY了，你直接把它换成什么at就OK，哎就OK。

好，那么这个回调呢，我们已经绑定完毕了，关键是这个方法呢，现在我要放到哪里。我是能直接放到外面吗？哎，有同学想到了，那在view里边是不是有个method这个配置选项，在这里边是不是统一范文的什么？哎，世界的回调。对吧，哎，统一放世界的回调，OK，那在这呢，这是不是有一个data，然后呢，我去conslo这个data我们来看。好，那这个button这咱是不还应该给人家一个。信息呀，这是点击获取用户登录的。信息啊。这个太长了，我们就获取用户信息吧，OK，来刷新一下，这是不是多了一个button啊，多了一个button，那上来没有授权，所以走的这个，但是我一点击这个button，这儿是不是出现一个授权弹窗啊，注意点这两个是不是不一样啊，我们来看我点击拒绝，他给我返回的信息是这个，还记不记得我们之前对比是不是在map下面有个detail，那这个detail现在里边是不是只有一个错误的字符串？

大家看我再点击一个允许的话，我们来看。还是找到这个map，找到detail，那这个时候呢，除了那些呢，这是不是还有个肉data，哎肉data，所以呢，我们在这要去判断用户点击的是否是允许啊。怎么判断来着，哎。在这儿呢，是哎判断。用户是否授权if，如果说中的map下边的下边的什么。啊，有个叫肉哎塔对吧，肉德塔我们看。

呃，再确认一下是不是他肉塔，那这个选项呢，是在哪呢。嗯，这不是啊，这是上面那个啊，现在已经出不来了，应该是没啥问题，如果说他为处说明用户是不是授权呀，哎，他为错呢，说明用户授权，OK，那用户授权了以后要干什么事情呢。嗯。用户授权了以后，我们是不是要重新去拿一次哎。这些东西啊，重新去拿一次这些东西。没问题吧？OK，那重新去拿这个的话，我们可以干一件什么事情呢？嗯，然后呢，我们是不是可以去干嘛，我们可以去，呃，你比如说我们可以去分装一个函数，对吧？哎，分装一个函数，那这个时候呢，我们。

在这儿是不是要再去定义函数，哎，这个呢，专门去用来干嘛，去获取用户登录信息，哎，我们怎么去写呢？比如说我们写个handler get。U in for，那这个方法呢，比较单纯，这里面就干这些事情，然后首先这个方法是不是应该在这去调用一次啊。没有问题，哎，在这儿呢，应该去调用一次，OK，那在这去调用。调用的话呢，呃，我们还应该做一个什么事事情啊，首先上来调用一次，是不是有可能拿不到，那如果说用户授权的话啊，如果说用户授权的话，我们在这儿是不是还应该再去调用一次，让他再一次去拿那个用户的授权信息呀。

拿到了以后，在这儿我们可以干一件事情，哎这儿呢是更新，哎更新什么呢？更新data中的数据，那就是点userf，就是我们上来在这是不是去初始化了一个，那因为这些呢，不用了，我就给它。干嘛呀？哎，刚刚这个我们放错位置了是吧，应该在这儿，那这个呢，我们也不要了啊，为了不干扰我们这you are in是不是我上来初始化这个它应该等于什么。等于是我们得塔中。这是不是有个data塔没问题吧，啊，或者说这样，我们再看一下这个data塔长什么样，长什么样。现在授权了，来来到这边，这不是我们得塔吗？Data塔咱是不是就要拿这个，所以呢，在这呢，我们可以写z.u in等于点U2IN，这是不是就拿到那个数据了呀，拿也就是我现在唯的实例中是不是有U2INF了，那既然实例中有了U2INFER，那这个U2INFER可以干嘛呢？

哎，是不是应用到我们这个组件里边，那在这儿的话，首先这个图片，哎就不要它了，我们应该是user in for点对吧，点一个什么呢？那这报错就先让他报着我，因为我没写完。点谁呢？是不是A维塔一会啊，当然你在这写的时候，它是个变量，你是不是要让它，哎，强制解析一下，你这个变量还有什么呢？还有这这是不是应该是那个用户的微信名对吧？User in for点应该是叫Nick name，没问题，OK，那这个时候呢，我们来看一下，哎，我的头像也出来了，微信名也出来了，那当我这些东西出来，你说这个东西还要他吗？

不要了，也就是说这个东西和这个是不是二者从其一啊。哎，当我上来没有授权，是不是出来按钮用户一点击完授权这个东西是，哎，这个东西是不是应该关掉再出来这个呀。所以呢，我可以什么啊，可以呢，在这儿去初始化一个变量，比如说A受，或者说我们叫它it is。呃呃，就叫A受吧，上来放，哎这儿呢，表示用户没有授权啊，没有授权，没有授权，这个A售你说哪个应该出来。这个对吧，那在这呢，我用一下VEEVEEA受上来，这个是吧，应该隐藏，那当然了，下面这个就是VE，哎哎，Else，那在这儿呢，他俩是一对，就什么都不需要写好什么都不需要写，那这个时候呢，我们重跑一下啊，我们重跑一下，清除授权，刷新一下。

好上来是不是有了这个button，然后呢，我一点击允许。允许了以后呢，他应该是干嘛呢，应该是去帮我们。重新是吧，刷新一下这个东西，哎，刷新一下这个点handle u INF，这不是相当于是重新拿到这个数据吗？那这边呢，它没有更新，没有更新的话，本质原因是啥呢？大家看咱这个东西是不是出来了，这个东西是不出来了，没有更新的本质原因是你除了更新这个数据以外。你还应该懂这一个东西，是不是要修改这个A受的一个状态啊，把它变为什么，变为处，哎，所以呢，我们在这写一下this.aso等于什么，只有他为触了我那个用户头像是不是才能出来。

来，再跑一遍，清除授权信息B。上来是不是这样，然后走我点拒绝是不是没有啊，然后点击允许。哎，是不就对了呀。好，那这样的话，逻辑我们就跑通了啊，逻辑就跑通了，重点是这个button是不是还是有点丑啊，哎，那这个时候呢，我们可以给这个button特呢，去写一个样式class，我们来个BT。OK，那来到下边，首先点一个BTN，我们去写一下，比如说它是不是也应该有个宽度，比如说在这儿呢，我们给它来个300RPX，好高的话呢，我们也来300RPX，那这个时候呢，圆的话radious应该是150RP的话还是和我们上面那个一样100。

OK，我们来看一下，哎，这是不是就是我这个button的一个样式，哎，Button的样式的话，这少个东西。是不是应该是radio？好，这个按钮呢，已经变成了圆的，然后呢调一下文字的内容，首先呢，我们line he多少300，然后呢，对吧，那这个的话，因为它是300，我们可以给它少一点看一下。没有问题，那字体没有完全显示font size，我们来个。26RPX看一下。点击获取用户信息是不是出来了，走你拒绝没问题，走哎是不是就替换掉了呀？OK，那到这为止呢，我们主页面上面全部的功能呢，已经实现了，好我们先把这个停一下啊，不过呢，接下来还有个点击跳转，那是我们下节课要讲的内容。