00:00
大家好,这块我们来说一下页面布局,关于页面布局呢,没有太多要讲解的地方,就和传统的H5页面开发一样,那只不过我们把这个啊div呢都换成了这个VI啊,SPA换成了text,要使用UN提供的这些组件来完成我们的页面布局,那在页面布局的时候,大家一定要熟悉啊,这个UNAPP的整个文档就是它所有的一个可用的一个组件,有一些可以直接使用的组件,没必要我们再去啊,再写一遍,比如说啊这个per啊,比如说这个像这个表单相关的一些组件,大家一定要把这个内置的这个组件都看完了啊,那才知道我们在布局的时候可以更方便的去使用哪些组件来完成我们想要的一个效果,那首先呢,页面布局呢,我们把我们的代码啊写到这个temp play里面,注意temp play的最外层只能有一个啊跟元素,如果你写两个,它就会以报错啊,比如现在写了两个。它就会报错啊好,最外层只能有一个根元素啊,当然这个根元素呢,并不限制是什么啊,你可以是其他的,但必须得保证是只有一个这个根元素,那我们在这里面来写一个啊VI来准备写我们的这个哎,页面布局相关的,那首先说一下我们的CSSCSS呢可以写到啊最下方的这个style,这对标签里面,那我们定义在这里面的这个标签,这个样式的话,是直接可以在这个啊里面使用class进行使用的,比如这里我们来写一个啊背景颜色。
01:23
笔记。Color,然后给他一个背景颜色啊,给他一个蓝色吧,然后这个样式我们就可以直接使用到啊,这个view上面给它一个class来进行使用,这样的话我们的页面就会有了这个背景颜色啊,蓝色的个背景颜色,那同样呢,这个啊style我们也可以在这里给它加上一个LA来指定我们要写的啊CS的一个源的类型,那主要是指定一些预处理器啊,域编译器,那比如我们这里想使用SSS就把它指定成SS,那你要使用SARS呢,来保证你的这个工具里面是安装了这个SS的这个插件的啊,当然如果我们下载的这个HP的是完整的APP开发版,是包含了这个插件的,所以我们可以直接使用这个SS,那使用SS之后我们就可以使用啊SS的一些语法,比如说定义变量啊,比如说嵌套的啊去写,比如我们在这里面再来定义一个啊,点text啊,我们指定这个text text的颜色是。
02:22
这个啊,红色。好,那这个时候就是可以在这个贝卡里面去找它的啊,下面的这个T来给它的文字设置这个红色,那比如我们这里面写两个view,一个是这个一,然后第二个是这个R,然我给这个221个class。使用这个T,那这个R2就会有具备,哎,我们这个颜色。来看一下这二二是红色,当然你在其他地方去使用这个text是哎不生效的,比如说我们上面的这个,呃,红色的这个字啊,红色的这个字,我们如果把它给改成啊这个叹字。
03:03
写错位置了啊,我们写到class里面,诶,如果我们给他指定这个text,让这个也变成红色的一个字,我们来刷新一下,可以看到这个字是不变的,那通过检查元素,我们会发现这个text是谁,下面的text是贝卡下面的text,那当然就是呃这个呃SS的一个简单的一个用法,我们还可以对于这个SS是用贝啥的,那想跟大家说,就是说如果你想要使用一些预输理器,可以在这指定这个了,那。还有一个可以在这里指定一个加上这个SC之后,那我们的这个样式,它就会给我们加上一个随机的一个。选择器,这样的话,我们写的这个样式只对当前的这个组件生效,那我们来保存看一下啊。现在来刷新,我们来再来检查这个样式,你就会发现它这后面多了一个data杠啊,这么一个属性选择器。啊,每个组件呢,都会随机一个哈希值,这样就保证了我们这里定义的这个样式只对当前的组件有用,防止一些啊,我们定义的样式对全局的样式进行一个污染啊,这个是。
04:02
那如果我们想要引入web的样式,可以直接在这里面来引入外部的这个样式,比如我们现在这个news下面来新建一个样式文件CS文件。那比如这个就叫news.c。好在这里面呢,我们来写一个啊,Fo杠二零啊,就是字体是这个20大小,Fo-SIZE20啊,那我们写成40RPX啊,关于这个RX等会再跟大家说啊。好,接下来我们怎么引入这个user点啊,CSS呢,直接使用at input,然后后面加上CSS的位置啊,当前目录下的。News加CSS,好,那我们给最后一个这个啊,给这个一加上一个class,让他使用这个方根二零保存来看下效果。
05:00
这里应该要加上一个分号啊,少了一个分号,好,这时候可以看到这个一一,它的字体是,哎,这个。变大了啊,检查是20X,那我们这里写的是40RPX怎么到这里就转成了20PX呢?这是我接下来要说的一个,哎单位就是我们在写这个样式的时候呢,呃,可以用H5,我们之前写页面所有用到的一些啊这个单位啊,就是用到这些单位,那同时呢,还可以去使用UN提供的这个RPS这个单位,RPS的单位呢,是会根据不同的设备来进行一个换算,那比如我们现在把这个设备切到这个678PLUS再去刷新,你会发现。这个字体大小它就变成了22啊,那关于它的这个换算关系呢,它是以这个宽度750进行换算的,也就是说我们如果把我们的设备切换到678的时候啊,因为显示的是它是按750算,但实际上这里显示375,它是有一个二倍的关系,我们就是以678它的宽度实际宽度就是750去进行换算的,这个RPX大概是2R PX等于EPX,那我们这里写的40,大家可以看到这里显示的是20,所以我们在开发UN的时候,推荐大家使用678这个设备,这样的话我们再进行这个单位的计算,进行换算的时候可以啊,进行1:2的一个简单的一个换算啊,那切换到其他设备的时候呢,它会根据设备屏幕的一个大小啊进行相应的增大或者减小,那如果切换到哎五这个设备它就变成10T啊,这是一个详式的一个单位,那关于它详细的一个换算关系,在小程序的文档里面有详细的一个换算关系,因为这个RPX一开始是在小程序上面出现的,就是关于我们可以使用的一些单位,当然像我们之前啊用到这些,比如说这个PX。
06:39
啊,Em re啊,包括这个啊,VHWH这些都是可以去用的,包括百分比,那百分比呢,是在计算宽度的时候是可以用的啊。当然也可以使用RPS,推荐大家使用RPX啊。因为它会根据不同的设备去进行单位的一个换算,推荐使用RPX会根据不同的设备进行换算。
07:01
不同的这个设备进行换算。啊。然后它的这个换算的关系大概是在750宽度下,750宽度下。2RPX啊,等于这个EPX这个换算关系,大家你要记住啊,其他的设备我们不用关心它怎么换算啊,我们算起来比较费事,我们就在750宽度下,750呢,恰好是啊,IPhone这个678它的这么一个宽度,当然我们这里看到是375。最后再给大家说一下,我们在使用哎,在进行页面布局的时候,尽可能的啊使用这个flex布局啊,因为flex布局在移动端是兼容性比较好的啊,然后尽量的去少用这个啊定位,因为在不同的这个设备的屏幕的尺寸不同的情况下,你的定位可能会出现一些偏差。好,那关于啊页面布局以及样式这一块,我们就说到这里,那这小节先到这里。
我来说两句