uni-app官網：https://uniapp.dcloud.io/collocation/pages

pages.json?文件用來對 uni-app 進行全局配置，決定頁面文件的路徑、窗口樣式、原生的導航欄、底部的原生tabbar 等。

它類似微信小程序中app.json的頁面管理部分。注意定位權限申請等原屬于app.json的內容，在uni-app中是在manifest中配置。

配置項列表

1、pages

uni-app?通過 pages 節點配置應用由哪些頁面組成，pages 節點接收一個數組，數組每個項都是一個對象，其屬性值如下：

屬性類型默認值描述

path	String	?	配置頁面路徑
style	Object	?	配置頁面窗口表現，配置項參考下方?pageStyle

Tips：

• pages節點的第一項為應用入口頁（即首頁）
• 應用中新增/減少頁面，都需要對 pages 數組進行修改
• 文件名不需要寫后綴，框架會自動尋找路徑下的頁面資源

2、condition

啟動模式配置，僅開發期間生效，用于模擬直達頁面的場景，如：小程序轉發后，用戶點擊所打開的頁面。

屬性說明：

屬性類型是否必填描述

current	Number	是	當前激活的模式，list節點的索引值
list	Array	是	啟動模式列表

list說明：

屬性類型是否必填描述

name	String	是	啟動模式名稱
path	String	是	啟動頁面路徑
query	String	否	啟動參數，可在頁面的?onLoad?函數里獲得

3、globalStyle?

用于設置應用的狀態欄、導航條、標題、窗口背景色等。

屬性類型默認值描述平臺差異說明

navigationBarBackgroundColor	HexColor	#F7F7F7	導航欄背景顏色（同狀態欄背景色）	APP與H5為#F7F7F7，小程序平臺請參考相應小程序文檔
navigationBarTextStyle	String	white	導航欄標題顏色及狀態欄前景顏色，僅支持 black/white	?
navigationBarTitleText	String	?	導航欄標題文字內容	?
navigationStyle	String	default	導航欄樣式，僅支持 default/custom。custom即取消默認的原生導航欄，需看使用注意	微信小程序 7.0+、百度小程序、H5、App（2.0.3+）
backgroundColor	HexColor	#ffffff	下拉顯示出來的窗口的背景色	微信小程序
backgroundTextStyle	String	dark	下拉 loading 的樣式，僅支持 dark / light	微信小程序
enablePullDownRefresh	Boolean	false	是否開啟下拉刷新，詳見頁面生命周期。	?
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位只支持px，詳見頁面生命周期	?
backgroundColorTop	HexColor	#ffffff	頂部窗口的背景色（bounce回彈區域）	僅 iOS 平臺
backgroundColorBottom	HexColor	#ffffff	底部窗口的背景色（bounce回彈區域）	僅 iOS 平臺
titleImage	String	?	導航欄圖片地址（替換當前文字標題），支付寶小程序內必須使用https的圖片鏈接地址	支付寶小程序、H5、APP
transparentTitle	String	none	導航欄整體（前景、背景）透明設置。支持 always 一直透明 / auto 滑動自適應 / none 不透明	支付寶小程序、H5、APP
titlePenetrate	String	NO	導航欄點擊穿透	支付寶小程序、H5
pageOrientation	String	portrait	橫屏配置，屏幕旋轉設置，僅支持 auto / portrait / landscape 詳見?響應顯示區域變化	App 2.4.7+、微信小程序
animationType	String	pop-in	窗口顯示的動畫效果，詳見：窗口動畫	App
animationDuration	Number	300	窗口顯示動畫的持續時間，單位為 ms	App
app-plus	Object	?	設置編譯到 App 平臺的特定樣式，配置項參考下方?app-plus	App
h5	Object	?	設置編譯到 H5 平臺的特定樣式，配置項參考下方?H5	H5
mp-alipay	Object	?	設置編譯到 mp-alipay 平臺的特定樣式，配置項參考下方?MP-ALIPAY	支付寶小程序
mp-weixin	Object	?	設置編譯到 mp-weixin 平臺的特定樣式	微信小程序
mp-baidu	Object	?	設置編譯到 mp-baidu 平臺的特定樣式	百度小程序
mp-toutiao	Object	?	設置編譯到 mp-toutiao 平臺的特定樣式	字節跳動小程序
mp-qq	Object	?	設置編譯到 mp-qq 平臺的特定樣式	QQ小程序
usingComponents	Object	?	引用小程序組件，參考?小程序組件	?
renderingMode	String	?	同層渲染，webrtc(實時音視頻) 無法正常時嘗試配置 seperated 強制關掉同層	微信小程序
leftWindow	Boolean	true	當存在 leftWindow 時，默認是否顯示 leftWindow	H5
topWindow	Boolean	true	當存在 topWindow 時，默認是否顯示 topWindow	H5
rightWindow	Boolean	true	當存在 rightWindow 時，默認是否顯示 rightWindow	H5
rpxCalcMaxDeviceWidth	Number	960	rpx 計算所支持的最大設備寬度，單位 px	App、H5（2.8.12+）
rpxCalcBaseDeviceWidth	Number	375	rpx 計算使用的基準設備寬度，設備實際寬度超出 rpx 計算所支持的最大設備寬度時將按基準寬度計算，單位 px	App、H5（2.8.12+）
rpxCalcIncludeWidth	Number	750	rpx 計算特殊處理的值，始終按實際的設備寬度計算，單位 rpx	App、H5（2.8.12+）
maxWidth	Number	1190	單位px，當瀏覽器可見區域寬度大于maxWidth時，兩側留白，當小于等于maxWidth時，頁面鋪滿；不同頁面支持配置不同的maxWidth；maxWidth = leftWindow(可選)+page(頁面主體)+rightWindow(可選)	H5（2.9.9+）

