uniapp 目錄結(jié)構(gòu)及開發(fā)規(guī)范

作者:辰風(fēng)沐陽 閱讀:2012 發(fā)布時(shí)間:2021-06-06 上次更新:2023-03-02

1. 目錄結(jié)構(gòu)


  1. │─pages 頁面文件存放目錄
  2. ├─static 靜態(tài)資源存放目錄
  3. ├─unpackage 編譯文件存放目錄,做版本管理時(shí)將此目錄忽略
  4. ├─main.js Vue初始化入口文件
  5. ├─App.vue 應(yīng)用配置,用來配置App全局樣式以及監(jiān)聽?wèi)?yīng)用生命周期
  6. ├─manifest.json 配置應(yīng)用名稱,appid、logo、版本等打包信息
  7. ├─pages.json 配置頁面路由、導(dǎo)航條、選項(xiàng)卡等頁面類信息

manifest.json 文件是應(yīng)用的配置文件, 用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等。

main.js 是uni-app的入口文件,主要作用是初始化vue示例、定義全局組件、使用需要的插件(如:vuex)

pages.json 文件用來對 uni-app 進(jìn)行全局配置, 決定頁面文件的路徑、窗口樣式、原生的導(dǎo)航欄、底部的遠(yuǎn)程 tabbar 等。它類似于微信小程序中的app.json的頁面管理部分。特別注意:定位權(quán)限申請等原屬于app.json的內(nèi)容,在uni-app中是在 manifest 中配置

  1. |─api 集中管理API接口
  2. |─pages 頁面文件存放目錄
  3. |─static 靜態(tài)資源存放目錄
  4. |─store Vuex 狀態(tài)管理
  5. | |index.js 導(dǎo)出 store 對象
  6. |-unpackage 編譯文件存放目錄,做版本管理時(shí)將此目錄忽略
  7. | |-res App 圖標(biāo)存放目錄
  8. | |-cache App 圖標(biāo)存放目錄
  9. | |-dist App 圖標(biāo)存放目錄
  10. | |-release App 圖標(biāo)存放目錄
  11. | |-apk 安卓手機(jī)安裝文件
  12. |─utils 工具類存放目錄
  13. |─main.js Vue初始化入口文件
  14. |─App.vue 應(yīng)用配置,用來配置App全局樣式以及監(jiān)聽?wèi)?yīng)用生命周期
  15. |─manifest.json 配置應(yīng)用名稱,appidlogo、版本等打包信息
  16. |─pages.json 配置頁面路由、導(dǎo)航條、選項(xiàng)卡等頁面類信息

2. 開發(fā)規(guī)范


為了實(shí)現(xiàn)多端兼容, 綜合考慮編譯速度、運(yùn)行性能等因素,uni-app 約定了如下開發(fā)規(guī)范

1. 頁面文件遵循 vue 單文件組件 (SFC)規(guī)范

2. 組件標(biāo)簽靠近小程序規(guī)范, 詳情見 uni-app 組件規(guī)范

3. 接口能力(JS API)靠近微信小程序規(guī)范, 但需將前綴 wx 替換為 uni, 詳情見 uni-app 接口規(guī)范

4. 數(shù)據(jù)綁定及事件處理同 Vue.js 規(guī)范, 同時(shí)補(bǔ)充了App及頁面的生命周期

5. 為兼容多端運(yùn)行, 建議使用 flex 布局進(jìn)行開發(fā)

標(biāo)簽: uni-app