uni-app pages.json常用配置
<h2 id="globalstyle全局配置">globalStyle全局配置</h2><p><code>pages.json</code>是项目的配置，而这个配置文件里的<code>globalStyle</code>选项是项目的全局样式配置</p>
<p>用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>navigationBarBackgroundColor</td>
<td>HexColor</td>
<td>#F7F7F7</td>
<td>导航栏背景颜色（同状态栏背景色）</td>
</tr>
<tr>
<td>navigationBarTextStyle</td>
<td>String</td>
<td>white</td>
<td>导航栏标题颜色及状态栏前景颜色，仅支持 black/white</td>
</tr>
<tr>
<td>navigationBarTitleText</td>
<td>String</td>
<td></td>
<td>导航栏标题文字内容，注意页面级配置会覆盖全局配置</td>
</tr>
<tr>
<td>backgroundColor</td>
<td>HexColor</td>
<td>#ffffff</td>
<td>窗口的背景色</td>
</tr>
<tr>
<td>backgroundTextStyle</td>
<td>String</td>
<td>dark</td>
<td>下拉 loading 的样式，仅支持 dark / light</td>
</tr>
<tr>
<td>enablePullDownRefresh</td>
<td>Boolean</td>
<td>false</td>
<td>是否开启下拉刷新，详见页面生命周期。</td>
</tr>
<tr>
<td>onReachBottomDistance</td>
<td>Number</td>
<td>50</td>
<td>页面上拉触底事件触发时距页面底部距离，单位只支持px，详见页面生命周期</td>
</tr>
</tbody>
</table>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315141811707-620110958.png" alt="image-20210315102100527" loading="lazy"></p>
<h2 id="pages页面配置">pages页面配置</h2>
<p><code>pages.json</code>是项目的配置，而这个配置文件里的<code>pages</code>选项是项目的全局样式配置</p>
<h3 id="创建新的message页面">创建新的message页面</h3>
<p>右键pages新建message目录，在message目录下右键新建.vue文件,并选择基本模板</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315141636607-563503633.png" alt="image-20210315102621872" loading="lazy"></p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315141636579-66210751.png" alt="image-20210315102715013" loading="lazy"></p>
<p>创建完之后内容如下</p>
<pre><code><template>
</template>
<script>
</script>
<style>
</style>
</code></pre>
<p>随便写点儿东西</p>
<pre><code><template>
<view>
hello-uni
</view>
</template>
<script>
</script>
<style>
</style>
</code></pre>
<h3 id="通过pages来配置页面">通过pages来配置页面</h3>
<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>
</tbody>
</table>
<p>pages数组数组中第一项表示应用启动页</p>
<pre><code class="language-html">"pages": [
{
"path":"pages/message/message"
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
]
</code></pre>
<p>例：通过style修改页面的标题和导航栏背景色，并且设置h5下拉刷新的特有样式</p>
<pre><code class="language-js">"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/message/message",
"style": {
//页面标题
"navigationBarTitleText" : "信息页",
//导航栏背景颜色
"navigationBarBackgroundColor": "#007AFF",
//导航栏标题颜色及状态栏前景颜色，仅支持 black/white
"navigationBarTextStyle": "white",
//是否开启下拉
"enablePullDownRefresh": true,
//设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效
"disableScroll": true,
//配置编译到 H5 平台时的特定样式
"h5": {
//下拉刷新
"pullToRefresh": {
"color": "#007AFF"
}
}
}
},
{
"path": "pages/index/index",
//页面级配置文件会覆盖全局的配置
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315141636611-432907534.png" alt="image-20210315104340999" loading="lazy"></p>
<h2 id="配置tabbar">配置tabbar</h2>
<p>https://uniapp.dcloud.io/collocation/pages?id=tabbar</p>
<p>如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定一级导航栏，以及 tab 切换时显示的对应页。</p>
<p>在 pages.json 中提供 tabBar 配置，不仅仅是为了方便快速开发导航，更重要的是在App和小程序端提升性能。在这两个平台，底层原生引擎在启动时无需等待js引擎初始化，即可直接读取 pages.json 中配置的 tabBar 信息，渲染原生tab。</p>
<p><strong>Tips</strong></p>
<ul>
<li>当设置 position 为 top 时，将不会显示 icon</li>
<li>tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。</li>
<li>tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）</li>
<li>tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。</li>
<li>顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。</li>
</ul>
<h3 id="属性说明"><strong>属性说明：</strong></h3>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">描述</th>
<th style="text-align: left">平台差异说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">color</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 上的文字默认颜色</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">selectedColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 上的文字选中时的颜色</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">backgroundColor</td>
<td style="text-align: left">HexColor</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 的背景色</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">borderStyle</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">black</td>
<td style="text-align: left">tabbar 上边框的颜色，可选值 black/white</td>
<td style="text-align: left">App 2.3.4+ 支持其他颜色值、H5 3.0.0+</td>
</tr>
<tr>
<td style="text-align: left">blurEffect</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">none</td>
<td style="text-align: left">iOS 高斯模糊效果，可选值 dark/extralight/light/none（参考:使用说明）</td>
<td style="text-align: left">App 2.4.0+ 支持、H5 3.0.0+（只有最新版浏览器才支持）</td>
</tr>
<tr>
<td style="text-align: left">list</td>
<td style="text-align: left">Array</td>
<td style="text-align: left">是</td>
<td style="text-align: left"></td>
<td style="text-align: left">tab 的列表，详见 list 属性说明，最少2个、最多5个 tab</td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left">position</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">bottom</td>
<td style="text-align: left">可选值 bottom、top</td>
<td style="text-align: left">top 值仅微信小程序支持</td>
</tr>
<tr>
<td style="text-align: left">fontSize</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">10px</td>
<td style="text-align: left">文字默认大小</td>
<td style="text-align: left">App 2.3.4+、H5 3.0.0+</td>
</tr>
<tr>
<td style="text-align: left">iconWidth</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">24px</td>
<td style="text-align: left">图标默认宽度（高度等比例缩放）</td>
<td style="text-align: left">App 2.3.4+、H5 3.0.0+</td>
</tr>
<tr>
<td style="text-align: left">spacing</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">3px</td>
<td style="text-align: left">图标和文字的间距</td>
<td style="text-align: left">App 2.3.4+、H5 3.0.0+</td>
</tr>
<tr>
<td style="text-align: left">height</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">50px</td>
<td style="text-align: left">tabBar 默认高度</td>
<td style="text-align: left">App 2.3.4+、H5 3.0.0+</td>
</tr>
<tr>
<td style="text-align: left">midButton</td>
<td style="text-align: left">Object</td>
<td style="text-align: left">否</td>
<td style="text-align: left"></td>
<td style="text-align: left">中间按钮 仅在 list 项为偶数时有效</td>
<td style="text-align: left">App 2.3.4+、H5 3.0.0+</td>
</tr>
</tbody>
</table>
<p>其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：</p>
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">类型</th>
<th style="text-align: left">必填</th>
<th style="text-align: left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left">pagePath</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">页面路径，必须在 pages 中先定义</td>
</tr>
<tr>
<td style="text-align: left">text</td>
<td style="text-align: left">String</td>
<td style="text-align: left">是</td>
<td style="text-align: left">tab 上按钮文字，在 App 和 H5 平台为非必填。例如中间可放一个没有文字的+号图标</td>
</tr>
<tr>
<td style="text-align: left">iconPath</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持网络图片，不支持字体图标</td>
</tr>
<tr>
<td style="text-align: left">selectedIconPath</td>
<td style="text-align: left">String</td>
<td style="text-align: left">否</td>
<td style="text-align: left">选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效</td>
</tr>
</tbody>
</table>
<h3 id="示例基本使用">示例:基本使用</h3>
<p><strong>pagePath页面路径，必须在 pages 选项中先定义path</strong></p>
<p>pages</p>
<pre><code class="language-js">"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/message/message",
},
{
"path": "pages/index/index",
//页面级配置文件会覆盖全局的配置
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path": "pages/contact/contact"
}
],
</code></pre>
<p>tabBar</p>
<pre><code class="language-js">"tabBar": {
"list": [{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/tabs/home.png",
"selectedIconPath": "static/tabs/home-active.png"
},
{
"text": "信息",
"pagePath": "pages/message/message",
"iconPath": "static/tabs/message.png",
"selectedIconPath": "static/tabs/message-active.png"
},
{
"text": "我们",
"pagePath": "pages/contact/contact",
"iconPath": "static/tabs/contact.png",
"selectedIconPath": "static/tabs/contact-active.png"
}
]
},
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315141636580-1508687984.png" alt="image-20210315111810718" loading="lazy"></p>
<h3 id="示例tabbar其他属性的使用">示例:tabbar其他属性的使用</h3>
<pre><code>"tabBar": {
//tab 上的文字默认颜色
"color" : "#0000ff",
//tab 上的文字选中时的颜色
"selectedColor" : "#DD524D",
//tab 的背景色
"backgroundColor" : "#555555",
// tabbar 上边框的颜色，仅支持 black/white
"borderStyle" : "white",
//可选值 bottom、top .top 值仅微信小程序支持
"position": "top",
"list": [{
"text": "首页",
"pagePath": "pages/index/index",
"iconPath": "static/tabs/home.png",
"selectedIconPath": "static/tabs/home-active.png"
},
{
"text": "信息",
"pagePath": "pages/message/message",
"iconPath": "static/tabs/message.png",
"selectedIconPath": "static/tabs/message-active.png"
},
{
"text": "我们",
"pagePath": "pages/contact/contact",
"iconPath": "static/tabs/contact.png",
"selectedIconPath": "static/tabs/contact-active.png"
}
]
},
</code></pre>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315141636647-927263489.png" alt="image-20210315120106529" loading="lazy"></p>
<h2 id="condition启动模式配置">condition启动模式配置</h2>
<p>https://uniapp.dcloud.io/collocation/pages?id=condition</p>
<p>启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：小程序转发后，用户点击所打开的页面。</p>
<p><strong>属性说明：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>是否必填</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>current</td>
<td>Number</td>
<td>是</td>
<td>当前激活的模式，list节点的索引值</td>
</tr>
<tr>
<td>list</td>
<td>Array</td>
<td>是</td>
<td>启动模式列表</td>
</tr>
</tbody>
</table>
<p><strong>list说明：</strong></p>
<table>
<thead>
<tr>
<th>属性</th>
<th>类型</th>
<th>是否必填</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>name</td>
<td>String</td>
<td>是</td>
<td>启动模式名称</td>
</tr>
<tr>
<td>path</td>
<td>String</td>
<td>是</td>
<td>启动页面路径</td>
</tr>
<tr>
<td>query</td>
<td>String</td>
<td>否</td>
<td>启动参数，可在页面的 onLoad 函数里获得</td>
</tr>
</tbody>
</table>
<h3 id="例微信小程序模拟用户点击进入详情页">例：微信小程序模拟用户点击进入详情页</h3>
<h4 id="创建详情页">创建详情页</h4>
<pre><code><template>
<view>这是详情页</view>
</template>
<script>
</script>
<style>
</style>
</code></pre>
<h4 id="配置">配置</h4>
<p>加入到<code>pages</code>里，配置页面路径</p>
<pre><code>{
"path": "pages/detail/detail"
}
</code></pre>
<p>condition配置</p>
<pre><code>"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式(list 的索引项)
"list": [{
"name": "详情页", //模式名称
"path": "pages/detail/detail", //启动页面，必选
"query": "id=50" //启动参数，在页面的onLoad函数里面得到
}]
}
</code></pre>
<h4 id="访问">访问</h4>
<p>对于h5页面来说，只需要访问<code>pages</code>里面配置的path路径即可</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315141636578-197258091.png" alt="image-20210315141120243" loading="lazy"></p>
<p>但是微信小程序不能输路径吧，这时候<code>condition</code>的作用就出来了，你打开调试的项目，如果你配置了<code>condition</code>你会发现，多了个你配置的页面</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315141636578-25823332.png" alt="image-20210315141315647" loading="lazy"></p>
<p>点击进入</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315141636613-761840048.png" alt="image-20210315141501955" loading="lazy"></p>
<p>点击页面参数</p>
<p><img src="https://img2020.cnblogs.com/blog/1652001/202103/1652001-20210315141636578-302874890.png" alt="image-20210315141524236" loading="lazy"></p>
<p>这样我们就可以方便的进行调式了</p><br><br>
来源：https://www.cnblogs.com/makalochen/p/14537337.html
頁:
[1]