推荐（免费）：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个模块的导航栏设置。
以上就是uni-app介绍全局样式引入和底部导航栏开发的详细内容。