注意

• 支付寶小程序使用titleImage時必須使用https的圖片鏈接地址，需要真機調試才能看到效果，支付寶開發者工具內無效果
• globalStyle中設置的titleImage也會覆蓋掉pages->style內的設置文字標題
• 使用?maxWidth?時，頁面內fixed元素需要使用--window-left,--window-right來保證布局位置正確

4、tabBar

如果應用是一個多 tab 應用，可以通過 tabBar 配置項指定一級導航欄，以及 tab 切換時顯示的對應頁。

在 pages.json 中提供 tabBar 配置，不僅僅是為了方便快速開發導航，更重要的是在App和小程序端提升性能。在這兩個平臺，底層原生引擎在啟動時無需等待js引擎初始化，即可直接讀取 pages.json 中配置的 tabBar 信息，渲染原生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->模板->頂部選項卡。

屬性說明：

屬性類型必填默認值描述平臺差異說明

color	HexColor	是	?	tab 上的文字默認顏色	?
selectedColor	HexColor	是	?	tab 上的文字選中時的顏色	?
backgroundColor	HexColor	是	?	tab 的背景色	?
borderStyle	String	否	black	tabbar 上邊框的顏色，可選值 black/white	App 2.3.4+ 支持其他顏色值、H5 3.0.0+
blurEffect	String	否	none	iOS 高斯模糊效果，可選值 dark/extralight/light/none（參考:使用說明）	App 2.4.0+ 支持、H5 3.0.0+（只有最新版瀏覽器才支持）
list	Array	是	?	tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab	?
position	String	否	bottom	可選值 bottom、top	top 值僅微信小程序支持
fontSize	String	否	10px	文字默認大小	App 2.3.4+、H5 3.0.0+
iconWidth	String	否	24px	圖標默認寬度（高度等比例縮放）	App 2.3.4+、H5 3.0.0+
spacing	String	否	3px	圖標和文字的間距	App 2.3.4+、H5 3.0.0+
height	String	否	50px	tabBar 默認高度	App 2.3.4+、H5 3.0.0+
midButton	Object	否	?	中間按鈕 僅在 list 項為偶數時有效	App 2.3.4+、H5 3.0.0+

其中 list 接收一個數組，數組中的每個項都是一個對象，其屬性值如下：

屬性類型必填說明

pagePath	String	是	頁面路徑，必須在 pages 中先定義
text	String	是	tab 上按鈕文字，在 App 和 H5 平臺為非必填。例如中間可放一個沒有文字的+號圖標
iconPath	String	否	圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當 postion 為 top 時，此參數無效，不支持網絡圖片，不支持字體圖標
selectedIconPath	String	否	選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當 postion 為 top 時，此參數無效

midButton 屬性說明

屬性類型必填默認值描述

width	String	否	80px	中間按鈕的寬度，tabBar 其它項為減去此寬度后平分，默認值為與其它項平分寬度
height	String	否	50px	中間按鈕的高度，可以大于 tabBar 高度，達到中間凸起的效果
text	String	否	?	中間按鈕的文字
iconPath	String	否	?	中間按鈕的圖片路徑
iconWidth	String	否	24px	圖片寬度（高度等比例縮放）
backgroundImage	String	否	?	中間按鈕的背景圖片路徑

