2.【UniApp】-uni-app全局样式和局部样式2023-12-07

前言

好，经过上个章节的介绍完毕之后，了解了一下 UniApp 的一个全局 页面配置文件，也就是我们的一个 pages.json 文件。

那么了解完了这个文件之后，这片文章，再了解一下 UniApp 的一个全局样式和我们的局部样式。

搭建演示环境

创建一个全新的项目：

然后在配置一下，微信小程序的 AppId，直接去之前的项目中拷贝一下即可，找到之前项目的 manifest.json 文件，然后选择微信小程序配置，复制一下即可：

我这里使用两个页面来进行展示，分别是首页与账号页面，账号页面是没有的所以需要我们自行创建，创建方式前面讲过了，所以我这里就不会在重新介绍，我直接将两个页面的代码都贴在下方，大家自行拿去，然后我分别将两个也没的样式都给去掉了，就为了本次文章要介绍的内容而准备的。

index.vue

<template>
	<view>
		<text>{{title}}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '首页页面'
			}
		}
	}
</script>

<style>
</style>

account.vue

<template>
	<view>
		<text>{{ title }}</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '账号页面'
			}
		}
	}
</script>

<style>

</style>

嗯，好，页面创建好了，接下来还要做一件事情就是处理一下 pages.json 配置一下 tabBar 这个 tabBar 的配置直接拷贝之前的内容即可，内容如下，很简单就是配置了首页和账号的 tabBar 与首页与账号的页面路由配置：

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path" : "pages/account/account",
			"style" : 
			{
				"navigationBarTitleText" : "账号"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"text": "首页"
		}, {
			"pagePath": "pages/account/account",
			"text": "账号"
		}]
	}
}

步入正题

好了，经过前面的几步之后，我们的环境已经没有问题了，我自行运行测试过了，没问题之后就可以来看全局样式与局部样式了。

全局样式

首先我们抛出第一个问题，就是我们全局样式写到什么地方？其实是写到 App.vue 当中：

局部样式

再来看看局部样式，那么局部的样式写到哪呢，我相信大家或许已经猜到了，没错就是写到每个页面自己当中即可，因为每个页面当中是不是都有一个 style，这个标签当中编写的样式就是我们的一个叫做局部样式。

注意点

还有一些注意点我们需要了解一下，过去大家学习 Vue 的时候，是不是都知道 style 标签是可以指定 CSS 样式所使用的语言，例如有 Scss，Less，还是说用 stylus,一般情况下我们用 Scss。

过去大家学习 Vue 的时候, 在 style 标签位置是不是还可以用 scoped 来指定当中编写的样式是全局样式还是局部样式

注意点：

（全局样式）全局样式的 style 上不能写 scoped, 如果你写了那么很遗憾是无效的
（局部样式）局部样式的 style 上不用写 scoped，也是局部的

验证

说了，这么多知道在哪编写全局样式与局部样式之后，我们来写一下吧，实战动手一下，这样更加的可以体会到。

首先来看我们的全局样式，例如我有 title 这么一个 class 类名，然后我分别给首页与账号页面进行使用，我只在 App.vue 的 style 中编写了这个 title 类名的样式，那么两个组件所使用的就是 App.vue 中的，因为两个组件各自都没有编写自己的样式所以会使用全局的样式进行渲染。

打开浏览器进行查看，即可验证我这么一个说法是正确的。

看完了全局样式，接下来就是局部样式了，很简单，我们直接在首页的 style 中编写一下 title 的样式即可：

打开浏览器，查看，首页的文字是蓝色的 blue：

而我们的账号页面文字是红色的：

通过自行浏览器查看，就可以明确的看到首页使用的是自己局部的样式，而账号页面使用的是全局的样式。

好，通过如上的示例介绍，了解完了在哪编写我们的一个全局样式，在哪编写我们这个局部样式，以及全局样式和局部样式的一个注意点，接下来还有一个文件，是我本次文章要介绍的内容，就是 uni.scss 这个文件。

uni.scss

这个文件有什么作用呢？这个文件是专门用于保存全局的样式 变量 的。

打开文件里面有一段介绍:

/**
 * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
 *
 * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
 */

通过 同时无需 import 这个文件 这句话得出这是一个定义了全局的 scss 样式变量文件。

在这个文件中，我们常做的事情就 3件事：

定义全局的 scss 样式变量
通过修改系统内置的 scss 样式变量来定制组件的样式
通过修改系统内置的 scss 样式变量来定制扩展组件的样式

我相信第一点大家都不会有什么疑问，主要针对第二点与第三点，我来给大家举几个例子。

先来看 第二点，过去我们在开发系统当中是不是有 button 这么一个组件，那么在 UniApp 当中他也提供了 button，但是他提供的 button 是自带一套 UI 样式的，例如按钮的文字边距，按钮的样式，按钮的点击颜色等等，这个时候你要是想更改这些属性，例如按钮的颜色，你只需要更改这个系统内置的 scss 变量的颜色值即可达到更改。

第三点，过去大家学习 Vue，Vue 中有内置组件，或者 Element 也有内置组件，Element 是基于 Vue 来定制了一套自己的内置组件，那么在 UniApp 当中也是一样的，UniApp 当中有自己的内置组件（这里说的是我们的第二点）。

那么除了有自己的一些内置组件，他还有一套自己的扩展组件, 他这套扩展就相当于 Element。

这个时候可以来打开 UniApp 的官网：组件使用的入门教程 | uni-app官网 (dcloud.net.cn)

这个 uni-ui 相当于就是饿了么框架，就是在原有的组件上面又扩展了一套组件，这些组件的样式呢，都可以在 uni.scss 中修改和内置组件是一样的，只不过是同一个人开发的，而 Vue 的内置组件，和饿了么是不同人开发的。

而 UniApp 里面它的内置组件和它扩展组件是同一个团队开发的，就这么简单。

首先我们来看第一件事，后面的两件事之后再说。

第一件事

定义全局的 scss 样式变量

如果你不知道可以在 uni.scss 中定义全局 scss 变量，你的做法，可能是在 static 中定义全局变量 scss 文件, 然后在 app.vue 中导入。

注意：如果你导入的是 scss 文件，那么 style 上必须指定 lang 为 scss 才可以。

.css 文件我这里略过了，和 .scss 文件一样，如上的这个示例是你在不知道可以在 uni.scss 中定义的情况下，那么知道了之后，你就可以不用这么写了，改造一下之前的代码，使用定义在 uni.scss 替代，删除在 app.vue 导入 base.scss 的代码，将颜色变量转移到 uni.scss 中然后查看效果即可。