上一篇

大家好，我是黑马腾云。

这是一个原创系列连载文章，基于企业真实项目案例分享经验，带你快速入门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文件时，可以使用相对路径和绝对路径，形式如下

// 绝对路径，@指向项目根目录，在cli项目中@指向src目录
import add from '@/common/add.js'
// 相对路径
import add from '../../common/add.js'

注意：

js文件不支持使用/开头的方式引入

3、css引入静态资源

css文件或style标签内引入css文件时（scss、less文件同理），可以使用相对路径或绝对路径（HBuilderX 2.6.6-alpha）

/* 绝对路径 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相对路径 */
@import url('../../common/uni.css');

注意：

自HBuilderX 2.6.6-alpha起支持绝对路径引入静态资源，旧版本不支持此方式

css文件或style标签内引用的图片路径可以使用相对路径也可以使用绝对路径，需要注意的是，有些小程序端css文件不允许引用本地文件（请看注意事项）

/* 绝对路径 */
background-image: url(/static/logo.png);
background-image: url(@/static/logo.png);
/* 相对路径 */
background-image: url(../../static/logo.png);

注意：

@开头的绝对路径以及相对路径会经过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 格式使用，或将其挪到服务器上，从网络地址引用；

字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

 @font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

实例：

上图示例是通过Unicode编码使用iconfont字体的效果。

iconfont字体可以从官网下载到本地引入项目，也可以直接使用在线cdn加速。使用时可以使用css名称也可以直接使用Unicode编码。

下一篇文章再进一步研究下uni-app数据绑定。

平时你一般都用哪些字体图标呢？留言区见

作者介绍：

黑马腾云，码农、创业者、终身学习者！

乐于分享技术、创业、人生思考。关注我，一起为人生喝彩！

上一篇