uni-app Pages.json配置

展菲發表於 2023-1-12 13:17:00

https://uniapp.dcloud.net.cn/collocation/pages.html
<code>pages.json</code> 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
它类似微信小程序中<code>app.json</code>的页面管理部分。注意定位权限申请等原属于<code>app.json</code>的内容，在uni-app中是在manifest中配置。
<h1 id="配置项列表">#配置项列表</h1>
<table>
<thead>
<tr><th>属性</th><th>类型</th><th>必填</th><th>描述</th><th>平台兼容</th></tr>
</thead>
<tbody>
<tr>
<td>globalStyle</td>
<td>Object</td>
<td>否</td>
<td>设置默认页面的窗口表现</td>
<td> </td>
</tr>
<tr>
<td>pages</td>
<td>Object Array</td>
<td>是</td>
<td>设置页面路径及窗口表现</td>
<td> </td>
</tr>
<tr>
<td>easycom</td>
<td>Object</td>
<td>否</td>
<td>组件自动引入规则</td>
<td>2.5.5+</td>
</tr>
<tr>
<td>tabBar</td>
<td>Object</td>
<td>否</td>
<td>设置底部 tab 的表现</td>
<td> </td>
</tr>
<tr>
<td>condition</td>
<td>Object</td>
<td>否</td>
<td>启动模式配置</td>
<td> </td>
</tr>
<tr>
<td>subPackages</td>
<td>Object Array</td>
<td>否</td>
<td>分包加载配置</td>
<td> </td>
</tr>
<tr>
<td>preloadRule</td>
<td>Object</td>
<td>否</td>
<td>分包预下载规则</td>
<td>微信小程序</td>
</tr>
<tr>
<td>workers</td>
<td>String</td>
<td>否</td>
<td><code>Worker</code> 代码放置的目录</td>
<td>微信小程序</td>
</tr>
<tr>
<td>leftWindow</td>
<td>Object</td>
<td>否</td>
<td>大屏左侧窗口</td>
<td>H5</td>
</tr>
<tr>
<td>topWindow</td>
<td>Object</td>
<td>否</td>
<td>大屏顶部窗口</td>
<td>H5</td>
</tr>
<tr>
<td>rightWindow</td>
<td>Object</td>
<td>否</td>
<td>大屏右侧窗口</td>
<td>H5</td>
</tr>
<tr>
<td>uniIdRouter</td>
<td>Object</td>
<td>否</td>
<td>自动跳转相关配置，新增于HBuilderX 3.5.0</td>
<td> </td>
</tr>
</tbody>
</table>
以下是一个包含了所有配置选项的 <code>pages.json</code> ：
<div class="language-json extra-class">
<pre class="language-json v-copy"><code>{
"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",
"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件",
 "iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
 "text": "\ue102",
 "selectedText": "\ue103",
 "fontSize": "17px",
 "color": "#000000",
 "selectedColor": "#0000ff"
 }
}, {
"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
}
}
}
</code></pre>
复制代码</div>
<h2 id="globalstyle">#globalStyle</h2>
用于设置应用的状态栏、导航条、标题、窗口背景色等。
<table>
<thead>
<tr><th>属性</th><th>类型</th><th>默认值</th><th>描述</th><th>平台差异说明</th></tr>
</thead>
<tbody>
<tr>
<td>navigationBarBackgroundColor</td>
<td>HexColor</td>
<td>#F7F7F7</td>
<td>导航栏背景颜色（同状态栏背景色）</td>
<td>APP与H5为#F7F7F7，小程序平台请参考相应小程序文档</td>
</tr>
<tr>
<td>navigationBarTextStyle</td>
<td>String</td>
<td>white</td>
<td>导航栏标题颜色及状态栏前景颜色，仅支持 black/white</td>
<td>支付宝小程序不支持，请使用 my.setNavigationBar</td>
</tr>
<tr>
<td>navigationBarTitleText</td>
<td>String</td>
<td> </td>
<td>导航栏标题文字内容</td>
<td> </td>
</tr>
<tr>
<td>navigationStyle</td>
<td>String</td>
<td>default</td>
<td>导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意</td>
<td>微信小程序 7.0+、百度小程序、H5、App（2.0.3+）</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>HexColor</td>
<td>#ffffff</td>
<td>下拉显示出来的窗口的背景色</td>
<td>微信小程序</td>
</tr>
<tr>
<td>backgroundTextStyle</td>
<td>String</td>
<td>dark</td>
<td>下拉 loading 的样式，仅支持 dark / light</td>
<td>微信小程序</td>
</tr>
<tr>
<td>enablePullDownRefresh</td>
<td>Boolean</td>
<td>false</td>
<td>是否开启下拉刷新，详见页面生命周期。</td>
<td> </td>
</tr>
<tr>
<td>onReachBottomDistance</td>
<td>Number</td>
<td>50</td>
<td>页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期</td>
<td> </td>
</tr>
<tr>
<td>backgroundColorTop</td>
<td>HexColor</td>
<td>#ffffff</td>
<td>顶部窗口的背景色（bounce回弹区域）</td>
<td>仅 iOS 平台</td>
</tr>
<tr>
<td>backgroundColorBottom</td>
<td>HexColor</td>
<td>#ffffff</td>
<td>底部窗口的背景色（bounce回弹区域）</td>
<td>仅 iOS 平台</td>
</tr>
<tr>
<td>titleImage</td>
<td>String</td>
<td> </td>
<td>导航栏图片地址（替换当前文字标题），支付宝小程序内必须使用https的图片链接地址</td>
<td>支付宝小程序、H5、APP</td>
</tr>
<tr>
<td>transparentTitle</td>
<td>String</td>
<td>none</td>
<td>导航栏整体（前景、背景）透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明</td>
<td>支付宝小程序、H5、APP</td>
</tr>
<tr>
<td>titlePenetrate</td>
<td>String</td>
<td>NO</td>
<td>导航栏点击穿透</td>
<td>支付宝小程序、H5</td>
</tr>
<tr>
<td>pageOrientation</td>
<td>String</td>
<td>portrait</td>
<td>横屏配置，屏幕旋转设置，仅支持 auto / portrait / landscape 详见 响应显示区域变化</td>
<td>App 2.4.7+、微信小程序、QQ小程序</td>
</tr>
<tr>
<td>animationType</td>
<td>String</td>
<td>pop-in</td>
<td>窗口显示的动画效果，详见：窗口动画</td>
<td>App</td>
</tr>
<tr>
<td>animationDuration</td>
<td>Number</td>
<td>300</td>
<td>窗口显示动画的持续时间，单位为 ms</td>
<td>App</td>
</tr>
<tr>
<td>app-plus</td>
<td>Object</td>
<td> </td>
<td>设置编译到 App 平台的特定样式，配置项参考下方 app-plus</td>
<td>App</td>
</tr>
<tr>
<td>h5</td>
<td>Object</td>
<td> </td>
<td>设置编译到 H5 平台的特定样式，配置项参考下方 H5</td>
<td>H5</td>
</tr>
<tr>
<td>mp-alipay</td>
<td>Object</td>
<td> </td>
<td>设置编译到 mp-alipay 平台的特定样式，配置项参考下方 MP-ALIPAY</td>
<td>支付宝小程序</td>
</tr>
<tr>
<td>mp-weixin</td>
<td>Object</td>
<td> </td>
<td>设置编译到 mp-weixin 平台的特定样式</td>
<td>微信小程序</td>
</tr>
<tr>
<td>mp-baidu</td>
<td>Object</td>
<td> </td>
<td>设置编译到 mp-baidu 平台的特定样式</td>
<td>百度小程序</td>
</tr>
<tr>
<td>mp-toutiao</td>
<td>Object</td>
<td> </td>
<td>设置编译到 mp-toutiao 平台的特定样式</td>
<td>字节跳动小程序</td>
</tr>
<tr>
<td>mp-lark</td>
<td>Object</td>
<td> </td>
<td>设置编译到 mp-lark 平台的特定样式</td>
<td>飞书小程序</td>
</tr>
<tr>
<td>mp-qq</td>
<td>Object</td>
<td> </td>
<td>设置编译到 mp-qq 平台的特定样式</td>
<td>QQ小程序</td>
</tr>
<tr>
<td>mp-kuaishou</td>
<td>Object</td>
<td> </td>
<td>设置编译到 mp-kuaishou 平台的特定样式</td>
<td>快手小程序</td>
</tr>
<tr>
<td>mp-jd</td>
<td>Object</td>
<td> </td>
<td>设置编译到 mp-jd 平台的特定样式</td>
<td>京东小程序</td>
</tr>
<tr>
<td>usingComponents</td>
<td>Object</td>
<td> </td>
<td>引用小程序组件，参考 小程序组件</td>
<td> </td>
</tr>
<tr>
<td>renderingMode</td>
<td>String</td>
<td> </td>
<td>同层渲染，webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层</td>
<td>微信小程序</td>
</tr>
<tr>
<td>leftWindow</td>
<td>Boolean</td>
<td>true</td>
<td>当存在 leftWindow 时，默认是否显示 leftWindow</td>
<td>H5</td>
</tr>
<tr>
<td>topWindow</td>
<td>Boolean</td>
<td>true</td>
<td>当存在 topWindow 时，默认是否显示 topWindow</td>
<td>H5</td>
</tr>
<tr>
<td>rightWindow</td>
<td>Boolean</td>
<td>true</td>
<td>当存在 rightWindow 时，默认是否显示 rightWindow</td>
<td>H5</td>
</tr>
<tr>
<td>rpxCalcMaxDeviceWidth</td>
<td>Number</td>
<td>960</td>
<td>rpx 计算所支持的最大设备宽度，单位 px</td>
<td>App（vue2 且不含 nvue）、H5（2.8.12+）</td>
</tr>
<tr>
<td>rpxCalcBaseDeviceWidth</td>
<td>Number</td>
<td>375</td>
<td>rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px</td>
<td>App（vue2 且不含 nvue）、H5（2.8.12+）</td>
</tr>
<tr>
<td>rpxCalcIncludeWidth</td>
<td>Number</td>
<td>750</td>
<td>rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx</td>
<td>App（vue2 且不含 nvue）、H5（2.8.12+）</td>
</tr>
<tr>
<td>dynamicRpx</td>
<td>Boolean</td>
<td>false</td>
<td>动态 rpx，屏幕大小变化会重新渲染 rpx</td>
<td>App-nvue（vue3 固定值为 true） 3.2.13+</td>
</tr>
<tr>
<td>maxWidth</td>
<td>Number</td>
<td> </td>
<td>单位px，当浏览器可见区域宽度大于maxWidth时，两侧留白，当小于等于maxWidth时，页面铺满；不同页面支持配置不同的maxWidth；maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选)</td>
<td>H5（2.9.9+）</td>
</tr>
</tbody>
</table>
注意
<ul>
<li>支付宝小程序使用<code>titleImage</code>时必须使用<code>https</code>的图片链接地址，需要真机调试才能看到效果，支付宝开发者工具内无效果</li>
<li><code>globalStyle</code>中设置的<code>titleImage</code>也会覆盖掉<code>pages</code>-><code>style</code>内的设置文字标题</li>
<li>使用 <code>maxWidth</code> 时，页面内fixed元素需要使用--window-left,--window-right来保证布局位置正确</li>
<li><code>dynamicRpx</code> vue3 nvue页面已移除此配置，升级为横竖屏切换自动rpx，如果不需要可以使用 px</li>
</ul>
<h2 id="topwindow">#topWindow</h2>
uni-app 2.9+ 新增 leftWindow, topWindow, rightWindow 配置。用于解决宽屏适配问题。
以现有的手机应用为mainWindow，在左、上、右，可以追加新的页面显示窗体。
整体的宽屏适配思路，参考单独的宽屏适配指南
<table>
<thead>
<tr><th>属性</th><th>类型</th><th>默认值</th><th>描述</th></tr>
</thead>
<tbody>
<tr>
<td>path</td>
<td>String</td>
<td> </td>
<td>配置页面路径</td>
</tr>
<tr>
<td>style</td>
<td>Object</td>
<td> </td>
<td>配置页面窗口表现，配置项参考下方 pageStyle</td>
</tr>
<tr>
<td>matchMedia</td>
<td>Object</td>
<td> </td>
<td>配置显示该窗口的规则，配置项参考下方 matchMedia</td>
</tr>
</tbody>
</table>
注意
<ul>
<li>目前 style 节点仅支持配置 width，height 等 css 样式相关属性</li>
<li>如果需求当存在 topwindow 时，自动隐藏页面的 navigationBar，根据需求不同在<code>App.vue</code>中配置如下 css：
<ul>
<li>只需要隐藏某个的页面 navigationBar
<div class="language-css extra-class">
<pre class="language-css v-copy"><code>/* 隐藏路径为 pages/component/view/view 页面的 navigationBar */
.uni-app--showtopwindow uni-page-head {
display: none;
}
</code></pre>
复制代码</div>
</li>
<li>需要隐藏大部分页面的 navigationBar，显示某个页面的 navigationBar
<div class="language-css extra-class">
<pre class="language-css v-copy"><code>/* 隐藏所有页面的 navigationBar */
.uni-app--showtopwindow uni-page-head {
display: none;
}

