uni-app 項目目錄結(jié)構(gòu)

1. 前言

在創(chuàng)建完成 uni-app 項目后，系統(tǒng)會默認(rèn)幫我們生成一些文件，這些文件就是初始項目目錄結(jié)構(gòu)。

日常開發(fā)過程中，都是需要在這個目錄結(jié)構(gòu)的基礎(chǔ)上面完成項目搭建，所以，我們首先需要了解這個初始目錄結(jié)構(gòu)各個目錄的含義。

在創(chuàng)建項目時，選擇不同的模板生成的項目目錄是不一樣的，我們先介紹兩個最常見的項目模板，uni-ui 項目模板、Hello uni-app 模板。了解這兩個項目模板生成的項目目錄，其他模板生成的目錄也可以掌握。

我們本小節(jié)來了解一下項目目錄以及這些文件夾的作用。

2. uni-ui 項目目錄介紹

創(chuàng)建項目時，我們可以選擇創(chuàng)建什么類型的模板，如果選擇 uni-ui 項目模板，系統(tǒng)就會自動幫我們生成下面的項目目錄。

各文件的作用如下：

其中 unpackage 打包目錄，存放的是打包后的文件，有時候打包后會出現(xiàn)圖片或者組件失效的情況，可以檢查一下引用路徑是否有錯誤。

3. Hello uni-app 項目目錄介紹

創(chuàng)建項目時，選擇 Hello uni-app 項目模板，項目創(chuàng)建完成后，會幫我們生成下面的項目目錄。其中有幾個文件與 uni-ui 項目目錄重復(fù)了，作用都是一樣的。

各文件的作用如下：

4. 各平臺小程序組件存放目錄

uni-app 還有一個非常牛的地方，就是支持在 App 和小程序中使用小程序自定義的組件，支持情況如下：

4.1 使用方式

在項目根目錄下的 pages.json 文件中，在頁面屬性 styles 中增加下面的設(shè)置。
實例：

{
  "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. 小結(jié)

系統(tǒng)根據(jù)通常開發(fā)的情況，幫我們生成了這個項目目錄。這些項目目錄不是一成不變的，我們可以按需使用，也可以自己繼續(xù)在這個目錄中新建文件夾。本節(jié)主要介紹了 uni-app 項目目錄，重點如下：

• 使用 uni-ui 模式創(chuàng)建項目時，項目目錄以及各個文件夾的作用；
• 使用 Hello uni-app 模式創(chuàng)建項目時，項目目錄以及各個文件夾的作用；
• 各個平臺小程序組件存放目錄以及使用方式。