响应式单位rpx及搭配UI产品工具和@import导入css样式和scss变量与用法static目录以及pages.json页面路由globaStyle的属性和pages设置路径及窗口表现

1.响应式单位rpx及搭配UI产品工具

1.对于rpx的认知和用法以及对于px的区别

我们可以去官网先了解一下我们的rpx用法和注意以及与px的区别。

链接：页面样式与布局 | uni-app官网 (dcloud.net.cn)

我平时使用的px是我们的屏幕像素的单位，我们在一个页面创建一个view组件，并且给其在style组件里面赋予css样式，让其宽高都在200px左右。

保存好了之后在页面中进行运行，来查看我们的结果。

切换到了另一个的展示效果的展示

产生真中差异的是因为我们的px是固定的，并不会随着我们的页面变化而发生变化。我们可以使用设置百分比来解决。

我们还有一个单位是与我们的%一样的效果 vw 效果是和我们的百分比一致的，可以自己去将我们的百分比改为vw尝试。

我们也可以设置为rpx来实现我们的控制我们的页面显示区域。

这个时候我们可以进行切换我们的显示模式。

不过如果是我们的iPad的话是会有区别的。

我们的rpx是默认满屏的宽度为750rpx，所以我们设置为355rpx可以看的我们的页面占比都差不多是一半的页面。

我们也可以对其的logo进行修改，来实现我们的效果。

2.ui的基本认知和作用

我们如果是在一些并不清楚的图片上进行一块区域的调用，这个时候我们不能轻松的得到我们需要的宽度或者高度时，我们将需要的区域进行截图放入ui这可以在我们的UI里面的得到我们的宽和高

链接：https://mastergo.com

我们也可以我们的设计稿进行宽度的改变，比如我们的宽度并不是750的话可以进行手动改变。

如果说你并不会使用的话或者很生疏可以进入我们的资源社区来进行练习。

可以自己按照别人提供的稿子来进行设置。

2.@import导入css样式和scss变量与用法static目录

1.static目录

我们在给我们的页面样式赋予值的时候，如果有多个页面的同一个组件可以需要赋予相同的样式的话可以使用我们的App.vue里面的style组件给我们需要的组件进行赋值。

这说明了我们的当前页面的设置是要大于我们App.vue里面设置的样式的。

如果你需要在设置一个通用且会有许多的css样式设置的话，在我们的App.vue里面就显得不合适了，这时候我们可以在我们的static目录里面进行设置。我们先去vue的官网里面了解一下我们的static目录。

链接：工程简介 | uni-app官网 (dcloud.net.cn)

我们根据这里面的提示来创建一个common 目录，在这个目录里面创建两个文件夹分别是css和scss。

2.@import导入

我们创建好css文件夹时在里面在创建一个css文件，写上我们的通用属性。

使用我们的@import导入我们的css文件

保存好了之后区域页面查看效果

3.scss变量

我们在左侧的目录最小方可以看的我们的scss文件，打开它会发现有着许多的样式，这个是已经设置好了的，可以在我们的页面直接使用。

可以看到我们的颜色已经是可以清晰的看的我们的文字已经改变颜色了。我们也可以去使用一些其他的变量，比如背景颜色、边框颜色、文字尺寸等。

如果说这里面没有你想要的格式可以自己创建变量。

如果在使用我们的变量发生了错误可以重启一下项目，因为这是预编译的在我们使用的时候并没有读取到，所以我们需要重启项目之后再次使用。

也可以在我们的自己创建的scss目录里面创建自己的变量，如果你是移动了你所使用的变量的话，需要重新启动项目，否则还是在使用你之前的那个变量的位置。

这个时候页面并不会报错，因为我们还是使用之前的变量位置，重启之后就会报错，我们需要在我们系统提供的scss文件里面导入我们的自己创建的scss文件。

完成这些之后重启项目即可。

3.pages.json页面路由globaStyle的属性

1.了解pages.json页面路由globaStyle的属性

我们可以在官网里面了解一下我们的页面配置和用法

链接：pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

我们在启动页面的时候可以看的我们的页面上方有一个区域上面是有我们这个页面的标签的，如果没有可以去我们的pages.json里面给我们进行添加。

我们如果想要对我们的导航进行改变也可以在我们的pages.json里面改变。

比如说改成#ccc也就是灰色，保存好了之后在我们的页面中查看效果，也可以在我们的微信小程序里面查看效果。

我们也可以修改我们的导航上面的文字颜色，使用我们的的navigationBarTextStyle 不过它仅支持白色white或者黑色black。

我们也可以对于我们的导航的文字进行修改，需要使用到我们的navigationBarTitleText属性

如果说你并没有修改成功的话是因为权限问题，在我们的页面里面也使用的navigationBarTitleText并且对其进行了赋值，我们可以直接删除这个属性即可看的我们修改的导航文字。

如果并不想要这个导航栏的话也可以去除，去除导航栏需要使用到"navigationStyle": "custom"，

也可以设置下拉框刷新的颜色，设置下拉刷新的话需要手动开启一个属性enablePullDownRefresh这个才能开启我们的下拉刷新。

使用backgroundTextStyle可以改变我们的下拉刷新的样式。

在使用程序的时候经常会出现到底触发，如果需要实现这个功能可以使用onReachBottom来实现。

当然也可以提前触发这个触底函数onReachBottomDistance默认值为50

4.pages设置路径及窗口表现

1.pages设置路径及窗口表现及其用法

我们在pages.json文件里面可以看的我们的有多少个页面就会有多少个pages，每一个pages都包含了两个属性，一个是path路劲，另一个是style是窗口表现。

可以在官网里面先了解一下我们的pages的知识

链接：pages.json 页面路由 | uni-app官网 (dcloud.net.cn)

我们可以对单独的一个页面的导航进行颜色改变，使用style里面的navigationBarBackgroundColor

导航的字体颜色也是一样可以自己设置的使用：navigationBarTextStyle  即可完成。

如果你想要一开始就执行的页面是当前页面的话，可以改变我们当前页面在pages文件里面的位置

使用navigationBarTitleText可以设置导航的标题。

如果设置了全页面下拉刷新，但是又有几个页面不应该给其下拉刷新的话，可以设置

enablePullDownRefresh并且给其值赋予“false”即可

如果只想个别的页面下拉刷新，则反过来就可以了改变值为true

我们可以使用"navigationStyle": "custom"来设置某个页面或者全部页面没有导航条。