開發目錄為：
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json //文件是應用的配置文件，用於指定應用的名稱、圖標、權限等
└─pages.json //文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等
| 屬性 | 類型 | 必填 | 描述 | 平台兼容 |
|---|---|---|---|---|
| globalStyle | Object | 否 | 設置默認頁面的窗口表現 | |
| pages | Object Array | 是 | 設置頁面路徑及窗口表現 | |
| tabBar | Object | 否 | 設置底部 tab 的表現 | |
| condition | Object | 否 | 啟動模式配置 | |
| subPackages | Object Array | 否 | 分包加載配置 | |
| preloadRule | Object | 否 | 分包預下載規則 | 微信小程序 |
| workers | String | 否 | Worker 代碼放置的目錄 |
微信小程序 |
用於設置應用的狀態欄、導航條、標題、窗口背景色等。
注意
-
- 支付寶小程序使用
titleImage時必須使用https的圖片鏈接地址，需要真機調試才能看到效果，支付寶開發者工具內無效果 globalStyle中設置的titleImage也會覆蓋掉pages->style內的設置文字標題- navigationBarTextStyle 在iOS13上可能會錯亂，此問題后續版本會修復
- 支付寶小程序使用
uni-app 通過 pages 節點配置應用由哪些頁面組成，pages 節點接收一個數組，數組每個項都是一個對象，其屬性值如下：
| 屬性 | 類型 | 默認值 | 描述 |
|---|---|---|---|
| path | String | 配置頁面路徑 | |
| style | Object | 配置頁面窗口表現，配置項參考下方 pageStyle |
Tips：
- pages節點的第一項為應用入口頁（即首頁）
- 應用中新增/減少頁面，都需要對 pages 數組進行修改
- 文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源
如果應用是一個多 tab 應用，可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁。
Tips
- 當設置 position 為 top 時，將不會顯示 icon
- tabBar 中的 list 是一個數組，只能配置最少2個、最多5個 tab，tab 按數組的順序排序。
- tabbar 切換第一次加載時可能渲染不及時，可以在每個tabbar頁面的onLoad生命周期里先彈出一個等待雪花（hello uni-app使用了此方式）
- tabbar 的頁面展現過一次后就保留在內存中，再次切換 tabbar 頁面，只會觸發每個頁面的onShow，不會再觸發onLoad。
- 頂部的 tabbar 目前僅微信小程序上支持。需要用到頂部選項卡的話，建議不使用 tabbar 的頂部設置，而是自己做頂部選項卡，可參考 hello uni-app->模板->頂部選項卡。
tabbar常見問題
- tabbar 的 js api 見接口-界面-tabbar，可實現動態顯示隱藏（如彈出層無法覆蓋tabbar）、內容修改（如國際化）、item加角標等功能。hello uni-app中也有示例。
- tabbar 的 item 點擊事件見頁面生命周期的onTabItemTap。
- 代碼跳轉到tabbar頁面，api只能使用uni.switchTab，不能使用uni.navigateTo、uni.redirectTo；使用navigator組件跳轉時必須設置open-type="switchTab"
- tabbar 在H5端是div模擬的，屬於前端屏幕窗口的一部分，如果要使用bottom居底定位方式，應該使用css變量
--window-bottom，比如懸浮在tabbar上方10px的按鈕，樣式如下bottom: calc(var(--window-bottom) + 10px) - tabbar 的默認高度，在不同平台不一樣。詳見
- 中間帶+號的tabbar模板例子，參考。可跨端，但+號不凸起。
- 如需 tabbar 中間凸起，可自定義tabbar，插件市場有例子，如colorUI等。但注意前端tabbar的性能不如原生tabbar，如果是多頁方式，底部tabbar會在切換時閃執行轉場動畫，如果是單頁方式，承載復雜頁面內容會有性能問題。插件市場搜索tabbar有不少類似例子。
- App端若使用nvue，自定義tabbar，沒有性能體驗問題。
- 純nvue項目（manifest里renderer為native），目前使用pages.json里的tabbar反而影響性能，建議使用前端自己實現單頁面的tabbar。后續會解決這個bug。
- Android App上彈出鍵盤頂起tabbar的問題。升級到HBuilderX 2.2后不再存在。
- 原生的tabbar只有一個且在首頁。二級頁如需的tab，前端自己實現。
- 如果是需要先登錄、后進入tab頁面，不需要把登陸頁設為首頁，首頁仍然是tabbar頁，可參考HBuilderX新建uni-app項目時的登陸模板
- 前端彈出遮罩層擋不住tabbar的問題，跨端處理方式時動態隱藏tabbar。App端可以使用plus.nativeObj.view或subNVue做彈出和遮罩，可參考這個底部原生圖標分享菜單例子
- 微信小程序模擬器1.02.1904090版有bug，在縮放模擬器頁面百分比后，tabbar點擊多次后就會卡死。真機無礙，使用時注意。詳見
manifest.json 文件是應用的配置文件，用於指定應用的名稱、圖標、權限等。
package.json
通過在package.json文件中增加uni-app擴展節點，可實現自定義條件編譯平台（如釘釘小程序、微信服務號等平台）。
package.json擴展配置用法（拷貝代碼記得去掉注釋！）：
{
/**
package.json其它原有配置
*/
"uni-app": {// 擴展配置
"scripts": {
"custom-platform": { //自定義編譯平台配置，可通過cli方式調用
"title":"自定義擴展名稱", // 在HBuilderX中會顯示在 運行/發行 菜單中
"BROWSER":"", //運行到的目標瀏覽器，僅當UNI_PLATFORM為h5時有效
"env": {//環境變量
"UNI_PLATFORM": "" //基准平台
},
"define": { //自定義條件編譯
"CUSTOM-CONST": true //自定義條件編譯常量，建議為大寫
}
}
}
}
}
Tips：
UNI_PLATFORM僅支持填寫uni-app默認支持的基准平台，目前僅限如下枚舉值：app-plus、h5、mp-weixin、mp-alipay、mp-baidu、mp-toutiao、mp-qqBROWSER僅在UNI_PLATFORM為h5時有效,目前僅限如下枚舉值：Chrome、Firefox、IE、Edge、Safari、HBuilderXpackage.json文件中不允許出現注釋，否則擴展配置無效vue-cli需更新到最新版，HBuilderX需升級到Alpha 2.1.6+ 版本