uni-app 跨端开发 H5、小程序、IOS、Android（四）：了解 uni-app 项目结构
上一篇：
uni-app 跨端开发 H5、小程序、IOS、Android（三）：理解 uni-app 框架 MVVM 思想
大家好，我是黑马腾云。
这是一个原创系列连载文章，基于企业真实项目案例分享经验，带你快速入门 uni-app 开发！欢迎点击头像关注，避免迷路！
上一篇文章浅析了框架思想，本篇文章分析 uni-app 项目的目录结构及主要文件的作用。
一、目录结构
新建默认 uni-app 项目后，目录结构如下图：
1、目录介绍
pages
页面文件存放的目录，页面后缀名为.vue。
static
存入应用静态资源文件的目录，如图片、视频等。静态资源文件只能存放到这个目录。
App.vue
页面的入口文件，用来配置 App 全局样式及监听应用的生命周期。虽然后缀名为.vue，但是它本身不是页面，因此不能再里边编写视图元素。
main.js
uni-app 的入口文件，主要用于初始化 vue 实例、定义全局组件和其它插件等。
manifest.json
项目配置文件，配置应用名称、appid、logo、版本等打包信息。
pages.json
页面配置文件，配置页面路由、导航条、选项卡等页面类信息。
uni.scss
控制应用的整体风格，预置了一批 scss 变量。一般可以不用关注此文件。
注意：以上目录结构仅为本文写作时的结构，官方更新比较频发，具体请参照官网。比如 uni.scss 文件也是后来才加上去的，再之前的模板中是不存在此文件的。
2、页面管理
创建页面
创建页面后会自动在 pages.json 中添加页面的路由等配置信息。
注意：
删除页面(项目区在目录或文件上右击-删除)，不会自动删除 pages.json 中的页面配置信息，需要手动删除，否则运行将报错 “文件查找失败：...”。
删除页面，直接从磁盘中删除，移入回收站。
3、启动页面设置
page.json 文件中的 pages 配置项，第一个配置项即为启动页面。如果想让某个页面启动时显示，就让在第一个位置即可。
4、页面标题设置
全局标题和局部标题都在 pages.json 文件中设置，如上图：globalStyle 中的 navigationBarTitleText 设置全局标题，而 pages 中的 style 里的同名 navigationBarTitleText 则是配置某个页面的标题。
页面配置优先级高于全局配置，会直接覆盖全局的同名配置。
5、样式设置
同页面标题一样，样式也分为全局样式和局部样式，局部同名样式将覆盖全局样式。
全局样式写在 App.vue 文件中，而局部样式则直接写在页面文件的 style 标签内。
6、配置文件
配置文件为 manifest.json，可以用可视化界面配置，也可以直接用源码模式修改。
App、H5、各种小程序的设置都是在此文件中进行的。再次就不具体展开了，以后实例部分用到再讲。
二、资源路径说明
1、模板内引入静态资源
template 内引入静态资源，如 image、video 等标签的 src 属性时，可以使用相对路径或者绝对路径，形式如下
注意：
@开头的绝对路径以及相对路径会经过 base64 转换规则校验 引入的静态资源在非 h5 平台，均不转为 base64。 H5 平台，小于 4kb 的资源会被转换成 base64，其余不转。 自 HBuilderX 2.6.6-alpha 起 template 内支持 @开头路径引入静态资源，旧版本不支持此方式 App 平台自 HBuilderX 2.6.9-alpha 起 template 节点中引用静态资源文件时（如：图片），调整查找策略为【基于当前文件的路径搜索】，与其他平台保持一致 支付宝小程序组件内 image 标签不可使用相对路径
2、JS 文件引入
js 文件或 script 标签内（包括 renderjs 等）引入 js 文件时，可以使用相对路径和绝对路径，形式如下
注意：
js 文件不支持使用/开头的方式引入
3、css 引入静态资源
css 文件或 style 标签内引入 css 文件时（scss、less 文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6-alpha）
注意：
自 HBuilderX 2.6.6-alpha 起支持绝对路径引入静态资源，旧版本不支持此方式
css 文件或 style 标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端 css 文件不允许引用本地文件（请看注意事项）
注意：
@开头的绝对路径以及相对路径会经过 base64 转换规则校验 不支持本地图片的平台，小于 40kb，一定会转 base64。（共四个平台 mp-weixin, mp-qq, mp-toutiao, app v2）
h5 平台，小于 4kb 会转 base64，超出 4kb 时不转。
其余平台不会转 base64
4、引入字体图标
uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点：
支持网络路径字体图标。
小程序不支持在 css 中使用本地文件，包括本地的背景图和字体文件。需以 base64 方式方可使用。App 端在 v3 模式以前，也有相同限制。v3 编译模式起支持直接使用本地背景图和字体。
网络路径必须加协议头 https。
iconfont 官网上拷贝的代码，默认没有加协议头。
使用本地路径图标字体需要注意：
方便开发者，在字体文件小于 40kb 时，uni-app 会自动将其转化为 base64 格式；
字体文件大于等于 40kb，仍转换为 base64 方式使用的话可能有性能问题，如开发者必须使用，则需自己将其转
换为 base64 格式使用，或将其挪到服务器上，从网络地址引用；
字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。
实例：
上图示例是通过 Unicode 编码使用 iconfont 字体的效果。
iconfont 字体可以从官网下载到本地引入项目，也可以直接使用在线 cdn 加速。使用时可以使用 css 名称也可以直接使用 Unicode 编码。
下一篇文章再进一步研究下 uni-app 数据绑定。
讨论时间：
平时你一般都用哪些字体图标呢？留言区见
作者介绍：
黑马腾云，码农、创业者、终身学习者！
乐于分享技术、创业、人生思考。关注我，一起为人生喝彩！
上一篇：
uni-app 跨端开发 H5、小程序、IOS、Android（三）：理解 uni-app 框架 MVVM 思想
版权声明: 本文为 InfoQ 作者【黑马腾云】的原创文章。
原文链接:【http://xie.infoq.cn/article/e3f92d789aa21e87835ec2a2b】。未经作者许可，禁止转载。
程序员、终身学习者、创业者。 2020.06.22 加入
“自学帮”公众号主。
评论