頁面簡介
uni-app項目中，一個頁面就是一個符合Vue SFC規范的.vue文件或.nvue文件。
.vue頁面和.nvue頁面，均全平臺支持，差異在于當uni-app發行到App平臺時，.vue文件會使用webview進行渲染，.nvue會使用原生進行渲染。nvue具體介紹及使用方法見： nvue原生渲染
新建頁面
uni-app中的頁面，通常會保存在工程根目錄下的pages目錄下。
每次新建頁面，均需在pages.json中配置pages列表；未在pages.json -> pages 中配置的頁面，uni-app會在編譯階段進行忽略。
pages.json的目錄結構
一般主要頁面我們放在pages中，
// 例如： 首頁、購物車 個人中心等
{
"path": "pages/index/index", // 該路徑需要對應文件 pages中的路徑
"style": {
"navigationBarTitleText": "",
"navigationStyle": "custom",
"navigationBarTextStyle": "white",
}
},
而一些業務模塊且不是tabbar頁面，我們可以在subPackages中創建分包
/// 實例
"subPackages": [{ // 模塊分包
"root": "pages/extension",
"name": "extension",
"pages": [{
"path": "customer_list/chat",
"style": {
"navigationBarTitleText": "對話詳情", // 頁面title
"navigationStyle": "custom",
"app-plus": {
"scrollIndicator": false //禁用原生導航欄,
"titleNView": {
"type": "default"
},
"disableScroll": true
}
}]
}]
應用首頁
這里要注意的是uni-app會將pages.json -> pages配置項中的第一個頁面，作為當前工程的首頁（啟動頁）。
模板內引入靜態資源
template內引入靜態資源，如image、video等標簽的src屬性時，可以使用相對路徑或者絕對路徑，形式如下
注意
@開頭的絕對路徑以及相對路徑會經過 base64 轉換規則校驗- 引入的靜態資源在非 h5 平臺，均不轉為 base64。
- H5 平臺，小于 4kb 的資源會被轉換成 base64，其余不轉。
- 自
HBuilderX 2.6.6起template內支持@開頭路徑引入靜態資源，舊版本不支持此方式 - App 平臺自
HBuilderX 2.6.9起template節點中引用靜態資源文件時（如：圖片），調整查找策略為【基于當前文件的路徑搜索】，與其他平臺保持一致
css 引入靜態資源
css文件或style標簽內引入css文件時（scss、less 文件同理），可以使用相對路徑或絕對路徑（HBuilderX 2.6.6）
/* 絕對路徑 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相對路徑 */
@import url('../../common/uni.css');
刪除頁面
刪除頁面時，需做兩件工作：
- 刪除
.vue文件或.nvue文件 - 刪除
pages.json -> pages列表項中的配置
