推薦（免費(fèi)）：uni-app開發(fā)教程

前言

本文先介紹了uni-app項(xiàng)目中引入全局樣式的種類，即App.vue中引入官方CSS樣式庫、自定義圖標(biāo)庫和CSS動(dòng)畫庫；再介紹了在pages.json中定義globalStyle；最后實(shí)現(xiàn)了項(xiàng)目的導(dǎo)航欄開發(fā)。

一、App.vue引入全局樣式

一個(gè)標(biāo)準(zhǔn)的uni-app項(xiàng)目的目錄結(jié)構(gòu)如下：

┌─cloudfunctions        云函數(shù)目錄 │─components            符合vue組件規(guī)范的uni-app組件目錄 │  └─comp-a.vue         可復(fù)用的a組件 ├─hybrid                存放本地網(wǎng)頁的目錄 ├─platforms             存放各平臺(tái)專用頁面的目錄 ├─pages                 業(yè)務(wù)頁面文件存放的目錄 │  ├─index │  │  └─index.vue       index頁面 │  └─list │     └─list.vue        list頁面 ├─static                存放應(yīng)用引用靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此 ├─wxcomponents          存放小程序組件的目錄 ├─main.js               Vue初始化入口文件 ├─App.vue               應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽 ├─manifest.json         配置應(yīng)用名稱、appid、logo、版本等打包信息 └─pages.json            配置頁面路由、導(dǎo)航條、選項(xiàng)卡等頁面類信息

其中，App.vue是uni-app的主組件，所有頁面都是在App.vue下進(jìn)行切換的，是頁面入口文件，App.vue本身不是頁面、不能編寫視圖元素。
這個(gè)文件的作用包括：調(diào)用應(yīng)用生命周期函數(shù)、配置全局樣式、配置全局的存儲(chǔ)globalData。
調(diào)用生命周期函數(shù)可以實(shí)現(xiàn)很多在特定的生命周期需要執(zhí)行的動(dòng)作，如在onLaunch時(shí)可以進(jìn)行檢測更新、網(wǎng)絡(luò)監(jiān)聽、初始化數(shù)據(jù)等，onHide可用于應(yīng)用運(yùn)行到后臺(tái)時(shí)暫停音樂、視頻的播放。
該文件中可以引入樣式、圖標(biāo)和動(dòng)畫等。

1.引入官方CSS樣式庫

新建一個(gè)uni-app項(xiàng)目，模板選擇Hello uni-app，項(xiàng)目目錄下有common目錄，下有uni.css文件，即為官方CSS樣式庫，在Community_Dating目錄下新建common目錄，并將uni.css拷貝到common目錄下。
同時(shí)需要將Hello uni-app項(xiàng)目static目錄下的uni.ttf字體文件拷貝到Community_Dating項(xiàng)目的static目錄下。

如需直接使用樣式、字體和素材等文件，可以直接點(diǎn)擊加QQ群 963624318 ，在群文件夾uni-app實(shí)戰(zhàn)之社區(qū)交友APP中下載即可。

此時(shí)再在Community_Dating的App.vue文件中導(dǎo)入uni.css即可，如下：

<script> 	export default { 		onLaunch: function() { 			console.log('App Launch') 		}, 		onShow: function() { 			console.log('App Show') 		}, 		onHide: function() { 			console.log('App Hide') 		} 	}</script><style> 	/*每個(gè)頁面公共css */ 	@import url("./common/uni.css");</style>

2.引入自定義圖標(biāo)庫

引入的圖標(biāo)主要是引入iconfont（https://www.iconfont.cn/）提供的圖標(biāo)。
需要先根據(jù)關(guān)鍵字搜索所需要的圖標(biāo)，并選擇喜歡的圖標(biāo)添加至購物車，再到購物車中添加圖標(biāo)到當(dāng)前項(xiàng)目（如果還沒有項(xiàng)目可以直接創(chuàng)建形目再添加），再將圖標(biāo)和樣式下載到本地。
演示如下：

