亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

貓寧一 · 更新于 2021-07-07

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.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 中增加下面的設置。
實例：

{
  "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 模式創建項目時，項目目錄以及各個文件夾的作用；
  • 各個平臺小程序組件存放目錄以及使用方式。