頁(yè)面簡(jiǎn)介

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

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

新建頁(yè)面

uni-app中的頁(yè)面，通常會(huì)保存在工程根目錄下的pages目錄下。

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

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

一般主要頁(yè)面我們放在pages中，

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

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

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

應(yīng)用首頁(yè)

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

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

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

注意

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

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

css文件或style標(biāo)簽內(nèi)引入css文件時(shí)（scss、less 文件同理），可以使用相對(duì)路徑或絕對(duì)路徑（HBuilderX 2.6.6）

/* 絕對(duì)路徑 */
@import url('/common/uni.css');
@import url('@/common/uni.css');
/* 相對(duì)路徑 */
@import url('../../common/uni.css');

刪除頁(yè)面

刪除頁(yè)面時(shí)，需做兩件工作：

• 刪除.vue文件或.nvue文件
• 刪除pages.json -> pages列表項(xiàng)中的配置