解壓下載的壓縮包，將其中的iconfont.css拷貝到common目錄下，并改名為icon.css，并修改其中的內(nèi)容，刪除對(duì)其他平臺(tái)的兼容，只保留base64的圖片即可，類似如下：

@font-face {font-family: "iconfont";   src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAALcAAsAAAAABpQAAAKNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcAqBIIEfATYCJAMICwYABCAFhG0HMBvFBcguMRUZ6a5kMRUuoHi5tW+/rgBAGIKnb7/fnd15Nh8Ti6JZtCQaoXySeLSuiUMjUZJYxUt4/7umuZYP3fR/viyrBkw/6fU4l5IbCsdGbXbCt27AitTkEqCAqwECzMynzSFqL2aS/uqBP8B/f9w7/b8BFMh8512Oa2+a1AUYTw5wL1xLuEBCb5hevsCB2A0BjDoZ0uzg+DxJoehBAsi6yXZIquBAURaOEcKGmYocE7HbcW0IR9H35Z9SKXAEHp21sIF90v1DE8VBGgcITghofgB4oAdBQVYaA3OiCCNEscUxmhAUReDr8LEKOaocYX+dTs0BoAYynonpWI9K6wBQSIUBhEmE17d6yWlm+uPnwtPv0uPP4v2Xc5bJZG+Rpc0y+Qx2cSOS7V6cnZcvXVK6cG4qsdcGePEtChB7yc7w2SlnNe20rD29ytTbkVuVrU63u641tfd8sU/ua+6gZmttpz9DwO7mbRmj/ylFAfjI8IGoT5pV4rMgPodR4F8xB5apYGu104vlC+AYEL2HHMOAFGQp8jlVUnpjESGm9PZMEbUZeGJaUMX3QECGEQiJmQCj29D8DMW4KKIJ0OUUgFDgBhx5PICnQAdV/AcElPmDkIKiYKxVvGKGtkx5huOOwH3YbYG557nUqoUcp88iq9k7PM+OiIvIQ9MNxVyhHB5CF/kSY8I6KwlBgXLPgUGwH9q2Bz73qrgnchUh/HI+T5tulNvzHCIzg0M7BLQP7GoBpj0eFw2qC3Ll87MQU2PbwTtKcvpFiAuZ7YOinMIAdEjgDip5lENCdUyJIFCA4jwOMAi6IZvNA/zmblVoj5BTmeDzleVNJTpUkNte5PzdGsDQUiemkyfcqHi1FhICAAAA') format('woff2');}.iconfont {   font-family: "iconfont" !important;   font-size: 16px;   font-style: normal;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;}.icon-shouye:before {   content: "e681";}

再在App.vue中導(dǎo)入font.css，如下：

<script> 	export default { 		onLaunch: function() { 			console.log('App Launch') 		}, 		onShow: function() { 			console.log('App Show') 		}, 		onHide: function() { 			console.log('App Hide') 		} 	}</script><style> 	/*每個(gè)頁面公共css */ 	/* 官方CSS庫 */ 	@import url("./common/uni.css"); 	/* 自定義圖標(biāo)庫 */ 	@import url("./common/icon.css");</style>

再在pages/index/index.vue中使用導(dǎo)入的圖標(biāo)，如下：

<template> 	<view> 		<text class="iconfont icon-shouye" style="font-size: 100rpx; color: #007AFF;">Hello</text> 	</view></template><script> 	export default { 		data() { 			return { 				 			} 		}, 		onLoad() {  		}, 		methods: {  		} 	}</script><style> 	</style>

顯示：

可以看到，顯示了圖標(biāo)，并且可以自定義樣式。

3.引入CSS動(dòng)畫庫

動(dòng)畫庫可以選擇使用animate.css（https://animate.style/）。
直接訪問CDN下載CSS文件，地址為https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css，右鍵選擇另存為并保存即可，將其復(fù)制到common目錄下，再在App.vue中導(dǎo)入，如下：

<script> 	export default { 		onLaunch: function() { 			console.log('App Launch') 		}, 		onShow: function() { 			console.log('App Show') 		}, 		onHide: function() { 			console.log('App Hide') 		} 	}</script><style> 	/*每個(gè)頁面公共css */ 	/* 官方CSS庫 */ 	@import url("./common/uni.css"); 	/* 自定義圖標(biāo)庫 */ 	@import url("./common/icon.css"); 	/* 動(dòng)畫庫 */ 	@import url("./common/animate.css");</style>

在使用時(shí)，需要給元素添加class，目前使用的是4.1.1版本的animate.css，需要添加基本類animate__animated，同時(shí)還需要根據(jù)選擇的動(dòng)畫效果添加類為animate__動(dòng)畫名稱，例如animate__rubberBand，動(dòng)畫名稱可以根據(jù)需要在https://animate.style/頁面右側(cè)選擇，并點(diǎn)擊復(fù)制即可，如下：

此時(shí)獲取到的就是帶animate__前綴的動(dòng)畫類名稱。
index.vue中演示如下：

<template> 	<view> 		<text class="iconfont icon-shouye" style="font-size: 100rpx; color: #007AFF;">Hello</text> 		<view style="display: flex; justify-content: center; padding: 50rpx;"> 			<view class="animate__animated" hover-class="animate__rubberBand" style="border: 5rpx solid #4CD964; padding: 20rpx;">橡膠帶點(diǎn)擊效果</view> 		</view> 		<view style="display: flex; justify-content: center; padding: 50rpx;"> 			<view class="animate__animated" hover-class="animate__swing" style="border: 5rpx solid #4CD964; padding: 20rpx;">擺動(dòng)點(diǎn)擊效果</view> 		</view> 		<view style="display: flex; justify-content: center; padding: 50rpx;"> 			<view class="animate__animated" hover-class="animate__rotateInDownLeft" style="border: 5rpx solid #4CD964; padding: 20rpx;">向左下角旋轉(zhuǎn)點(diǎn)擊效果</view> 		</view> 	</view></template><script> 	export default { 		data() { 			return {  			} 		}, 		onLoad() {  		}, 		methods: {  		} 	}</script><style></style>

其中，hover-class屬性用于指定按下去的樣式類，當(dāng)hover-class="none"時(shí)，沒有點(diǎn)擊態(tài)效果。

演示如下：

可以看到，實(shí)現(xiàn)了動(dòng)畫效果。

說明：
微信小程序?qū)?dòng)畫效果的支持不高，可以選擇Android或者iOS端進(jìn)行真機(jī)測試。

