站長資訊網
推薦（免費）：uni-app開發教程
前言
本文先介紹了uni-app項目中引入全局樣式的種類，即App.vue中引入官方CSS樣式庫、自定義圖標庫和CSS動畫庫；再介紹了在pages.json中定義globalStyle；最后實現了項目的導航欄開發。
一、App.vue引入全局樣式
一個標準的uni-app項目的目錄結構如下：
┌─cloudfunctions 云函數目錄 │─components 符合vue組件規范的uni-app組件目錄 │ └─comp-a.vue 可復用的a組件 ├─hybrid 存放本地網頁的目錄 ├─platforms 存放各平臺專用頁面的目錄 ├─pages 業務頁面文件存放的目錄 │ ├─index │ │ └─index.vue index頁面 │ └─list │ └─list.vue list頁面 ├─static 存放應用引用靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放于此 ├─wxcomponents 存放小程序組件的目錄 ├─main.js Vue初始化入口文件 ├─App.vue 應用配置，用來配置App全局樣式以及監聽 ├─manifest.json 配置應用名稱、appid、logo、版本等打包信息 └─pages.json 配置頁面路由、導航條、選項卡等頁面類信息
其中，App.vue是uni-app的主組件，所有頁面都是在App.vue下進行切換的，是頁面入口文件，App.vue本身不是頁面、不能編寫視圖元素。
這個文件的作用包括：調用應用生命周期函數、配置全局樣式、配置全局的存儲globalData。
調用生命周期函數可以實現很多在特定的生命周期需要執行的動作，如在onLaunch時可以進行檢測更新、網絡監聽、初始化數據等，onHide可用于應用運行到后臺時暫停音樂、視頻的播放。
該文件中可以引入樣式、圖標和動畫等。
1.引入官方CSS樣式庫
新建一個uni-app項目，模板選擇Hello uni-app，項目目錄下有common目錄，下有uni.css文件，即為官方CSS樣式庫，在Community_Dating目錄下新建common目錄，并將uni.css拷貝到common目錄下。
同時需要將Hello uni-app項目static目錄下的uni.ttf字體文件拷貝到Community_Dating項目的static目錄下。
如需直接使用樣式、字體和素材等文件，可以直接點擊加QQ群
963624318 ，在群文件夾uni-app實戰之社區交友APP中下載即可。
此時再在Community_Dating的App.vue文件中導入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> /*每個頁面公共css */ @import url("./common/uni.css");</style>
2.引入自定義圖標庫
引入的圖標主要是引入iconfont（https://www.iconfont.cn/）提供的圖標。
需要先根據關鍵字搜索所需要的圖標，并選擇喜歡的圖標添加至購物車，再到購物車中添加圖標到當前項目（如果還沒有項目可以直接創建形目再添加），再將圖標和樣式下載到本地。
演示如下：
解壓下載的壓縮包，將其中的iconfont.css拷貝到common目錄下，并改名為icon.css，并修改其中的內容，刪除對其他平臺的兼容，只保留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中導入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> /*每個頁面公共css */ /* 官方CSS庫 */ @import url("./common/uni.css"); /* 自定義圖標庫 */ @import url("./common/icon.css");</style>
再在pages/index/index.vue中使用導入的圖標，如下：
<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>
顯示：
可以看到，顯示了圖標，并且可以自定義樣式。
3.引入CSS動畫庫
動畫庫可以選擇使用animate.css（https://animate.style/）。
直接訪問CDN下載CSS文件，地址為https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css，右鍵選擇另存為并保存即可，將其復制到common目錄下，再在App.vue中導入，如下：
<script> export default { onLaunch: function() { console.log('App Launch') }, onShow: function() { console.log('App Show') }, onHide: function() { console.log('App Hide') } }</script><style> /*每個頁面公共css */ /* 官方CSS庫 */ @import url("./common/uni.css"); /* 自定義圖標庫 */ @import url("./common/icon.css"); /* 動畫庫 */ @import url("./common/animate.css");</style>
在使用時，需要給元素添加class，目前使用的是4.1.1版本的animate.css，需要添加基本類animate__animated，同時還需要根據選擇的動畫效果添加類為animate__動畫名稱，例如animate__rubberBand，動畫名稱可以根據需要在https://animate.style/頁面右側選擇，并點擊復制即可，如下：
此時獲取到的就是帶animate__前綴的動畫類名稱。
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;">橡膠帶點擊效果</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;">擺動點擊效果</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;">向左下角旋轉點擊效果</view> </view> </view></template><script> export default { data() { return { } }, onLoad() { }, methods: { } }</script><style></style>
其中，hover-class屬性用于指定按下去的樣式類，當hover-class="none"時，沒有點擊態效果。
演示如下：
可以看到，實現了動畫效果。
說明：
微信小程序對動畫效果的支持不高，可以選擇Android或者iOS端進行真機測試。
還可以使用v-if條件渲染實現動畫效果，或者進行列表渲染時加入動畫效果。
二、設置全局屬性globalStyle
pages.json文件用來對 uni-app 進行全局配置，定義頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等。
pages.json如下：
{ "pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }}
可以看到，是以對象的形式存儲的：
第一個屬性是pages，用來定義所有頁面，包括路徑、樣式等；
第二個屬性是globalStyle，用于配置全局樣式，其屬性和含義可參考https://uniapp.dcloud.net.cn/collocation/pages?id=globalstyle。
常見屬性及其含義如下：
| 屬性 | 類型 | 默認值 | 描述 |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #F7F7F7 | 導航欄背景顏色（同狀態欄背景色） |
| navigationBarTextStyle | String | white | 導航欄標題顏色及狀態欄前景顏色，僅支持 black/white |
| navigationBarTitleText | String | 無 | 導航欄標題文字內容 |
| navigationStyle | String | default | 導航欄樣式，僅支持 default/custom。custom即取消默認的原生導航欄 |
| backgroundColor | HexColor | #ffffff | 下拉顯示出來的窗口的背景色 |
| backgroundTextStyle | String | dark | 下拉 loading 的樣式，僅支持 dark / light |
| enablePullDownRefresh | Boolean | false | 是否開啟下拉刷新 |
| onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發時距頁面底部距離，單位只支持px |
| backgroundColorTop | HexColor | #ffffff | 頂部窗口的背景色（bounce回彈區域） |
| backgroundColorBottom | HexColor | #ffffff | 底部窗口的背景色（bounce回彈區域） |
| titleImage | String | 無 | 導航欄圖片地址（替換當前文字標題），支付寶小程序內必須使用https的圖片鏈接地址 |
pages.json配置如下：
{ "pages": [ //pages數組中第一項表示應用啟動頁，參考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { // "navigationBarTitleText": "uni-app" } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "Community Dating", "navigationBarBackgroundColor": "#FFFFFF", "backgroundColor": "#FFFFFF" }}
頁面效果如下：
顯然，顯示了自定義的全局樣式。
三、底部導航欄開發
底部導航欄主要包括社區、動態、消息和我的4個模塊，需要準備圖標（未選中和選中兩種狀態），可以在iconfont上選擇并下載即可，以我的為例，演示如下：
下載好4組圖標并重命名之后，需要在static目錄下新建tabbar目錄，將這些圖標拷貝到該目錄下。
配置tabbar時可參考文檔https://uniapp.dcloud.net.cn/collocation/pages?id=tabbar，具體配置如下：
（1）在pages目錄下新建其他3個頁面：
直接右鍵pages選擇新建頁面，以news頁面為例如下：
并編輯pages/news/news.vue如下：
<template> <view> 動態頁 </view></template><script> export default { data() { return { } }, methods: { } }</script><style></style>
再配置pages.json如下：
{ "pages": [ //pages數組中第一項表示應用啟動頁，參考：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": "動態", "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" } ] }}
顯示：
顯然，已經完成底部導航欄配置。
總結
uni-app項目中App.vue是程序的入口文件，可以導入CSS樣式、第三方的圖標和動畫庫，從而加速開發；pages.json文件用于配置頁面文件的路徑、窗口樣式和底部原生tabbar等，全局樣式globalStyle也在該文件中配置；實現了項目的社區、動態、消息和我的4個模塊的導航欄設置。
