推薦（免費）：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即可，如下：
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，如下：
再在pages/index/index.vue中使用導入的圖標，如下：
Hello
顯示：
可以看到，顯示了圖標，並且可以自訂樣式。
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中導入，如下：
在使用時，需要為元素添加class，目前使用的是4.1.1版本的animate.css，需要新增基本類別animate__animated，同時也需要根據選擇的動畫效果添加類別為animate__動畫名稱，例如animate__rubberBand，動畫名稱可以根據需要在https://animate. style/頁面右側選擇，並點選複製即可，如下：
此時取得到的就是帶有animate__前綴的動畫類別名稱。
index.vue中示範如下：
Hello 橡胶带点击效果 摆动点击效果 向左下角旋转点击效果
其中，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如下：
动态页
再配置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个模块的导航栏设置。
以上是uni-app介紹全域樣式引入和底部導覽列開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