/* 显示路径为 pages/component/view/view 页面的 navigationBar */
.uni-app--showtopwindow uni-page-head {
display: block;
}
</code></pre>
复制代码</div>
</li>
</ul>
</li>
</ul>
<h4 id="matchmedia">#matchMedia</h4>
<table>
<thead>
<tr><th>属性</th><th>类型</th><th>默认值</th><th>描述</th></tr>
</thead>
<tbody>
<tr>
<td>minWidth</td>
<td>Number</td>
<td>768</td>
<td>当设备可见区域宽度 >= minWidth 时，显示该 window</td>
</tr>
</tbody>
</table>
通过matchMedia的调节，可以自适应在不同屏幕上显示指定的window。
<div class="language-json extra-class">
<pre class="language-json v-copy"><code>{
"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时显示
}
}
}
</code></pre>
复制代码</div>
案例演示：HBuilderX 2.9.9+，新建项目选择hello uni-app或新闻模板，或直接浏览：https://hellouniapp.dcloud.net.cn/
<h2 id="leftwindow">#leftWindow</h2>
与topWindow相同
<h2 id="rightwindow">#rightWindow</h2>
与topWindow相同
窗口通信参考：https://uniapp.dcloud.net.cn/api/window/communication 
来源：https://www.cnblogs.com/beichengshiqiao/p/17046387.html

頁: [1]

琼殿技术论坛's Archiver

uni-app Pages.json配置