00:00
好的,我们继续啊,那上一节课呢,我们已经成功的获取到了用户的基本信息啊。那在之前的课程中呢,咱们已经掌握了,你把数据绑定啊,时间绑定,包括条件渲染以及生命周期呢,我们都讲过了,那么接下来呢,还有一些知识点呢,我们需要在我们的项目里面去学习它哈。因为有一些知识点呢,它需要有一定的场景呃,才能去更好的去理解它,所以接下来呢,我会以项目驱动的形式呢,去给大家讲啊,就是我们一边做项目啊,一边去学习新的知识点,那么之前这个项目呢,给大家介绍过了啊,那接下来呢,我们直接去去一点一点去做啊,啊那这个时候呢,来到我们的桌面啊,来到我们的桌面。呃,在咱们空里面呢,我呢再去创建一个文件夹,再去创建一个文件夹,呃,这个呢,我们就叫它啊什么样啊硅谷。呃,硅谷云音乐吧,啊硅谷云音乐,那这一把呢,我用这个拼音去代替啊,来一个study,嗯,好了,那这样呢,作为接下来我们要做项目的根目录啊,那之前写好这个呢,我就给它关掉了,呃,然后呢,我再去导入一个项目啊啊就新建一个吧,新建一个就是以我们刚才。
01:17
创建那个文件夹啊,来到我们的桌面啊,在咱们的扣子里边,然后呢,选中这个根目录把它导进来,然后呢,需要填一个APPID啊,那我去复制一个。OK啊,来到我们这个项目里面导入进来,不使用云开发,然后呢,我们去新建一下好的,那么接下来呢,我们是相当于又创建了一个新的项目,对吧?啊,又创建了一个新的项目。没问题,那么在这个里面呢,我们去把我们不需要的给它删掉啊,你把U。呃,我们不要,我看看在这儿啊,这能删对吧?呃,ABGS里边那这些呢,我们都不要了啊,我们自己创建一个AB阶层中呢,呃,包括这些页面啊,我们先把页面的路径咱们都不要。
02:07
哎,都没有。呃,这些,哎,我们留着吧。那下边不需要我们写的啊,那我们就不用给他动了,呃,我们想想还有什么呢,还有这个页面,呃,那现在的页面呢,我们在本地去删一下它啊本地。嗯,那这些呢,咱们都不要啊,因为接下来呢,我们要自己去写。OK,那现在呢,大家看啊,在我们全局三个文件都有了啊,包括全局的样式我们也不要,哎,我们自己写,呃,还有一个项目配置文件对吧,包括这个STEM杰森啊,那这些呢,我们都给他留着,OK,那接下来呢,我们一点一点去写啊,首先。我们创建一个页面,就先整一个目录啊,去找我们的index。主页啊,然后呢,在它的下面呢,我们整一个index目录,OK,那这样的话呢,最起码我们的项目不报错了,对吧?那首先我们先去把这个窗口呢,哎,给它调整过来,调整成什么样呢?调整成跟我写好这个一样,那现在呢,大家看啊,这个窗口的颜色呢,就是网易。
03:13
有音乐的主题色啊,所以呢,我们来设置一下。那要设置这个窗口颜色的话呢,你别忘了啊,我们之前讲过在全局的。配置中也是在app.js中通过window这个选项呢,是不是可以设置我们的窗口呀?然后呢,在我们的页面里边也有一个阶层文件,在这里是不是也可以设置呀。那这两个的区别呢,是啊,一个是全局配置。呃,可以给所有的页面用,那么还有一个呢,叫局部的配置,那当前的配置呢,只能给我们自己的页面用。那看到这个需求以后呢,哎,我们得想清楚啊,我们到底要在全局设呢,还是要在我们的局部设。对吧,好,那这个时候大家看一下啊,在主页啊,包括我们的视频页啊,以及个人中心,你会发现,诶,这个主页啊,这个窗口呢,颜色一样,所以。
04:08
这种情况呢,我们需要在我们的全局去设置啊,那这个时候呢,我们来到这里啊,咱们继续往下写,那window选项啊,我们就把navigation的这三个留着,然后呢,那对应的颜色呢,我们需要跟之前这个颜色呢保持一致啊,那这个颜色我是怎么取的呢?我是。从呃,那个网易云院的logo上边呢啊,用取色器给它取出来的啊在这里呢,我们就不浪费时间了,我直接把这个颜色呢给它拿过来,然后呢,放到我们当前的项目里面啊,把这个给它换掉,同时字体的颜色呢,它呢应该是白色。对吧?呃,还有什么啊,那这呢,刚才应该多删了个大括号,呃,再来啊,那这呢应该叫硅谷啊云音乐,嗯,把这个换掉,我们保存一下。好,那这样的话呢,窗口就好了啊,那在这样呢,可能有的同学发现有一道有一条线啊,这个是模拟器的问题,哎,在针上的家到时候看啊,它是没有的,而且呢,在模拟器上呢,它也不一定啊一直有。
05:14
好的,那我们把全局窗口的配置写完了以后呢,我们去写主页里面的内容。来我们看一下啊,主页这上来呢,它是一个轮波图。那么在这个里面呢,用到的是网易真实的接口数据啊,我们先写一下这个轮播图啊,来来到我们的结构里边,那这些就撤掉了,来我们来一个服用哎容器对吧,然后呢,在这里呢,我们要去写的呢,是我们的啊龙波图板块或者叫龙波图区域。呃,在这个下面去写啊。那写轮波图之前呢,大家可以回顾一下,哎,你们最早接触龙波图是什么时候呀?哎,对,在我们原生GS里面需要大家去对吧,手写,哎,那个轮播图啊,也是从入门到放弃的,那那个阶段对不对对,因为他当时来来看啊,确实很难啊,那是因为我们刚刚接触,那么后来呢,我们在唯忧的项目中呢,你会发现啊,其实我们并不需要手写。
06:20
而且在企业级的开发当中,也不需要你去手写,因为有太多太多第三方的库了,当然呃,如果说你你说我有这个能力啊,我能写一个比他们还要好的,或者更好用的,哎,那你就可以手写一个给别人去使用。在咱的文用中呢,咱们用到的是一个第三方的库,对吧,叫SPA。啊swa那这个库呢,很好用啊,引下载引入进来,然后利用swa对吧,作用到对应的容器上浓波组就好了。哎,那这是这个,那在我们的小程序里面其实更方便啊,现在呢,我去访问一下我们小程序的官网,稍等。
07:02
嗯,来我们去登录一下啊,然后呢,我手机上去验证一下。OK,那这边呢,我点击了确认,嗯,这边呢,应该是会再再去加载一下啊,然后呢,我们来到它对应的文档。啊,那现在呢,我们要轮播图啊,我们需要到组界这一块呢,去找这个视图容器里面呢,就有一个swaper的组界,那么它呢是专门用于啊实现冷波图的,在这里呢,大家要注意这句话啊,Swaer里面只能放置swaper h。S块item呢,其实对应的就是一个滑块,至于说你滑块里边啊,轮播的是什么内容,随便你,哎,你是图片也好,你是文本也好,那个呢就是看大家的实际需求。那现在呢,很明显咱们要轮播的什么图片呀,所以啊,来到我们的项目里边,首先呢,我们给他整一个SPA。
08:04
对吧,那在这个里面呢,啊,应该是item。然后在这个里面,那现在呢,我们应该是用的image龙波图片呗。那现在因为我们还没有前后端对接啊,没有前后端对接,所以呢,我们先去用一些静态的图片。那跟我们之前的操作一样啊呃,来到咱的项目里面呢,我去整一个文件夹。叫static用于放置我们的静态资源,那然后对应的这个图片呢,我们去还是把这一堆啊拿过来。啊,拿过来,拿到咱们的项目static下面,哎,复制一下。OK,那现在本地的图片有了啊,那接下来呢,我们在这儿去引入一下。我们首先啊,还是要找这个备用的图片,就是在static下边image下边有一个女神点JPGOK,那这个时候呢,我去引入一下啊,这呢应该是setting下边的image下边啊,女神点JPG。
09:09
保存一下。好,这个图片有了对吧,那在这里呢,我要说一下啊,那这个开发工具呢,它是没有路径的提示的,所以呢,需要我们手动的去敲啊,可能有的同学会觉得麻烦啊,说这个编辑器用的不习惯啊,没有关系啊,下节课呢,我会给大家讲如何用我们的IDE去开发我们的小程序。好的,那现在呢,为了看到裸播的效果呢,我呢多给他复制几份啊。那这样的话呢,我们这儿有三张图,你看啊,你看这个轮波图的功能呢,其实已经出来了。哎,差的是什么?差的是样式。好的,那我们接下来呢,去写一下我们的样式啊,所以呢我呢先给他一些类名,哎,比如说这个是index container。啊,那这个swaer这呢,我们来一个,咱们就叫它啊什么呀,VE。
10:04
对吧,那这样的话呢,来到我们的index点微信SS里面啊,首先我们要诶那这呢,这个sper呢,我们叫它什么呀?叫啊balance对吧?啊它的宽度呢,应该是啊100%,然后高度呢,我们给它来个300啊P叉。啊,那这个300P,那我们量一下吧,啊,应该是跟那个保持一致才能。大家看啊,没问题,这是啊300啊,因为它高是一百五嘛,转成RP差的话,是不是300啊,没有问题,那么你这设完还不够啊,我们还应该去设一下它下面那个图片啊,它呢,那就是高,嗯,100%啊,宽高都应该是多少呢?100%。保存一下。OK,你看啊,这样的话呢,样式就过来了。好了,你看啊,现在的轮播图其实比我们view里边的轮播图呢,还要简单一些,对吧。
11:05
呃,那这样的话呢,呃,功能跟样式有了,大家看一下,跟我写好这个还有什么区别。首先你看这里啊,下边它是不是有导航的小圆点呀?啊,那这个小圆点怎么出来呢?我们还需要看一下这个swap官网上的介绍啊。本身是一个组件,那么在组件的身上呢,有很多的属性用于帮助我们添加额外的功能。对吧,那再往下大家看啊,在这里第一个属性就是是否显示面板指示点啊,对应的是个布尔值,默认值为false,那我们想要显示这个面板指示点呢,我们就需要给对应的swaer去设置一下这个属性叫它,那其实本意呢,我们这儿应该写一个什么,应该写一个处。嗯,大家看啊,这个小圆点呢,有了,这不什么,只不过颜色呢,是这种颜色比较丑啊啊,那我先说啊,这写处也行,嗯,还有一种方式呢,是你什么都不用写啊,后面不用写值,就是说你只要声明了这个属性,那么它对应的值呢,就相当于是处,那这个时候我再保存,大家看啊,这个导航的点是不是继续还在啊。
12:24
没有问题,那么点有了啊,我们再去调一下它的颜色往下看,哎,你看对应的color呢,指示点的颜色,同时下边呢,还有一个叫active color,那就是当前选中的指示点颜色,那么这两个是吧,正好就是我们想要的,OK,那现在呢,我需要设置一个它。啊,我们先把模拟器关一下,那么除了这个,它对应的是不是应该有一个颜色呀?啊,除了它呢,还应该有一个什么,就是中间多了一个active的对不对,因为要设那个选中那个高亮的颜色呗,那这里呢,啊,我手动去写一下active color。
13:04
这呢对应的也有颜色啊,那这个颜色的话呢,我并没有去记它啊,所以呢,我们直接到我们这个项目里面啊,我们去找一下他。呃,来到supper里面,那默认的颜色呢,是这个颜色。啊,我们给他拿过来啊,是它,然后呢,那个高亮的颜色呢,这不是吗?这也有啊,那是这个颜色啊,咱们也给他拿过来。来,在这儿。嗯,保存一下啊,我们打开我们的模拟器瞧一瞧,打开就好了,那这个颜色也是我用取色器啊去吸过来的颜色,那在这儿呢,我们就不浪费太多的时间了。好的,那这样的话呢,一个基本的轮播图啊就实现了,在这里呢,我们主要是配置一下窗口的颜色以及标题,包括我们用S呢去实现了一下轮播图,那这节课呢,我们先讲到这里。
我来说两句