還可以使用v-if條件渲染實(shí)現(xiàn)動(dòng)畫效果，或者進(jìn)行列表渲染時(shí)加入動(dòng)畫效果。

二、設(shè)置全局屬性globalStyle

pages.json文件用來對(duì) uni-app 進(jìn)行全局配置，定義頁面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的原生tabbar 等。

pages.json如下：

{ 	"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages 		{ 			"path": "pages/index/index", 			"style": { 				"navigationBarTitleText": "uni-app" 			} 		} 	], 	"globalStyle": { 		"navigationBarTextStyle": "black", 		"navigationBarTitleText": "uni-app", 		"navigationBarBackgroundColor": "#F8F8F8", 		"backgroundColor": "#F8F8F8" 	}}

可以看到，是以對(duì)象的形式存儲(chǔ)的：
第一個(gè)屬性是pages，用來定義所有頁面，包括路徑、樣式等；
第二個(gè)屬性是globalStyle，用于配置全局樣式，其屬性和含義可參考https://uniapp.dcloud.net.cn/collocation/pages?id=globalstyle。
常見屬性及其含義如下：

pages.json配置如下：

{ 	"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages 		{ 			"path": "pages/index/index", 			"style": { 				// "navigationBarTitleText": "uni-app" 			} 		} 	], 	"globalStyle": { 		"navigationBarTextStyle": "black", 		"navigationBarTitleText": "Community Dating", 		"navigationBarBackgroundColor": "#FFFFFF", 		"backgroundColor": "#FFFFFF" 	}}

頁面效果如下：

顯然，顯示了自定義的全局樣式。

三、底部導(dǎo)航欄開發(fā)

底部導(dǎo)航欄主要包括社區(qū)、動(dòng)態(tài)、消息和我的4個(gè)模塊，需要準(zhǔn)備圖標(biāo)（未選中和選中兩種狀態(tài)），可以在iconfont上選擇并下載即可，以我的為例，演示如下：

下載好4組圖標(biāo)并重命名之后，需要在static目錄下新建tabbar目錄，將這些圖標(biāo)拷貝到該目錄下。

配置tabbar時(shí)可參考文檔https://uniapp.dcloud.net.cn/collocation/pages?id=tabbar，具體配置如下：
（1）在pages目錄下新建其他3個(gè)頁面：
直接右鍵pages選擇新建頁面，以news頁面為例如下：

并編輯pages/news/news.vue如下：

<template> 	<view> 		動(dòng)態(tài)頁	</view></template><script> 	export default { 		data() { 			return { 				 			} 		}, 		methods: { 			 		} 	}</script><style></style>

再配置pages.json如下：

{ 	"pages": [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dòng)頁，參考：https://uniapp.dcloud.io/collocation/pages 		{ 			"path": "pages/index/index", 			"style": { 				// "navigationBarTitleText": "uni-app" 			} 		} 	    ,{             "path" : "pages/news/news",             "style" :                                                                                                 {                 "navigationBarTitleText": "",                 "enablePullDownRefresh": false             }                      }         ,{             "path" : "pages/msg/msg",             "style" :                                                                                                 {                 "navigationBarTitleText": "",                 "enablePullDownRefresh": false             }                      }         ,{             "path" : "pages/my/my",             "style" :                                                                                                 {                 "navigationBarTitleText": "",                 "enablePullDownRefresh": false             }                      }     ], 	"globalStyle": { 		"navigationBarTextStyle": "black", 		"navigationBarTitleText": "Community Dating", 		"navigationBarBackgroundColor": "#FFFFFF", 		"backgroundColor": "#FFFFFF" 	}, 	"tabBar": { 		"color":"#323232", 		"selectedColor":"#ED6384", 		"backgroundColor":"#FFFFFF", 		"borderStyle": "black", 		"list": [ 			{ 				"pagePath": "pages/index/index", 				"text": "首頁", 				"iconPath": "static/tabbar/index.png", 				"selectedIconPath": "static/tabbar/indexed.png" 			}, 			{ 				"pagePath": "pages/news/news", 				"text": "動(dòng)態(tài)", 				"iconPath": "static/tabbar/news.png", 				"selectedIconPath": "static/tabbar/newsed.png" 			}, 			{ 				"pagePath": "pages/msg/msg", 				"text": "消息", 				"iconPath": "static/tabbar/paper.png", 				"selectedIconPath": "static/tabbar/papered.png" 			}, 			{ 				"pagePath": "pages/my/my", 				"text": "我的", 				"iconPath": "static/tabbar/home.png", 				"selectedIconPath": "static/tabbar/homed.png" 			} 		] 	}}

顯示：

顯然，已經(jīng)完成底部導(dǎo)航欄配置。

總結(jié)

uni-app項(xiàng)目中App.vue是程序的入口文件，可以導(dǎo)入CSS樣式、第三方的圖標(biāo)和動(dòng)畫庫，從而加速開發(fā)；pages.json文件用于配置頁面文件的路徑、窗口樣式和底部原生tabbar等，全局樣式globalStyle也在該文件中配置；實(shí)現(xiàn)了項(xiàng)目的社區(qū)、動(dòng)態(tài)、消息和我的4個(gè)模塊的導(dǎo)航欄設(shè)置。