頁面簡介

uni-app項目中，一個頁面就是一個符合Vue SFC規(guī)范的.vue文件或.nvue文件。

.vue頁面和.nvue頁面，均全平臺支持，差異在于當(dāng)uni-app發(fā)行到App平臺時，.vue文件會使用webview進(jìn)行渲染，.nvue會使用原生進(jìn)行渲染。nvue具體介紹及使用方法見： nvue原生渲染

新建頁面

uni-app中的頁面，通常會保存在工程根目錄下的pages目錄下。

每次新建頁面，均需在pages.json中配置pages列表；未在pages.json -> pages 中配置的頁面，uni-app會在編譯階段進(jìn)行忽略。

pages.json的目錄結(jié)構(gòu)

一般主要頁面我們放在pages中，

// 例如： 首頁、購物車 個人中心等
{
	"path": "pages/index/index",  // 該路徑需要對應(yīng)文件 pages中的路徑
	"style": {
		"navigationBarTitleText": "",
		"navigationStyle": "custom",  
		"navigationBarTextStyle": "white",
	}
},

而一些業(yè)務(wù)模塊且不是tabbar頁面，我們可以在subPackages中創(chuàng)建分包

/// 實例
"subPackages": [{  // 模塊分包
	"root": "pages/extension",
	"name": "extension",
	"pages": [{
		"path": "customer_list/chat",
		"style": {
		"navigationBarTitleText": "對話詳情",  // 頁面title
		"navigationStyle": "custom",
		"app-plus": {
                        "scrollIndicator": false //禁用原生導(dǎo)航欄,
                        "titleNView": {
                            "type": "default"
                        },
                        "disableScroll": true
                }
	}]
}]

應(yīng)用首頁

這里要注意的是uni-app會將pages.json -> pages配置項中的第一個頁面，作為當(dāng)前工程的首頁（啟動頁）。

模板內(nèi)引入靜態(tài)資源

template內(nèi)引入靜態(tài)資源，如image、video等標(biāo)簽的src屬性時，可以使用相對路徑或者絕對路徑，形式如下

注意

• @開頭的絕對路徑以及相對路徑會經(jīng)過 base64 轉(zhuǎn)換規(guī)則校驗
• 引入的靜態(tài)資源在非 h5 平臺，均不轉(zhuǎn)為 base64。
• H5 平臺，小于 4kb 的資源會被轉(zhuǎn)換成 base64，其余不轉(zhuǎn)。
• 自HBuilderX 2.6.6起template內(nèi)支持@開頭路徑引入靜態(tài)資源，舊版本不支持此方式
• App 平臺自HBuilderX 2.6.9起template節(jié)點中引用靜態(tài)資源文件時（如：圖片），調(diào)整查找策略為【基于當(dāng)前文件的路徑搜索】，與其他平臺保持一致

css 引入靜態(tài)資源

css文件或style標(biāo)簽內(nèi)引入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列表項中的配置