00:00
好的,我们继续啊,那整完这个生命周期的话呢,这节课呢,我们去把它默认项目的一个功能去做一做,啊,就是这个点击button弹出就获取到用户的信息,然后展现展现出。那么呃,首先要看到这功能呢,我还得把这个授权给一下,然后呢,我们去编一下。啊,重新编译的话,你看上来它是一个button,然后呢,一点击弹出授权窗口,用户点击允许的情况下啊,我们可以拿到用户的头像,对吧,用户的微信名称的信息,那在这里呢,点击拒绝的话,你看它那个八字没了,其实他这个做的不太好,我们待会儿做的跟他不一样啊,跟他不一样。那现在呢,你想要看到那个巴特呢,还得重新去编译一下。好的,那看完它这个功能呢,我们来到我们的项目里边,呃,首先啊,那呃,我可以在图片的下边,我这儿呢也整一个button,那这儿呢是来获取。
01:02
用户信息,嗯,保存一下,那这个时候呢,大家看啊,这多了一个八按钮。那这个时候呢,你看我点击是不会出现任何的授权弹窗的啊,因为现在的button呢,是一个普普通通的button。想要出现授权弹窗呢,我们需要去看一下官方的啊文档说明来,那这个时候呢,我把这个就关了啊,来到组件这一块。组件这一块的话呢,我们去找表单组件的第一个就是button。啊,那button寸的话呢,如果你什么都不设置,就是普通的按钮啊,在它里面呢,有一个属性呢,叫open type,那么对应的呢,是微信的开放能力。在这呢,没有详细的说明open t应该设什么值,就告诉你了,是个字符串,那我们就可以往下翻。下边呢,一定有专门针对于open type的一个说明,那这这里大家看open type的合法值,呃,有很多啊,我们直接先来看我们要用的第一个呢,叫get your info。
02:05
来获取用户的信息啊,所以看到这儿呢,我们可以给这个button。对吧,去设置一个属性呢,叫open type对应的直角get your info。然后我们保存一下。好了,这个时候我们点击一下这个button,大家看授权弹窗就出来了。然后我点拒绝,你看巴特还在。我再点是还能出来的,注意啊,我再点允许。用户是不是授权了呀,那之后呢,你再点的话,你看啊,授权弹窗就没有了,哎就没有了,那这一点呢,要注意啊,授权的动作只发生一次,你想要看到这个弹窗呢,大家需要先把授权缓存给它清掉,哎最好是重新加载一下。好了,那关键是,呃,用户点击允许,我怎么能够拿到你当前微信用户的基本信息呢?我们往下来看它的官网内容啊。
03:06
后边有一句话说,可以从bad get your inferd回调中获取到用户的信息。注意啊,B呢是绑定世界的一种手段,对不对,那这个是回调啊,其实这个世界呢,叫get your info。啊,你看我怎么写啊,那现在呢,我们需要通过B呢,去在button的身上呢,绑定一下这个事件,那么接下来我们需要写一个事件的处理函数啊,就回调函数,我这呢就写什么啊,Get user啊,INF for。Get info,那对应的事件我们定义一下啊。来。那这一把呢,我给大家放到all的下边吧,啊,那这个呢,是获取用户信息的回调放到这里,嗯。嗯,然后在这个里面啊,我做一个打印啊,那这样呢,我们去标识一下这个用户,或者这样呢,我这儿打印个res吧。
04:05
Res,那大家看啊,我们在这个回调的函数里边,在回调函数中呢,我声明那个行差,并且打印了一下它。那这是因为,呃,当我们点击这个button弹出授权窗口,不管你点拒绝也好,还是点允许也好,它呢都会给你注入一个实参。而我们需要根据这个实参来判断用户到底点击的是谁,同时来在允许的那个实参里边能够获取到用户的信息。来,我们看一眼啊,我先点个拒绝。有一个对象,那为了看的清楚一点呢,我再给大家点个允许啊,我们对比着看。好了,那现在呢,这有两个对象,那第一个。你看啊,是这个我给它展开,我把允许的也展开。啊,这里呢,我们看一下这个detail啊,拒绝的detail里面只有个error message,而允许的detail里面我们能看到啊,下边是不是有u INF呀?啊其实还有个叫role data。
05:13
肉,那这两个的区别呢,一个是阶层的对象,一个是GS对象,那我们接下来呢,肯定是要拿里边的信息啊,所以呢,我们要用的是这个。啊,是这个。那这里呢,都有啥呀?你看vita URL就是你当前用户的微信头像地址啊,City,城市country,国家a gender,性别,包括language语言啊,以及我们的昵称就是微信名称。Province省份对吧,这些呢都是用户的基本信息。那都是用户的基本信息,好。这儿呢,可能有的同学说,哎,这个jander为什么用一啊,那你看企业级的数据里面呢,他这儿呢,通常用的都是零跟一来表示我们的性别,而不用我们习惯的男和女。
06:02
啊,那这是为什么呢。首先男和女这是中文啊,一个中文一个字啊,它占两个字节,那这样的话呢,是比是要比我们英文或者说数字占的字节数是不是要多呀。啊,你一条数据可能多一个字节也很好,但是你像微信人家的用户量是上亿的。对吧,那这样的话呢。哎,上亿条数据里边多了多多了1亿条啊,假如说就以1亿为主吧,多了1亿个字节,那就多占多占用了很多内存了,内存是很宝贵的,所以啊,我们改用什么零和一或者一跟二都可以啊,来表示我们的性别,哎,那这是这个。好了,那对比完这两个对象,我们如何知道用户点击的允许并且能够拿到数据呢?其实只需要看detail里边有没有u INF是不是就可以了。啊,所以大家看啊,接下来我这样去操作,在这个回调里面呢,我去判断一下,如果res的detail的user啊,Infer为那说明用户。
07:10
是不是点击了允许。对吧,同时这个u info就是我们想要的对象。而最终的数据呢,我们要展现到页面上。哎,之前我们说过啊,页面上的数据呢,是不是都了data要,所以我在data中呢,先许初始化一个,哎这呢应该用英文的逗号啊啊一啊初始化呢,那就是空对象啊,这儿呢用来存放啊我们用户的基本信息呗。那当我们拿到了这个u info,我们要干的事情,那就是去修改。啊,Are infer的什么呀?状态数据,来,this.set data,我们再次用一下啊,You are in for,你要修改的值是什么?你就res.detail.you。
08:04
对吧,好,那这一套啊,我们看看能不能跑得通,来打开咱的调试器。嗯,来到APP data中你会发现上来是吧,空对一下呀,那这个时候呢,我先把授权的缓存给大家清一下啊,来点击button。走。弹出授权窗口,我点击拒绝,你看这儿没有反应。我再点弹出授权窗口,再点击允许大家看这里边,诶是不是就有我们想要的数据了。啊,没有问题,那数据都有了,我们要显示到页面上其实很简单了。那现在呢,我们来到结构啊,为了看的清楚一点呢,我先把模拟器关掉。呃,那这个图片的位置你就不能。显示这了对不对,我们要显示是用户的头像,把它删掉啊,那现在呢,我们要访问data中的数据啊,你可以直接写u infer,但是要注意这是变量,一旦用到变量的话呢,我们这需要用到什么表达式,双大括号在这里呢?来u infer,点那头像的话叫ATA。
09:13
URL。哎,那同时下面这个message呢,我也换一换吧,那这个呢是user input点什么呀,叫ni name就是用户的昵称。好了,把这个写成动态的以后呢,我们打开模拟器啊,我们重新跑一遍调试器也打开。来把授权缓存清一下,刷新一下。哎,大家看啊,上来这儿没有,这儿没有,但是你会发现它这个图片虽然说没有内容,但是它还占位,你看我们移到这个图片的组件上面。你看是不是有对应的宽高啊。啊,那是因为我们设置了,对不对啊,这个待会儿来处理啊,待会儿来处理,那现在呢,看到我点击。拒绝没有反应对吧,那我点击允许好数据是不是有了,哎头像有了,哎你可能也没出来,那多半是我这个单词啊没写对,它应该是小头分命名法是不是吗?N是大写的。
10:13
那这个时候呢,我们只需要把这儿换一下就好。换完了以后我再一保存啊,大家看着页面上数据又丢了。那其实这是有问题的,你想假如说用户第一次进来授权了以后,那用户如果再次访问你的小程序,他就应该是。显示出来他的信息才对。而不需要用户反复的去授权了,对不对,那你看我重新编译进来。这是没有数据的,那这是不对的,为什么没有数据呢?因为你重新加载小程序的应用,那贝塔中的数据是会重新初始化的,所以没有数据。那这个时候怎么办呢?哎,那就要说刚才我们通过button去获取用户的基本信息呢,它呢适用于。
11:07
首次登录未授权的情况下。而授权了以后,这哥们儿其实就没什么用了。我们在授权以后呢,需要用到一个API啊,来到官网的API里面啊。呃,我们找这个开放接口。点开它。在这个里边呢,有一个API叫微信点get your info。那语义化很明确啊,就是获取用户的信息。但是你要注意这个API使用之前呢,必须要用户授权。哎。而我们要用它呢,就是在授权以后啊,所以没问题。那么我们看一下这个对象都有哪些属性啊,第一个啊,是否带上登录信息乱码七糟一大堆,那这个现在我们用不上啊,而且它不是一个必填的属性,所以先不用,它其实对应的就是一个布尔值。语言啊,那这个我们也不用。
12:03
啊,那这个语言呢,其实更多是针针对什么国外的用户,那国外的用户,那那再往下呢,成功的回调,失败的回调。我去给大家用一下啊。这个方法我们知道了啊,那接下来我们要考虑这个方法什么时候去使用。我们再次加载你的小程序的时候,你是最最好是上来就能显示用户的信息,对不对,所以说获取用户信息的动作越早越好,那我去给他放到outload里面,在这儿呢啊,我们去获取这个用户信息。或者这样啊,授权以后啊,获取用户信息啊,用到的是微信点什么呀,叫get a user info。那里边呢,我来啊。嗯,成功的回调没问题,然后呢,我们再去写一个啊,失败的回调。
13:00
嗯,那成功了以后呢,肯定有成功的参数啊,其实就是包含一用户信息的一个对象啊,我们去给他打印一下啊consult log。啊,这个res对吧,然后啊,失败的话呢,那这就是个error,同时我们将这个失败的内容也给它输出一下conso.log。A。OK,保存一下那。大家看着啊,现在呢,我先把授权清掉,我们重新加载一下这个应用,然后打开我们的调试器。你看啊,现在我们先看这个窗口吧,当你用上这个API呢,这儿有一个提示说获取用户的接口,用户信息的接口呢,不再出现授权弹窗,请注意申请。为什么会有这个呢?是因为因为啊之前小程序弹出授权窗口呢,用到的是这个API。后来呢,啊,它的语法变了,变成什么了,变成了button,也就是说这个button加open time来弹出授权窗口,所以呢,会有这样一个提示。
14:10
啊,要注意啊。而这个提示呢,可能有的同学担心,那如果说装到真机上,那用户是不是看到了啊,不会的啊,这个提示这个弹窗呢,只在。我们模拟器里面有到真机上是没有的,所以呢,我们关闭它啊,可以放心大胆的用。只不过是大家要看啊,这他走的是哪呢?走的是失败error message获取用户,哎,需要干嘛呢?Scod啊,Scope,什么an author or ordered that,就是说未授权。所以走的是失败。那未授权的情况下,我们用它。没啥用,因为我们要用button去授权,是不是有了吗?那这个API什么时候用呢?是我们用户下一次再进我们的小程序啊,比如说我点击一个编译,重新加载整个应用。
15:08
来这个时候大家看就成功了,而且在这个对象里面呢,你看是不是也有u in。哎,那也是,我们通过res.u info就能能够拿到对应的信息。有这个数据啊,那我就可以干嘛呢,去更新同样的还是这个this.set data呗,要更新的呢是u INF for啊,对应的数据呢,在这个res u INF里。那你看我重新再编译上来就有了,那谁的功能呢?就是它呗。这里大家要注意啊,我这儿用的是箭头函数。用的是箭头函数,如果不用箭头函数的话,这个this指向是不对的。他不可能知道你当前的页面啊,因为这个方法是谁调用的,是微信调用的,所以用箭头函数的话可以解决这个问题。呃,如果说对ES6不熟悉的同学啊,去看一下咱们官网的视频好吧,啊,那这是这个OK,那现在呢,其实我们已经成功的拿到了用户的数据。
16:11
哎,分为两种情况啊,我给大家总结一下,来到我们的笔记里面。数据绑定啊,我们说完了以后,那现在呢,啊,第二个啊,我们去获取这个用户的,嗯,基本信息,嗯。那么对应呢,它分为两种,一种是哎。用户啊,未授权。嗯,那通常呢是首次登录对吧,还有一种呢,是用户啊已经授权,那这个呢啊就是再次登录对吧,我们分别用到了技术,首次登录呢,是用用到一个button。那这个but呢,对应的open应该是叫get user会。嗯。如果是授权以后呢,我们用到的那就是直接就是微信点啊get us啊注意。
17:07
是两个搭配,才能适用于多种场景。OK,那这是这个。呃。讲完这里以后呢,那我们回头看一下,其实这个巴特呢,现在有点突兀在这。大家想一下啊,假如说我们上来未授权。对吧,是不应该有这个图片,包括这个文本的。上来应该显示button。而授权了以后,我们应该显示图片而隐藏掉button。就不要发展。对吧,也就是说就以这两个为例啊,我们现在说图片跟八字,他俩应该是互斥关系啊,有你没我,有我没你。对不,那如何去控制这两个元素呢?那那这个时候呢,我们再去学一个页面上的语法。
18:00
叫条件渲染,很简单,一看就能懂,微信冒号if,微信冒号else if以及微信else啊,包括下面这呢,这对应的是官网的实例。啊,这个呢,跟我们V里面的指令V-if啊,V-else是不是特别像呀。哎,不难啊,后边呢,给的是对应的条件。所以大家看我这儿怎么写,来来到我们的页面。先把模拟器关一下啊,那现在以这两个为例啊,你这两个混呢,你就会控制它,那现在呢,是图片跟它是互斥关系,我们需要用到微信。对吧,E去控制一下啊,后面呢跟一个条件,那么这个条件应该是啥呢。那就是有用户的信息,我是不是显示用户的头像。我怎么知道有用户的信息?对吧。啊,有同学说看you are in啊,注意啊,我能不能直接把这个放到这去判断。
19:04
那如果他没处我就显示图图片,那肯定不行,为什么?因为u in我们初始化的是一个。轰对象。而对象转换为布尔是横为处,所以不能拿它来判断,你可以判断一下它的什么。这个呗。如果它里面的维塔URL有值,那说明肯定有数据了,就显示它呗。但如果空对项,那这有什么没有,那就是安范的。对吧,好,那这这个啊,那下面这就简单了啊,我们这儿写个微信else就好了。啊,那他俩是不是就互斥了?来,我们看一眼,是不是打开我们的模拟器?你看诶,现在是未授权大家看啊。是顶上去了,那是因为之前的没有了,没有人占位了。对吧,然后我点击这个button允许你看button没了头像怎么说了。
20:02
没有问题对不对,我再刷新。哎,你看其实刚才闪了一下,是因为它加载的时候要判断这个条件,那现在是不是也是正常的,哎,OK,没有问题。哎,可能有的同学说,那你这个上来,你这个八字也太丑了。啊,没有关系啊,那这个呢,我们可以去调一下它的样式,那比如说我现在呢,就去写一下这个button。啊,我也不加class了,我就用标签选择器啊,去找到这个button去设置一下,那它的宽高啊,其实就这些。首先它的样式呢,跟头像的样式应该是一样的,跟那个图片那里面的文本我们需要单独设置一下啊,比如说photo size,我们来个26RPS对吧?啊行高那就200万垂直居中啊taxi。对吧,Center水平居中,再看一眼。嗯。这不就好了吗?啊,字没有显示完整啊,那是因为这儿,那我们来个24。
21:05
三获取用户信息。没问题啊,你也可以给他加一个背景色啊,随便你加什么啊,比如background。这里来一个什么呀,来个green yellow吧,我随便加一个啊,可能配色呢比较丑。嗯。凑合着看啊,大家。好了,不就这个吗?那我们重新跑一把,我点击它。拒绝,没有反应,我点允许,你看是不是无缝切换到我们的图片啊。OK。呃,那以上呢,就是获取用户基本信息的一个操作流程来,那对应的重点呢,也给大家总结了一下,就是这两个。对吧,呃,那这节课呢,我们先讲到这里啊,把这个停一下。
我来说两句