跳到主要内容

uni-app 项目目录结构

1. 前言​

在创建完成 uni-app 项目后，系统会默认帮我们生成一些文件，这些文件就是初始项目目录结构。

日常开发过程中，都是需要在这个目录结构的基础上面完成项目搭建，所以，我们首先需要了解这个初始目录结构各个目录的含义。

在创建项目时，选择不同的模板生成的项目目录是不一样的，我们先介绍两个最常见的项目模板，uni-ui 项目模板、Hello uni-app 模板。了解这两个项目模板生成的项目目录，其他模板生成的目录也可以掌握。

我们本小节来了解一下项目目录以及这些文件夹的作用。

2. uni-ui 项目目录介绍​

创建项目时，我们可以选择创建什么类型的模板，如果选择 uni-ui 项目模板，系统就会自动帮我们生成下面的项目目录。

各文件的作用如下：

文件名称作用
components是一个用来存放组件的文件夹，从外部引用的组件，或者自己自定义的组件都是放在这个文件夹中
pages是一个用来存放所有页面的文件夹，也是我们经常操作的一个目录
static是一个存放静态资源的文件夹，例如图片等
unpackage是打包目录，存放打包后的文件。有些新建项目目录中没有这个文件夹，在微信开发者工具等编译平台运行后，也会生成这个文件。
App.vue是页面入口文件，所有页面都是在 App.vue 下进行切换的，可以调用应用的生命周期函数
main.js是项目入口文件，主要用来初始化 vue 实例并使用需要的插件
manifest.json是应用配置文件，用于指定应用的名称、图标、权限等
pages.json是全局配置文件，可以配置页面文件路径、窗口样式、原生的导航栏、底部 tab 栏等
uni.scss是 uni-app 的样式包。在其他文件中可以快速引用样式包里面的样式

其中 unpackage 打包目录，存放的是打包后的文件，有时候打包后会出现图片或者组件失效的情况，可以检查一下引用路径是否有错误。

3. Hello uni-app 项目目录介绍​

创建项目时，选择 Hello uni-app 项目模板，项目创建完成后，会帮我们生成下面的项目目录。其中有几个文件与 uni-ui 项目目录重复了，作用都是一样的。

各文件的作用如下：

文件名称作用
common是存放公共 js 和 css 的文件夹
components是用来存放组件的文件夹
hybrid是存放本地网页 .html 文件的文件夹
pages是用来存放所有页面的文件夹
platforms是存放各平台专用页面的文件夹，如果想把各平台的页面文件更彻底的分开，可以 platforms 目录中创建子目录，存放不同平台的页面文件
static是存放静态资源的文件夹
store是 vuex 状态管理文件夹，在 uni-app 项目内置了 vuex，使用时直接在 main.js 里面配置一下就可以了
wxcomponents存放小程序组件的目录，详见 2.1
unpackage打包目录
App.vue页面入口文件
main.js项目入口文件
manifest.json应用配置文件
package.json是项目的主配置文件，里面包含了 uni-app 项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息
pages.json全局配置文件
template.h5.html是 h5 端的网页模板文件
uni.scssuni-app 的样式包

4. 各平台小程序组件存放目录​

uni-app 还有一个非常牛的地方，就是支持在 App 和小程序中使用小程序自定义的组件，支持情况如下：

平台支持情况小程序组件存放目录
H5从 HBuilderX2.4.7 起，支持微信小程序组件wxcomponents
App（不含 nvue）支持微信小程序组件wxcomponents
微信小程序支持微信小程序组件wxcomponents
支付宝小程序支持支付宝小程序组件mycomponents
百度小程序支持百度小程序组件swancomponents
字节跳动小程序支持字节跳动小程序组件ttcomponents
QQ 小程序支持 QQ 小程序组件wxcomponents

4.1 使用方式​

在项目根目录下的 pages.json 文件中，在页面属性 styles 中增加下面的设置。

实例：

{
  "path" : "index/index",
  "style":{
       "usingComponents":{
            "custom":"/wxcomponents/custom/index"
            "custom":"/swancomponents/custom/index"
            "custom":"/mycomponents/custom/index"
         }
   }
 }

在页面中使用实例:

<view>
  <custom name="uni-app"></custom>
</view>

5. 小结​

系统根据通常开发的情况，帮我们生成了这个项目目录。这些项目目录不是一成不变的，我们可以按需使用，也可以自己继续在这个目录中新建文件夹。本节主要介绍了 uni-app 项目目录，重点如下：

  • 使用 uni-ui 模式创建项目时，项目目录以及各个文件夹的作用；
  • 使用 Hello uni-app 模式创建项目时，项目目录以及各个文件夹的作用；
  • 各个平台小程序组件存放目录以及使用方式。