00:00
好的,我们继续啊,那做完这个后端验证以后呢,那接下来呢,我们去做一些和页面啊相关的一些交互啊,大家看啊,我写好了这个页面在个人中心页啊,你去访问的时候,如果是没有登录,那么这里显示的是这个默认的头像以及啊游客的名称,那么我们这个时候呢,是可以点击一下这个头像的位置啊,去跳转到我们的。呃,这个登录界面,哎,跳转到登录的界面,那在这里呢,诶大家看这有个回退的小箭头,那说明我用的是navigate to跳转了对吧?啊,那在这里登录完了以后啊,我们走一波。啊,在这呢,我们去登录一下,来来输一个正确的啊好,一旦说我登录成功了以后呢,你看啊,它会跳回到个人中心页,那么这个时候呢,这儿就要去显示我们真正的用户啊头像以及用户的名称,OK,那这是这一个好的,那知道了这个以后呢,现在来到咱的页面里面啊,咱的项目啊,那首先我要把我的个人中心页呢提到上面去,这是第一步。
01:09
那这样的话呢,先加载的是不个人中心页的页面啊,啊没有问题,然后呢,在上边这一块呢,我们去找到这个头像,以及这个呃,最终显示用户名的区域啊,那这个呢,是它的包裹器对吧?那现在我们要做的是点击这个区域,是不是可以跳转到我们的登录界面呀,那这个时候呢,来我就给它的包裹器上呢,我们来一个啊,绑定一个点击事件to啊loging OK,那么对应世界的回调呢,我们来到这个GS里边呢,去定义一下啊把这些呢,咱们就收起来了。嗯,来继续啊往下,那这个呢,是啊跳转至。嗯,跳转至我们啊登录啊,Loging界面的回调,OK啊,我们把这个呢放到这儿来,那跳转的话呢,很简单,微信点navy get to对吧,那在这里我们输一个URL,我们就pages啊下边的personal下边对吧?啊personal好的,那这是第一步。
02:15
来那来到咱的模拟器里边看一下啊,点击跳转走啊,那API报错了啊,那说明啥啊,不能跳转到什么黑板页面,那现在呢,我这个personal啊,这啥玩意我们要跳转到哪,要跳转到登录啊,刚才这写错了,来过来。啊,先看这啊走。好,那这个时候大家看啊,我们是可以跳转到我们的登录界面,没有问题,那么接下来在登录界面。哎,我们登录成功了以后,我们要回退。到哪啊,哎,我们要回退到我们的个人中心,那我们先把这个做一下,来到我们登录界面的GS啊,登录成功呢,是在这一块。
03:03
对吧,那在这呢,我给大加一个注释啊,那这个呢是代表的是登录啊成功,那除了要给用户提示呢,我们还要去干嘛啊,跳转至哎,我们的个人中心哎,Personal页面对吧?那这呢看呢我还是先用navigate to哎,我们跳转一下试一下给大家看一个东西啊URL,那这呢应该是page下边啊personal嗯,下边的personal呗。对吧,好,那这个时候啊,来来到咱的项目,我呢先点击来到这一块,然后呢,我去登录一下啊,输入一个正确的手机号啊嗯,593啊,然后呢,输入一个正确的密码过来啊走。那大家看登录成功了,刚才有提示,但是这边有一个报错,说navigate to呢失败了,不能cannot啊,不能navigate to table页面。
04:05
啊,那这是啥意思呢?我们现在用navigate to失败了,之前咱用的好好的,对吧,那这个时候呢,大家就需要去官网啊,去看一下这个,呃,对应的这个方法来到路由这一块啊,我们找到navigate to,那这个时候呢,你来看一下,哎,Navigate to,我们之前读到这句话啊,我们说保留当前页面跳转至应用内的某个页面,对吧?那这个之前呢,我们都说过了,但是后边还有一句话这说了,哎,但是呢,不能跳转到table页面。那这个时候大家想一下,我们即将要回跳的是不是个人中心页呀?个人中心页正好是个什么页面?是不是就是一个table页面啊,所以你用navigate to往回跳是跳不回去的,哎,那这怎么办呢?来我们看一下其他的方法,我们还用过什么readdire to,那这个呢,也不允许跳转到table。
05:06
对吧,那往上看啊,这专门有一个什么呀,叫Switch。跳转到table页面,并关闭其他所有的table页面来,那这个时候呢,我先给它把这个negative two呢换成我们的Switch,然后啊,我们再看一次,这哥们呢,是专门用于去跳转至table。OK,来到咱的模拟器啊,再走一波。哎,过来来在这里呢,输一下我们的手机号啊嗯,然后呢,我们输一下这个密码。走,你看是不是回来了,没有问题,注意啊,现在呢,我用的是Switch tip可以跳转。OK啊,没有问题,那么跳转回去的同时呢,我们当前的页面呢,还要显示我们用户的信息。
06:03
那么用户的信息在哪儿呢?来来到我们这个接口测试这儿啊,这儿呢,我们还是访问一下这个正确的地址,来给大家说一下,在这里啊,在这个结果对象里面呢,我们需要用到的是profile这个对象,那么在这个里面呢,它包含了我们当前用户的一些信息。你比如说像什么昵称啊,Nickname啊,这是我的账号,那么还有什么呀,ATAURL,那这个对应的呢,就是我的用户头像啊,就是这个OK,所以啊,我们需要将profile这个对象,想办法让我们的个人中心页能够拿到,因为现在我们拿拿能够拿到这个一手数据呢,是不是在我们的登录界面啊。啊,在这里,那怎么办。对吧,啊,这一节课呢,我们要学习的是另外一个东西啊,也是一个呃,新的知识点,那就是用户的啊,这个小程序的本地存储。
07:02
好的,那现在呢,来到官网上啊,来到官网上来,那这个时候呢,我们看一下这个数据缓存在这里,大家看一下有这么多。哎,乍一看的好像很很多很复杂对吧,你仔细看一看啊,这是一对啊,这个是一对啊,这个是一对啊,这个是一对,还有这个是一对。一共五对对吧,五段里面呢,我先说一下这个get storage呢和get iner的用法差不多,而我们经常要用的是上面这一个,所以呢,其实一共就四段,Set remove get clear,那这个用法跟我们H5的本地存储里边的local storage特别像,一说到local storage啊,我们可以回顾一下啊,这哥们呢,是H的本地存储,它呢跟session storage的区别是什么?它呢是永久存储,说白了你除非人为删除它,否则的话它是不是一直在,而session storage呢,它呢是绘画存储啊,那就是说画打开到关闭的过程,就是它的生命周期,你比如说我会画一结束。
08:14
那这个内存就释放掉了。啊,那这这这个啊,那说白了,一个是存储在我的本地硬盘啊,一个是存储在内存里边。对吧,啊,那这是这个,而里边的这个方法呢,也特别像啊,Set呢是设置remove移除get是获取,Clear是清空。清空,清空所有的remove呢?可以移除指定的某一条。然后这里面呢,再说一下它为什么是一对。那仔细看一下啊,这有个storage,还有个set storage。哎,有有小伙伴可能反应过来了,一个同步一个异步,好,那么请问哪个是同步,哪个是异步。
09:04
哎,不要看错了啊,可能有同学看到这种think,说我们讲过a think啊,这个是异义,不错,A think是异义,不,那是因为前面多了个A叫AS,而seek本身表示是同步的意思。啊,千万不要看错了啊,那这个呢,是我们的同步啊,人家也说了是微信set storage的同步版本,同步的话大家看啊,我们只需要传传什么key和value就OK了,不需要什么回调,那我们再看一下这个异步的,异步的话需要传进去对象啊,在这个对象里面,你看有K贝塔,你说k value,哎,你看异步是不是伴随着毁掉呀。没有问题。来,那知道了这个以后呢,我们可以这样去做啊,当我们登录。成功以后,在跳转至个人中心之前呢,我们可以先做一件事情,那就是将用户的信息存储至本地。
10:09
呃,将用户的信息呢,存储至本地。OK,那这个怎么写呢?来呃,比较简单啊,微信点set storage,那这一版呢,我们先有个同步的版本啊,到最后呢,同步一步啊,我都会给大家用一下,OK,那在这里边我们是不是需要传一个key和一个value呀,那K呢,我们就叫它u inb用户的信息value的话呢,我们应该传的是这个that点我们只需要里边的这个对象。叫profile,哎,把它丢进去。那注意啊,现在呢,我直接放的是一个GS的对象,那其实在我们H5的本地存储呢,我们说了从的和读的数据呢,最好都是Jason的数据,对吧?所以呢,这里呢,我们也用一个杰森点string范去给它转一下,呃,转成一个Jason的对象。
11:04
好的,那么现在呢,我们把代码已经写完了啊,我们看一下能不能重进去过来,再重新编译一下。来点击登录,来到登录界面我们看一下啊,我现在呢,先输一个正确的手机号码,再去登录一遍,密码呢,也给他上了走,那这个时候呢,我们怎么知道本地有没有数据呢?我们再看一个叫storage。啊,那storage这个logs呢,这不是我们存的啊,这是它这个工具存进去的,我可以把它清掉,那现在呢,本地什么都没有了。那这个时候呢,我们去登录一下走,大家看对应的数据是不是进来了,而且呢,这是一个Jason的啊对象,你看后边的type是string没有问题。OK,那么现在啊,我们已经存到本地了,存到本地的意义是啥呢?那这个本地的数据只要你不清空,它一直在,那意味着在任何的页面是不是都可以访问啊,所以当我们再回到我们的个人中心页的时候呢,我们就可以去读取一下它,那这个时候呢,啊,读取的目的呢,是为了尽早的展现给我们的用户啊,所以呢,我在最上面这去读。
12:22
来,那这个时候啊,在all这呢,我们去读取啊用户的啊基本信息,OK,那let个u INF for,那等于什么呢?微信的get storage啊,它俩是一对对吧,那这呢还是用一个同步版本,这里呢,注意啊,这个字段呢,就千万不能写错了,叫u INF for,你读的字段跟你当初存储的字段一定要保持一致。这第一点,那么这个到底能读出来啥呢?我们可以去打印一下啊,Cons这个u info啊,然后呢,来我们后面呢,去给它打印一下,OK,那现在我们让他重新编一下来到conslo。
13:10
哎,那这个时候大家看啊,其实读到了啊,这是一个阶字呢,对象没有问题,那么我们在个人中心页上来一定能够读到数据吗。不一定,这是现在呢,是因为用户登录完了,那假设用户上来还没有登录的情况,我去访问个人中心,请问本地有数据吗?不一定有了,那没有登录它肯定没有啊,所以我先把这个清掉啊,我们再访问一下个人中心走。这个时候啊,本地没有存储的数据,我们看读到的是什么,其实是个空空串好的,那这个时候呢,你就要注意了,你读到的不一定能用,所以呢,我们需要干嘛,需要去判断一下,只有这哥们为触了是否才能说明我们的用户登录了,那么用户登录了以后,哎,我就要把用户的信息呢,显示到我们的页面上啊,那这个时候呢,页面上的数据呢,是不是都问我们的data塔要,所以呢,我在data塔中呢,初始化一个数据,那那这个呢,表示的是啊我们的用户信息OK。
14:18
那当他没处的时候,我们要做的事情是什么?那是不是就是哎我们要去啊更新啊,我们这个u in的状态呀,嗯,那就是this点啊set啊data在这里面呢,我们去更新我们的u INF。那这样的话呢,来,那这有数据,我们的页面我们一起给他写了啊,页面上就是是不是就可以显示了,注意那页面上默认没有登录。是不是长这样?诶,默认的图片没有登录,默认的用户名是游客,那如果登录的话呢。
15:01
是不是要显示对应的用户的头像和名称呀,那这怎么写呢?注意,因为我们要判断有没有登录,所以需要用到啊双打括号,这里呢要注意啊,你千万不要直接去判断这个U2IN for是否为错,因为我们初始化呢。值空对象啊,你判断对象是否为触啊,它永远为触,它很为触对吧,所以呢,我们可以另一个里边的Nico啊,这儿呢,应该是判断有没有用户的头像,你就A维他URL呗,如果它为触。是不是说明有啊,那说明有呢,你就用你的头像,那就啊用你的A维ta URL v for的话,那我是不是还得用我默认的这一张图片,这里呢,我用了一个三元表达式啊,去给它写了一下,那么下面这呢,同样的道理,这里呢,我们可以去判断一下这个you in for点,那这一版呢,我们用一下这个nickname,而要注意啊,这个nickname的大小写我们确认一下。
16:00
好,那这里呢,它是不是清一色的小写,哎,那这儿呢,那我也就这样写,如果它为处,哎,我们是不是就用你的用户名为放呢,我们还是用这个什么游客对吧?游客注意啊,这儿的游客,诶那这儿呢,需要加一个什么,加个冒号,必须要加引号,不加引号的话,认为你是个变量,那是会报错的,好那这是这个,那把这一整套我们写完了以后呢,我们再测一把。好的,上来确认一下,本地没有数据初始化的u info为空对象,所以我们页面现在显示的是默认的头像以及游客的名称,对不对,那这个时候呢,我们点击登录。过来啊,然后呢,我去输一个正确的手机号啊。嗯,走。来,那现在呢,我去登录啊,我们先看这能不能写入走,OK,这有数据。
17:04
有数据了以后,那你再看这里没有,那这没有我们先来看啊,其实这呢有几个坑啊,大家看啊,首先页面没有数据,你先要先要确认你的u info。七要确认你的U2音符有值吗?没有值,没有值的话说明什么?说明这没有执行。对吧,没有执行,那我现在本地明明有u infer啊,这第一啊第一点啊,我们要想我们现在读出来的u info,你说我能不能直接给它更新到这。并不能因为你读出的是个杰森的对象,这是第一步,是个杰森的对象,而我们最终是不是要用个GS对象。对吧,那关键是啥?关键是即使是阶层对象,你看我这里面也没有啊。也没有,那它怎么才能有呢?大家看我重新再编译一次。
18:04
哎,这个时候你看这就有了。有了,只不过是格式不对啊,这很明显是杰森呢,哎,那这是为什么呢?刚刚没有,现在有了。那是因为刚才我们在从登录界面登录成功回退回跳到我们的个人中心的时候,这个并没有执行。并没有执行。为什么呢?首先我们知道outlo的是接听页面加载的生命周期函数,我们之前也讲过对不对,它呢只执行一次,就是页面初始化加载的时候,然后我们从个人中心页跳转到登录界面的时候,注意啊,我故意用的是navigate to,那这样的话navigate to有个什么特点呢?在你跳转的时候就保留当前页面跳转到应用内的某个页面,那这样的话大家看我这一跳转。你会发现这个APP data呢,也能证明这个事儿啊,这有两个页面的数据,那说明这两个页面都在存活着,只不过个人中心没有显示而已。
19:10
那现在个人中心页根本没有销毁啊,所以当我们用这个什么呀,哎,我们刚才用的什么,用这个登录界面啊,用这个Switch。在回调到个人中心的时候,他的outload并没有执行,那么outload没有执行,那这的所有逻辑它都不会跑,所以刚才我们能看到这里边没有数据,那我刷新一下为什么就有了呢?我点一个编译,那么整个小程序应用是不是重新加载啊,那就会导致我的个人中心页呢重新初始化,所以你能看到这个数据。哎,这一点呢,大家要清楚,但是呢,看到这个,这很明显是不对的,这个我们根本用不了,这是一个阶层的对象,那这是第二个坑啊,千万要注意,你当初从进去的是杰森。
20:03
那接下来转出来啊,用的时候啊,你一定要给他反编印象,你就接pass,我们将这个反编印象,然后再去更新,好,那这个时候先不管别的啊,我们再刷新一次。来大家看这个时候的u iner就有值了,哎,现在是不是一个GS对象没有问题,但是刚刚那个问题我们还没有解决呢,还没有解决呢,在用户我把这个本地清掉啊,啊刷新一下。来,那在用户第一次登录回跳的时候,怎么解决个人中心页的的不执行的问题,这是关键,那这个时候呢,我们用这个Switch team呢,就搞不定了啊,我们需要利用用到另外一个方法叫。这个方法大家看啊,他说了,关闭所有页面,打开到应用内的某个页面。首先这儿并没有说不能跳转到ta对不对,这其一,其二,人家说了关闭所有页面,这个所谓的关闭就是销毁这啊其他的页面。
21:12
啊,那这个方法呢,比较霸道啊,就是唯我独宗嘛,好,那这个时候呢,注意啊,我们把lo对应的这个Switch方法呢,我们换成。哎,那换完它以后呢,我们再测一把啊,注意现在呢,走来到我们的登录界面,还是再去登录一把啊。来输入一个正确的手机号啊,密码呢,也给它输上来,本地现在没有没有问题,来走本地有了,大家看这里是不是也有了,嗯,那现在这个能加载出来,说明nold是不是执行了。没有问题,而我们要用到的方法是lash啊,就是强制这个页面重新加载一遍,当然了解决的方案也有很多啊,也有很多啊,你可以不用把这个读用户的信息呢,放到allload,你可以放到哪了,你可以放到另外一个叫on,因为讲生命周期的时候我们说过啊,它会执行多次。
22:14
对吧,那这样的话,即使在显示的时候我再执行也没问题,但是呢,放这儿,那很明显你的任务同样的代码会执行多次啊,意义不大啊,效性能不好,所以呢,我还是选择放在了我们的onload里面去读这个数据。OK,那这节课呢,我们主要是进行了这个个人中心页跟我们登录界面的一个交互啊,那么这里边重要的知识点呢,就是我们用到的这个本地存储啊,用到的本地存储,本地存储这一块呢,对应的语法比较简单啊,因为它比较重要,我给大家总结一下来,呃,前后端交互这呢,我们整完了以后呢,来我们再说一个啊。
23:00
好的,那现在呢,是第四个了啊啊,我们说了这是小程序的本地存储,那它的语法呢,就微信的啊set storage,嗯,对吧?呃,或者说是微信点set storage啊think注意啊,我现在只写一段啊是设置的,那么其他的获取那些都一样。啊,那再或者呢,等等等吧,它还有设置还有移除对吧,那在这里呢,我给大家说一下啊,这个本地存储的注意点。那注意点第一啊,建议啊,存储的数据啊,为阶层数据,好,那这是这个,那么接下来呢,我们看一下官网啊。来找到刚才的本地存储set storage,大家看啊,这里呢,有一个提示,那单个的K允许存储的最大长度为一兆,所有数据的上限为十兆啊,那这个呢,我们一定要注意,也就是说小程序的本地存储呢,它不是说你可以一直往里面丢的,对吧?我们的内存是很宝贵的啊,单个K指的是什么?就是一条数据,那么现在大家看到的这就是111条K嘛,那么它的上限呢,是一兆,而所有的上限。
24:24
十兆,所以啊,我们存储的时候要注意这一点。那最后呢,我再说一下它它这个呢,属于啊永久存储啊,这永久存储啊,那这个呢,嗯啊永久存储它呢,和我们H5的什么呀?诶H5的local嗯,Storage一样啊,一样要注意这一点啊,那么关于这个永久重重呢,大家看上面这也说了,除非用户主动删除或者内存空间原因啊被系统清理,否则的话数据一直可用。
25:00
OK啊,那这是这个啊,那这节课的重点啊,就给大家梳理完了,好的,那咱们这一节课呢,先讲到这里。
我来说两句