uni-app 项目目录结构

1. 前言

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

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

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

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

2. uni-ui 项目目录介绍

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

各文件的作用如下：

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

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

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

各文件的作用如下：

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

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

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 模式创建项目时，项目目录以及各个文件夹的作用；
• 各个平台小程序组件存放目录以及使用方式。