5、easycom

HBuilderX 2.5.5起支持easycom組件模式。

傳統vue組件，需要安裝、引用、注冊，三個步驟后才能使用組件。easycom將其精簡為一步。 只要組件安裝在項目的components目錄下，并符合components/組件名稱/組件名稱.vue目錄結構。就可以不用引用、注冊，直接在頁面中使用。 如下：

<template><view class="container"><uni-list><uni-list-item title="第一行"></uni-list-item><uni-list-item title="第二行"></uni-list-item></uni-list></view> </template> <script>// 這里不用import引入，也不需要在components內注冊uni-list組件。template里就可以直接用export default {data() {return {}}} </script>

6、topWindow

uni-app 2.9+ 新增 leftWindow, topWindow, rightWindow 配置。用于解決寬屏適配問題。

以現有的手機應用為mainWindow，在左、上、右，可以追加新的頁面顯示窗體。

整體的寬屏適配思路，參考單獨的寬屏適配指南

屬性類型默認值描述

path	String	?	配置頁面路徑
style	Object	?	配置頁面窗口表現，配置項參考下方?pageStyle
matchMedia	Object	?	配置顯示該窗口的規則，配置項參考下方?matchMedia

注意

• 目前 style 節點僅支持配置 width，height 等 css 樣式相關屬性

matchMedia

屬性類型默認值描述

minWidth	Number	768	當設備可見區域寬度 >= minWidth 時，顯示該 window

通過matchMedia的調節，可以自適應在不同屏幕上顯示指定的window。

{"pages": [{"path": "pages/login/login","style": {"topWindow": false // 當前頁面不顯示 topWindow"leftWindow": false // 當前頁面不顯示 leftWindow"rightWindow": false // 當前頁面不顯示 rightWindow}}],"topWindow": {"path": "responsive/top-window.vue", // 指定 topWindow 頁面文件"style": {"height": "44px"}},"leftWindow": {"path": "responsive/left-window.vue", // 指定 leftWindow 頁面文件"style": {"width": "300px"}},"rightWindow": {"path": "responsive/right-window.vue", // 指定 rightWindow 頁面文件"style": {"width": "300px" // 頁面寬度},"matchMedia": {"minWidth": 768 //生效條件，當窗口寬度大于768px時顯示}} }

?具體寫法如下：

{"pages": [{"path": "pages/component/index",//頁面路徑"style": {"navigationBarTitleText": "組件"}}, {"path": "pages/API/index","style": {"navigationBarTitleText": "接口"}}, {"path": "pages/component/view/index","style": {"navigationBarTitleText": "view"}}],"condition": { //模式配置，僅開發期間生效"current": 0, //當前激活的模式（list 的索引項）"list": [{"name": "test", //模式名稱"path": "pages/component/view/index" //啟動頁面，必選}]},"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "演示","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","usingComponents":{"collapse-tree-item":"/components/collapse-tree-item"},"renderingMode": "seperated", // 僅微信小程序，webrtc 無法正常時嘗試強制關閉同層渲染"pageOrientation": "portrait", //橫屏配置，全局屏幕旋轉設置(僅 APP/微信/QQ小程序)，支持 auto / portrait / landscape"rpxCalcMaxDeviceWidth": 960,"rpxCalcBaseDeviceWidth": 375,"rpxCalcIncludeWidth": 750},"tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#ffffff","height": "50px","fontSize": "10px","iconWidth": "24px","spacing": "3px","list": [{"pagePath": "pages/component/index","iconPath": "static/image/icon_component.png","selectedIconPath": "static/image/icon_component_HL.png","text": "組件"}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}],"midButton": {"width": "80px","height": "50px","text": "文字","iconPath": "static/image/midButton_iconPath.png","iconWidth": "24px","backgroundImage": "static/image/midButton_backgroundImage.png"}},"easycom": {"autoscan": true, //是否自動掃描組件"custom": {//自定義掃描規則"^uni-(.*)": "@/components/uni-$1.vue"}},"topWindow": {"path": "responsive/top-window.vue","style": {"height": "44px"}},"leftWindow": {"path": "responsive/left-window.vue","style": {"width": "300px"}},"rightWindow": {"path": "responsive/right-window.vue","style": {"width": "300px"},"matchMedia": {"minWidth": 768}} }

?

總結

以上是生活随笔為你收集整理的uni-app微信小程序配置（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。