UniApp 工程

1. 工程简介

一个 uni-app 工程，就是一个 Vue 项目，你可以通过 HBuilderX 或 cli 方式快速创建 uni-app 工程，详见：快速上手。

2. 目录结构

一个 uni-app 工程，默认包含如下目录及文件：

┌─uniCloud              云空间目录，支付宝小程序云为 uniCloud-alipay，阿里云为 uniCloud-aliyun，腾讯云为 uniCloud-tcb（详见 [uniCloud](https://uniapp.dcloud.io/uniCloud/quickstart?structure&id=structure)）
│─components            符合 vue 组件规范的 uni-app 组件目录
│  └─comp-a.vue         可复用的 a 组件
├─utssdk                存放 uts 文件（已废弃）
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index 页面
│  └─list
│     └─list.vue        list 页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
├─uni_modules           存放 uni_module，[详见](https://uniapp.dcloud.net.cn/plugin/uni_modules.html)
├─platforms             存放各平台专用页面的目录，[详见](https://zh.uniapp.dcloud.io/tutorial/platform?id=%E6%95%B4%E4%BD%93%E7%9B%AE%E5%BD%95%E6%9D%A1%E4%BB%B6%E7%BC%96%E8%AF%91)
├─nativeplugins         App 原生语言插件，[详见](https://nativesupport.dcloud.net.cn/NativePlugin/README)
├─nativeResources       App 端原生资源目录
│  ├─android            Android 原生资源目录，[详见](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android)
|  └─ios                iOS 原生资源目录，[详见](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-ios.html#%E8%B5%84%E6%BA%90%E6%96%87%E4%BB%B6-bundle-resources)
├─hybrid                App 端存放本地 html 文件的目录，[详见](https://zh.uniapp.dcloud.io/component/web-view)
├─wxcomponents          存放微信小程序、QQ 小程序组件的目录，[详见](https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
├─mycomponents          存放支付宝小程序组件的目录，[详见](https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
├─swancomponents        存放百度小程序组件的目录，[详见](https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
├─ttcomponents          存放抖音小程序、飞书小程序组件的目录，[详见](https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
├─kscomponents          存放快手小程序组件的目录，[详见](https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
├─jdcomponents          存放京东小程序组件的目录，[详见](https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue 初始化入口文件
├─App.vue               应用配置，用来配置 App 全局样式以及监听应用，[生命周期](https://zh.uniapp.dcloud.io/collocation/App#%E5%BA%94%E7%94%A8%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，[详见](https://zh.uniapp.dcloud.io/collocation/pages)
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，[详见](https://zh.uniapp.dcloud.io/collocation/manifest)
├─AndroidManifest.xml   Android 原生应用清单文件，[详见](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-android)
├─Info.plist            iOS 原生应用配置文件，[详见](https://uniapp.dcloud.net.cn/tutorial/app-nativeresource-ios)
└─uni.scss              内置的常用样式变量

信息

HbuilderX 1.9.0+ 支持在根目录创建 ext.json、sitemap.json 等小程序需要的文件。

2.1. static 目录

• 为什么需要 static 这样的目录？

  uni-app 编译器根据 pages.json 扫描需要编译的页面，并根据页面引入的 js、css 合并打包文件。

  对于本地的图片、字体、视频、文件等资源，如果可以直接识别，那么也会把这些资源文件打包进去，但如果这些资源以变量的方式引用，比如：<image :src="url"></image>，甚至可能有更复杂的函数计算，此时编译器无法分析。

  那么有了 static 目录，编译器就会把这个目录整体复制到最终编译包内。这样只要运行时确实能获取到这个图片，就可以显示。

  当然这也带来一个注意事项，如果 static 里有一些没有使用的废文件，也会被打包到编译包里，造成体积变大。

  另外注意，static 目录支持特殊的平台子目录，比如 web、app、mp-weixin 等，这些目录存放专有平台的文件，这些平台的文件在打包其他平台时不会被包含。详见条件编译。

  非 static 目录下的文件（vue 组件、js、css 等）只有被引用时，才会被打包编译。

  css、less/scss 等资源不要放在 static 目录下，建议这些公用的资源放在自建的 common 目录下。

• static 目录和 App 原生资源目录有关系吗？

  uni-app 支持 App 原生资源目录 nativeResources，下面有 assets、res 等目录，详见。但和 static 目录没有关系。

  static 目录下的文件，在 app 第一次启动时，解压到了 app 的外部存储目录（external-path）。（uni-app x 从 3.99+ 不再解压）

  所以注意控制 static 目录的大小，太大的 static 目录和太多文件，会造成 App 安装后第一次启动变慢。