前言
本文先介绍了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目录下。
此时再在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 { &