uniapp——第4篇：分析一下全局文件、配置

前提，建议先学会前端几大基础：HTML、CSS、JS、Ajax，还有一定要会Vue!（Vue2\Vue3）都要会！！！不然不好懂

一、uniapp项目创建新包放乱杂文件

我们的项目结构里有一个包叫static，他会把页面的资源都打包编译，包括图片、js文件、css文件......那么如果static里有一些垃圾文件或者大量视频音频，那整体的小程序体积就会变大

uniapp对static的解释：工程简介 | uni-app官网

那么就需要创建于一个新的包（目录/文件夹）用来放各种垃圾或者测试文件，叫啥名都无所谓，但是一般来说都叫【common】

二、引入外部css文件

学习HTML和CSS的时候也知道，有的时候css和html写在一个页面确实挺烦的挺难看的

我们通常会在外部来写css文件，然后导入html文件就行

那么怎么uniapp怎么导入外部css文件？就在你要导入的页面的<style>区域这样：

<style>
    @import "@/你的css文件目录"
</style>

这里注意：1、我们可以把css文件放在common文件夹下

                  2、采用根目录方式获取css文件路径，也就是从项目根目录一直到css文件的目录

                  3、绝不可以漏了"@/"，它的意思就是根目录

当然你还可以在css文件去引入外部css文件、在less文件去引入外部less文件、在scss文件去引入外部scss文件，方法是一样的

三、page.json配置页面、小程序窗口、导航栏全局配置

这些是page.json文件的所有配置属性：（来自官方文档pages.json 页面路由 | uni-app官网）

"pages"页面配置

首先，“pages”配置项是把你所有写的pages目录下的页面配置好，配置完了你才能看到你写的页面，排在第一位的是小程序启动的第一个页面

"path"：填页面文件的路径

"style"：填对应各自页面的头部窗口的样式、顶部大标题......

"globalStyle"顶部窗口配置

然后"globalStyle"是全局的顶部窗口的样式

至于为什么上面图片里globalStyle设置了"navigationBarTitleText"为"uni-app"，而窗口显示的是"中国陶瓷历史时间轴"？因为我在"pages"页面配置的时候对它做了局部配置，覆盖了这的全局配置

tabBar导航栏

导航栏就是一直显示在顶部或底部的那一条玩意，点它跳转页面

需要在pages.json里手动添加一个"tabBar"配置项，然后第一个"selectedColor"是指被点击选中时文字的颜色、"list"是就配置的导航栏上每一个页面按钮（最多5个）

"list"里面对应配置每个按钮跳转到那个页面的路径、文字、未点击选中时的图片、点击选中是的图片......（这里给一个免费小图标网址：iconfont-阿里巴巴矢量图标库）

这是官方文档的配置项，自己试吧：

"list"的配置项

四、manifest.json应用配置

manifest.json是应用的配置，类似于“设置”，不用写代码的

就提几点：

在uniapp写的项目转到微信开发者工具，是不能直接上传的，需要回到uniapp的manifest.json找到【微信小程序配置】——>【微信小程序AppID】去把你在微信小程序官网（微信小程序）注册的AppID写上去，注册步骤很简单，自己试一下或者查一下就行了

这里的【上传代码时自动压缩】选上，可以压缩小程序体积，不至于上传时体积过大不给过

然后在【源码视图】这里可以写代码，最下面这几个配置可以了解一下