uniapp目录结构-uniapp入门教程

当前位置:　首页>> 技术小册>> uniapp入门教程

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

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

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

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

### 2. uni-ui 项目目录介绍
创建项目时，我们可以选择创建什么类型的模板，如果选择 uni-ui 项目模板，系统就会自动帮我们生成下面的项目目录。
![](/uploads/images/20230222/2c00972855f99fcc7cacf7f056c53284.jpeg)

各文件的作用如下：

| 文件名称           | 作用                                                          |
|----------------|-------------------------------------------------------------|
|  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 项目目录重复了，作用都是一样的。![](/uploads/images/20230222/9e36917b7b157771bf6f5f81c0e791a9.jpeg)

各文件的作用如下：

| 文件名称              | 作用                                                                   |
|-------------------|----------------------------------------------------------------------|
|  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.scss         | uni-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 中增加下面的设置。
实例：
```json
{
  "path" : "index/index",
  "style":{
       "usingComponents":{
            "custom":"/wxcomponents/custom/index"
            "custom":"/swancomponents/custom/index"
            "custom":"/mycomponents/custom/index"
         }
   }
 }

```

在页面中使用实例:
```json
<view>
  <custom name="uni-app"></custom>
</view>

```

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

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

该分类下的相关小册推荐：

uni-app零基础入门