uni-app全域性樣式和區域性樣式

BNTang發表於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 中然後檢視效果即可。