00:00
好的,我们继续啊,那我们在了解了这个项目里面的所有文件的这个结构啊,呃,那我们看一下它里面的功能啊,那上一节课呢,这个U没给大家说啊,那这个呢,其实是它自己分装的一个功能函数啊,那这个看不看都无所谓啊,无所谓,因为这个呢。呃,是他用于去写是这个什么。时间呢,到时候呢,我们会我们自己的功能函数啊。好,那就是这个,那么呃,我们看一下左侧这个效果啊,它上来呢,这是一个button,那么下面呢,有一个文本叫hello,然后呢,我们点击这个头像,注意啊,现在呢,会弹出微信授权的窗口。对吧,那这个呢,其实大家肯定见到过,哎,只不过在我们的真机上啊,注意在真机上,嗯,展现出来的这个UI界面呢,跟现在的模拟器它是不一样的。上的那个授权是在手机的下边。呃,在手机的下边,呃,出现这个弹窗,而不是说在上边啊,那这个呢,倒出个大用之机,一看就OK了。
01:08
那现在呢,我点个拒绝你看啊,在他这个初始化的项目里边啊,那这个八特呢就没了,其实这点呢,不太好啊不太好,那正常情况下,人家用户点击了拒绝你这个帮助还应该在,因为人家有可能说哎哦拒绝不行啊,那我再点一下,我是不是就能允许了呀。那现在你看啊,啥都不显示了,但是我还能点击这跳转,那这就尴尬了。嗯,那想要看到这个button怎么出来呢?啊,我们需要再去点一下这个变异。好过来啊,那这个候呢,我们再一次点击啊,注意我点允许,哎,这个时候大家能看到这儿显示的是我的微信头像和我的微信名称。哎,那也就是说在用户授权了以后,这是可以拿到我们用户的一些信息啊,那这个功能呢,待会儿我们来做啊,那这些信息里面呢,包含了用户的头像,以及用户的微信名称。
02:08
哎,那就是这个啊。好呃,了解了这个项目功能以后呢,那这节课呢,啊,我们再去创建一个新的文件夹啊。哎,在这里呢,我叫他啊,哎,Study好,那接下来呢,我们一点一点的去写一下这个项目里面的内容啊呃,熟悉一下,尽快熟悉里面的代码,好,现在呢,来到这个开发工具里面。呃,注意啊,我点击项目,我是可以在这里再去新建的。啊,看我怎么出来的啊,点击项目新建来在这里呢,我们去锁一下刚才我新建的这个文件夹在哪呢?在这儿,哎,Study我们选中它。那别的不变啊,像名称目录有了APPID呢,我就用我们当前项目的APPID啊,在这个基本信息里面啊,这里面有我呢,可以在这去复制一下啊,然后打开这个。
03:09
呃,输入ad的地方啊,下面呢,我们不使用云服务,然后点击新建这个流程呢,我们讲过啊。删的它再打开好的,那这个时候呢,它又开了一个新的项目啊,那这个项目呢,其实跟我们刚才的一模一样啊,一模一样,但是呢,呃,现在啊,我们要一点一点的写,所以接下来我会把里边的这些内容呢给它删掉。那这个时候呢,大家先看啊到这里哎,我再次打开项目的话,它上来就显示我当前用户的这个微信名称,还有微信头像了啊,那这是因为啥呢?如果用户在之前授权过啊,那么在我们的开发工具里边干嘛呀,它是有缓存的啊,有缓存的在哪能看到呢?你看这儿有个清除授权缓冲。
04:03
说明他之前是不是有。而这个缓存啊,而这个授权动作只需要发生一次。你想啊,在我们之前使用小程序的过程中,当你去玩某一款小程序的话。对吧,上来让你授权,那当你授权过了以后之后他就不会问了,除非你把授权的缓存清掉,那这个时候大家看啊,我点击清除这个授权缓存,然后呢,我们再去刷新一下我们的项目啊,那这个时候呢,你看这个八字就出来了。点击允许,诶八字没了,显示出来的是这个啊。好了,那下边呢,我们一点一点的去写啊,写的话呢,你注意看啊,这里边的东西啊,你比如说我不想要配了,我在这右键我就给它删了。我点击删除,你会发现在这里面删不掉啊,这个工具呢有个特点啊,我打开的项目,呃,以后呢,这些文件只要说我的项目之前正常加载了,那这你就不能杀,不能随便删。
05:06
那怎么办呢?啊,在这里我们删不掉啊,我们需要采取一个迂回战术啊,也是右键。我在硬盘打开,也就是说在本地打开我们的项目,注意现在呢,我们是在WeChat的study下边,对吧,那现在注意看我要去删,删呢删呢些啊,那像项目的配置文件以及S,那我们就不删了,给他留着,因为这两个呢,现在我们不需要我们写啊,不需要我们写。而且呢,这个项目里面还必须要有,所以呢,除了这两个啊之外的,我们都可以给他删掉,我点击删除。你看现在这个pages还删不了,你先不要管,你给它跳过。你看除了配次其他的是不是都删了呀,删了以后那这个怎么办呢?啊,我们可以再进来它里边在里边去删一次。走。
06:00
好,那现在呢,两个页面删掉了啊,后退我们把这个配置再给它删了就好了。哎,那这样的话呢,我们来到我们的项目啊,大家看现在呢这里。是不是只有这两个文件了,哎,啥都没了啊,那这个时候呢,我给大家打开调试器啊,你会发现,哎,这个下面一直在报错对不对啊,没问题,那你看这个项目上来会找什么APP点杰son的文件,哎,我们是不是没有了,那这样的话,一看到这个啊,我们就知道哦,我们需要一个什么APP点杰森来。如何去创建这个文件呢?看我们这个编辑啊区域啊,导航的左上角有个加号。我们点击这个加号啊,这儿有一个新建。文件对不对,你看你想新建什么,我们要是杰森那就是它呗,来个APP走。那这个里面呢,必须是一个对象啊,所以呢,我们先写一个对象,哎,那这个时候大家再看ABB阶page的字段需要为数组,也就是说我们现在需要一个page字段,这呢对应的是个数组。
07:09
哎,大家还记不记得这里面放什么呀?哎,对,放我们页面的路径,人家也告诉你了,至少需要存在一下。那现在呢,我们还没有页面啊,所以我们写不了页面路径,那就先给他放着。啊,先给它放着,那我们继续往下走,全局除了APP点杰森,我们还应该有一个必须的文件叫app.js。所以呢,我给他创建一下。那在这里边呢,上来呢,我们要去做的事情啊,就是注册,嗯,注册什么呀,注册我们的小程序啊应用这呢,应该首字母大写的APP调用。十题是吧,大家看我怎么出来的啊,其实在你没有输完的情况下,小程序呢,是有一个提示,APP对应的是个function,哎,我们一看啊,想用这个的话,你可以直接一敲回车来,对应的代码就自动补齐了。
08:07
嗯,那很方便是吧,那你看那现在呢,就是APP调用里边传入一个对象参数,而这些呢,就是在我们整个小程序应用的某一个时间段会触发的钩子函数,等同于咱们之前认知的什么呀,哎,生命周期函数一样。好,那这个呢,后面专门有一个章节呢,我去给大家讲这个生命周期啊,所以里边的东西你先不用看,那现在呢,你要知道啊,我们必须要有个app.gs并且呢,并且在这个里边呢,我们需要有这个APP调用。OK,那这是这个,那除了这个呢,其实还有一个文件啊叫APP点微信SS对吧,那在这个里面呢,用于放置我们啊全局什么呀,啊公共的样式文件,公共的啊样式文件。
09:02
那现在呢,我们还没有啊,那我们就先放着呗。好了,全局的三个文件我们整完了,哎,整完了,那这个时候啊,大家看到我们需要去干嘛了,需要去创建我们的页面了。那我们都知道啊,我们每个页面呢,有四个文件啊,咱们上午说过了对吧,那这四个文件我们为了方便管理它的话呢,通常会放到一个指定的文件夹下面,而不是全部的暴露在全局。啊,全部暴露在全局会有问题啊,你后期维护的时候特别的不方便,所以这个时候大家看啊,我点击加号呢,先去新建一个目录啊,就是文件夹啊,这里呢,我叫它P。哎,是它,然后呢,在它的下面呢,右键再去新建目录,假如说我们要玩首页的话,那我就整个index。嗯。在index下边,那我们去干嘛创建这个页面的文件,那这个时候呢,我们需要选中这个目录右键。
10:04
哎,你呢,可以分别去创建结构样式,行为等文件啊,但是这样的话效率很差。而在这个开发工具里边,为我们提供了一种简单的方式啊,就是新建配置。我点这个配置啊,点这个新建配置啊,看到右键新建配置。啊,意思就是新建页面的意思啊,在这里我输个index,看着我一回车。哎,那这个时候大家发现这儿多了四个文件同时报错没了,页面出来了。哎,那小伙伴们可以想一下啊,我右键新建配件的时候,他都干了哪些事情。首先我们能看到的是创建的四个文件,对不对,但是你想啊,我们讲完了,页面上想要显示某一个页面出来。那他必须是不能读到这个页面的路径啊。
11:00
在哪读这个路径呢?哎,对,在我们的点JS中,它呢,是不是有一个page选项,刚才我们写完这个数组,我们说没有页面的情况下,我们写不了,我没写。哎,这个时候你看页面的路径是不是已经有了。啊,那这样的话呢,能够证明一个事情啊,我们新建配件的时候,也是右键新建配件的时候,首先它会帮我们创建啊四个同名的文件,分别是结构行为样式和配置文件,同时会将当前页面的路径写入到我们哎全局配置配这个选项的数组里边。那这个页面路径的意思呢,代表是根目录下边page这一层,找index下边的所有index文件,首先呢,它会去加载你的结构,然后呢再去加载对应的样式呀,对吧,GS呀等等。OK,那这样的话呢,我们一个页面就出来了啊出来了,那么接下来我们先去干嘛,先去设置一下这个窗口的颜色,现在默认是不灰黑色的呀。
12:12
来呃,来到全局APP点监测里边,OK,我们设置窗口呢,是需要window这个选项。这个时候大家看啊,它同时呃,在这里呢,还是会有提示啊,我这输一个W,哎,我还没输完,哎这有个window,我一回车你看有这么多,那其实我们留上面这三个就够了啊,够了,呃,窗口的导航的背景颜色啊,我们故意换一个是它。啊,然后呢,字体的颜色呢,我给它调成白色啊对应的这个呢,啊,我们换成啊上硅谷OK,那这是这个。好,这里的两个小坑啊,再次强调一下,这个呢,只支持black和white。那也就是说黑色和白色,而这里呢,啊,窗口的背景颜色这一块呢,只支持16进制的表达方式啊,这一点大家要注意。
13:07
好了,嗯,窗口的配置写完了以后呢,我们去搭一下我们的页面啊,来来到页面里面,现在呢,页面的默认呢,只有一行文本啊,那么这个text对应的就是一个文本标签啊,等同于我们H5里边的什么SPA,哎,是个内联元素,那这肯定不是我们想要的,我们把它撤掉,我们自己去写。我们写的话,通常外边会放一个,因为它等同于我们的div嘛。这一个包裹器,那我们写啥呢?我们接下来要写的页面啊,咱们就跟这个保持一致就OK,打卡在这里,一个图片,一行文本,还有一行文本对吧,也就是说在这个页面里面有三部分内容,而且是纵向排列,水平居中。对吧,那这样的话呢,我们先去写一写啊在这里。
14:04
首先是一张图片呢,我需要用到一个image标签,那这里呢有个src。哎,是需要放置我们图片路径的,那现在呢,我们没有图片啊,我们先放着啊,那再往下呢,是个文本,那就T的标签啊,比如说呢,我先写写一个啊,静态的北方汉子。嗯,然后再往下的话啊,它是一个hello word的文本对不对,那这里呢,啊,我为了之后给大家讲一个语法呢,我会选择这样去写啊,我整一个负元素,然后呢,里面包裹一个子元素啊在这里呢啊,我们来一个啊,Hello,嗯,Word。OK,那这样的话呢,其实就是三部分内容啊,跟这个。差不多对吧,只不过我们现在没有图片,也没有什么样式。来,我们先去把图片的事情搞定啊,那对应的图片呢,哎,我们可以用哪呢?可以用我发给大家这个资料里面。
15:02
我去找一下啊,在我的代码硅谷影院里面有一个static啊,在它的下面呢,有个images啊,我们先拿过来用。好呃,我现在复制了一下,然后你要注意啊,在我们小程序的开发工具里面,是不支持直接复制粘贴的。所以在开发工具里边,我们没有办法直接把它粘贴进来,那怎么办?我们只能是在本地去操作,哎,来到WeChat study的项目里边,我们在这里在本地可以CRV。那这样的话呢,就把我刚才要粘的这个图片的文件夹粘过来了,里边呢,对应的是我们的图片内容呗。好,那现在啊,来到我们的开发工具里面。这里大家看啊,多了一个文件夹。因为是。对吧,啊然后呢,其实你为了统一的话呢,你最好是干嘛呀啊,开发我们项目的时候啊,开发我们项目的时候不应该把imagediates放到最外面啊,因为它现在呢,属于本地的图片,那就算静态资源,所以我们最好是给它放到什么这个sta下边,同时呢,把这个images啊放进来。
16:14
嗯,那现在呢,这儿又不让我去挪动啊,那正好给大家看一个点,他现在不让我挪,是因为这个目录在开着啊,这个项目开着我可以把它叉掉,然后呢再重试,你看就挪进去了。啊,挪进去以后呢,刚才呃,我是把我们刚才要我们写的项目关了啊,那可能有的同学说这关了再开是不是挺麻烦的呀,其实不麻烦。大家看着啊,在我们的开发工具中有一个查看所有项目,那看右侧啊,当你用这个工具呢,打开了某一个项目之后呢,在这里呢,会存在一个索引,它呢,可以快速的帮你去找到你对应的项目,并且启动它。那。选中我们这个we这个,哎。
17:03
项目的索引,然后呢,一点打开,它就能快速的去打开我们刚才关闭的项目啊。好,稍等。嗯,那这个项目呢,重新加载啊,那这个时候大家看啊,Static下面是不是有images,那给大家介绍一下啊,在images里面是我们接下来去写网易云音乐需要的所有图片。啊,这里呢,我放了一张备用的图片啊,就是说当我们没有动态数据的时候呢,我们会选择用这一招。哎,女神点JPG。对吧,啊,那这个呢啊是咱的女神啊,我呢不追星啊不追星,嗯,但是呢,嗯,就记得啊,以前去看那个倚天屠龙记就苏有朋那一版的,不知道大家有没有看过啊,里边的赵敏啊,就是他,哎,我当时真觉得。么的一边电。
18:08
哎,本地的图片有了,来到我们的项目,那现在呢,我们就去索引一下那张图啊,那怎么找呢?大家看着现在我们所在的位置呢,是index微信两种方式,要不然你是后退一再后退一集去找它下面的images。但这样的话很明显很麻烦,对不对,那用相对路径比较麻烦呢,这里我们用绝对路径会好一点啊,就是直接从我们项目的根目录找static。然后再找images,是不是可以快速的找到里边的这一张图。所以这里我可以这样去写啊,现在呢,应该是哎,Thetic下边的images下边啊女神点JPG。注意,以上的路径呢,是我自己全部敲出来了,因为在我们微信的开发工具里面,它是没有这个路径提示的啊,只能自力更生来保存一下,好图片是不出来了。
19:07
没有问题。呃,那这样的话呢。我们的结构都有了啊,接下来呢,咱们去写一下它的样式,来写样式的话呢,我们需要通过class去控制啊,那就class index container,给他起一些类名。那这个image这呢,对应的应该是我们用户的头像啊,所以呢,这儿呢,我叫他什么呀,A维ta ul。啊,头像的地址。那这个文本这呢,最终应该放的是用户的名字your name。啊,最后这呢,是正式的开启我们小程序之旅啊,我们这儿呢,就或者叫go。那下面hello word就是你学习任何一门新的语言呢,它都应该是现在个hello word来开始学习,那么那么对应的样式有了以后啊。呃,拉内有了,我们打开对应的样式,在这里面去写。首先我们看我们啊,它默认的项目它是纵向布局对吧,那如何让这些元素纵向去排列呢?啊,那我们的首选首先呢,我们找到我们最外边的这个包裹器啊,应该呢,让它成为一个flax核模型,伸缩和模型。
20:16
只不过flex布局里边默认主轴是X轴,也就是说默认是水平方向排列。而我们想要的是纵向,那这个时候呢,就需要我们去修改一下它主轴的方向啊,Flag direction。对吧。好,现在是纵向,然后啊想让它水平居中,那这个时候呢,因为侧轴是谁啊,是我们的S轴,那这个时候呢,我们可以用这个align items center去控制我们侧轴元素居中对吧?对应的还有个justify content为center啊,这个是控制主轴的,那现在呢,我们的主轴鼠标轴啊,我们用不上,所以啊,我们选择用上面这一个来保存一下。
21:03
打看是不是居中的。没有问题。OK,那接住了以后呢,我们去写一下之后这之后的东西啊,那个头像VURL对吧?呃,我们需要设置它的框高。哎,那这个时候呢,来到之前的项目里面啊,打开调试器,大家看一下,在我们控制台的左上角有一个啊小按钮,这个同Chrome浏览器的控制台一模一样。点击它,你可以移到你项目里面的任何一块区域去查看它的宽高,对吧,那现在大家看啊,这反馈出来的是64乘以64。那不要着急,我再往外边挪一点啊,你看一下整个项目页面反馈出来的宽度是多少呢?能看能看清楚对吧,375.2啊,那这不应该有点二是它计算的不是特别精确。啊,不是特别清切,那也就是说这个宽应该是多少,375。
22:04
对不?那看到这我就想问你了,那不管说这的375也好,还是说上边这个头像这的64乘以64也好。它们的单位是什么?单位我们现在有两种啊,一种是P叉,一种是RP叉,对吧。啊对啊,很明显这是多少呢?375P叉嘛,因为我们说过啊,在小程序里边任何页面的宽度是750RPX嘛,而F6的下边。那你的设备独立像素宽是不是375PX呀,OK,那这是这个啊。好,那现在啊,这个64乘以64的头像,我觉得它有点小,不好看,假设啊,我们这量出来的是100乘以100。P叉,请问我在这里?写宽度应该怎么写?
23:02
啊Y假设啊,我们不知道,我们写个宽高都是100P叉来保存一下。大家看啊,这个宽度有,并且呢,打开我们的调试器,我们去看一眼。是100乘以100没有问题,可是啊,你看着我切换一个机型,哎,点击左上角这来到678PLUS。你看啊,液面的宽度呢,已经是414了,已经是414,而现在你看我们看外边。啊,414.4啊,这是它计算的不精确啊,那整个页面的话是414啊,可是你看这个头像还是100乘100。那现在你们看到的这种情况呢,是典型的没有做适配。也就是说我们页面里面的内容呢,它并没有随着页面屏幕的大小的变化而跟着变。
24:01
这是典型的没有适配。那最起码我们知道啊,六下面它是100乘以100,那在6PLUS下面就不应该是这个了,肯定要比这个大对不对,所以我们在这里呢,就不能用PX单位了,我们需要用什么,用RPX,但是你要想清楚啊,这个值还能是100吗?啊,那我切换到六七半啊,我们以它为主。还能剩不剩,还能剩100吗?呃,不行,F6下面我们说过EPX身上是不是应该有两个RPX呀,所以这里呢,应该是多少呢?应该是。二那二那也说对应的是200RPS对不对?保存一下重新编译。好的,那这个时候呢,我们再看啊,移上来,注意现在反馈出来的还是100乘以100,也就是说虽然你写的是RPX,可是在模拟器上面它是不显示的是PX单位啊。
25:03
OK,没有问题来,那现在呢,我们用的是小程序的适配单位RPS,那这个时候呢,我再给大家切换一下机型啊,来到678PLUS。好,我们再看一下这个图片多大,哎,大家看这那现在反馈出来的是吧,一百一乘一百一啊,那说明啥,说明这个图片呢,跟着我们啊,屏幕的宽度大小的变化二。变化对不对,OK,没有问题,那这个呢是典型的适配。好了,那知道了这个以后呢,我们还是切换到F6啊,那并且这个换算呢,是我们第一次在呃这个代码里面用成啊这一点呢大家要注意,那接下来呢,我们再补充一点样式吧,Border radiOS啊,比如说我们来一个50%整一个圆角对吧,然后呢,我们来一个market吧,啊上下100RPS啊左右为零,保存一下。
26:02
哎,那这样的话是不是好看一点,好那就是这个,那再往下呢,我们这儿写一下那个U2NAME,嗯,那这个呢就比较简单了,FOX里边来个32R PX啊这呢我也我也来一个market啊呃,左右为零,上下100。往下推一点,哎,变方汉字是不是在这里,那下面的hello word这一块啊,大家看我怎么写hello word这呢,它是不是有一个负。负容器里边有个文本对吧,我就写它啊,Go study。这go study呢,我给大家写一个Y吧啊,这儿呢来一个300RPS啊高的话呢,我们来个多少80吧,那这样的话呢,行高80原本是不是水呃,垂直居中了呀,再来一个text line啊,Center水平居中对吧?Fo sign,我们来个28吧,RPX。同时呢,我们来一个border啊erps so,井号颜色重一点吧,333。
27:05
嗯,这样一个框是不是就有了好的,呃,好看一点,稍微带点圆角啊,比如说来十个像素的圆角。OK,那这样的话呢,我们一个静态页面就搭完了,而且呢,我还觉得比它那个要好看一点。来,那现在啊。我们的静态页面当完了,把样式也调完了,我再加一个需求,再加一个需求,我要求你这个页面的背景颜色跟我们窗口的背景颜色一致。哎,那怎么做呢?嗯,按照我们现在的写法,你整个页面,那我最外边的容器不就是它吗?对吧,所以哎,我的第一反应,那一定是给它去加一个什么背景颜色呗,啊be brown,然后呢,井号FS呗。保存。哎,那这个时候大家看啊,我加是加了,但是我们这个容器呢,其实就到这儿。
28:05
那谁能给我解释一下,为什么就到这儿,下面是空白,没有的。哎,很好,因为现在我们用的是flex布,它是一个弹性盒子,而这个弹性盒子呢,我们并没有指定它的宽高,所以它的高度应该是由内容撑开的,而它里边的内容是不是就到这里呀?所以到这是正常现象,对不对,那我们想让它撑满整个屏幕,我们怎么做呢?写100%是吗?来,那我们加个100%啊,HEIGHT100%保存。嗯,大家看啊,还是到这儿。啊,首先问大家啊,当你们写了100%,你是想干嘛?你一定是想继承它负元素的高度,对不对,那当你写了100%,这个没有生效,有两种情况啊,一种是你的继承失败了,还有一种情况是你的负元素也这么高。
29:08
也这么高,那有同学就纳闷了,我这个最外边了,我哪还有什么负元素呢,对吧?哎,我们打开我们的调试器啊。在这里啊,Console console这个我们用过了啊,打卡下面这个警告你可以不用关心,为什么呢?呃,这个不是我们写错了啊,它是告诉你哎,根据这个规则,哪个页面将被索引啊,现在我们只有一个页面啊,而且我们在这个页面,也就是说这个页面呢,可以被微信的啊,这个搜索引擎爬虫去爬取到而已,因为它是一个新的规则啊,所以呢,会在控制台告诉你而已。啊,这个不是咱的问题啊,那。那么除了cons呢,再给大家说一个就是这个微信ma,呃,这个呢,是查看我们小程序页面结构的地方。大家看啊,刚才我们写的最外层是不是它。诶,你会发现在这个最外边呢,有一个配置标签。
30:04
这是哪来的呢?注意啊,小程序会自动的为所有的页面外面加一个配置标签,而这个配置标签相当于是H5的HTM标签,是最外边的。那刚才我们文用的100%看右侧,其实就是在继承他。哎,那现在我给它移到配置,你会发现它的高度也是这么高。说明这哥们儿现在没有自己的高度,是不是靠里面的内容撑开呀?而且大家看啊,在它的右侧是有它的默认样式。在这里边呢,它仅仅是指定的宽度是100%。对吧。没有说明高度吗?所以刚刚的继承,继承是继承过来了,但是没用,因为它也靠子元素撑开。OK,那这是这一点,那这个时候怎么办呢?哎,我们需要给外边的这个配置,是不是要加一个高度。
31:05
哎,那讲到这儿呢,我得说一下,呃,可能有的小伙伴呢,看过其他老师讲的视频啊,你会发现很多人在讲的时候上来说,哎,我们需要给配音姐去设一个宽高分别为100%。其实没必要啊,我们只需要给他设什么,设它的高度就行了,因为它的宽度默认是有的。最外边这个标签应该是整个页面的100%,至于说你里边的内容多高,随便你啊,但是这个呢,应该是100%,否则的话就会有这种问题。所以我们应该是来到样式里面啊,我在这儿呢,去给这个配置加一个什么高度是100%,我们先来看保存。哎,那这个时候呢,大家看就满屏了,回头你再调试,你看配件100%啊,V呢也是100%。对吧,没有问题,好,那现在出来是出来了,但有一点我得说这个配件。
32:06
第一个我没有用class类去写,对不对,那是因为。这个P标签不是我们写的,我们没有办法去给它添加class,所以只能用标签选择器。哎,这是其一第二点啊,这个配置放到这儿不太合适。因为刚才我说过啊,我说小程序会自动的为所有的页面外面加一个配置标签。而每个页面呢,其实都需要这个配置的高度是100%,那现在我们的样式呢,是写在了这个。我们index这个页面里边了,那其他的页面用不了。其他页面想要用是不是也得再写一次啊,所以放到这儿不合适啊,那大家想想放到哪儿呢?哎,对,我们可以将这个内容呢,放到我们的公共钥匙里面。放到这里保存一下。
33:02
你会发现那样式肯定还没问题啊,但是这样的话呢,是不是每个页面都可以享受这个样式啊。OK,那这是这个啊好了,本节课呢,我们主要是去熟悉了一下啊,如何去搭建它的页面啊,并且呢,去写它的样式,以及我们自己呢,去创建了一下这些文件。OK,那这个呢,需要大家快速的去练一下啊,跟上来,然后呢,咱们下节课继续,我呢先把这个视频停一下。
我来说两句