pages.json 文件:pages 节点
pages
uni-app
通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下:
属性 | 类型 | 默认值 | 描述 |
---|---|---|---|
path | String | 配置页面路径 | |
style | Object | 配置页面窗口表现,配置项参考下方 pageStyle |
Tips:
- pages节点的第一项为应用入口页(即首页)
- 应用中新增/减少页面,都需要对 pages 数组进行修改
- 文件名不需要写后缀,框架会自动寻找路径下的页面资源
代码示例:
开发目录为:
┌─pages
│ ├─index
│ │ └─index.vue
│ └─login
│ └─login.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
则需要在 pages.json 中填写
{
"pages": [
{
"path": "pages/index/index",
"style": { ... }
}, {
"path": "pages/login/login",
"style": { ... }
}
]
}
复制代码
#style
用于设置每个页面的状态栏、导航条、标题、窗口背景色等。
页面中配置项会覆盖 globalStyle 中相同的配置项
属性 | 类型 | 默认值 | 描述 | 平台差异说明 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色(同状态栏背景色),如"#000000" | |
navigationBarTextStyle | String | white | 导航栏标题颜色及状态栏前景颜色,仅支持 black/white | |
navigationBarTitleText | String | 导航栏标题文字内容 | ||
navigationBarShadow | Object | 导航栏阴影,配置参考下方 导航栏阴影 | ||
navigationStyle | String | default | 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意 | 微信小程序 7.0+、百度小程序、H5、App(2.0.3+) |
disableScroll | Boolean | false | 设置为 true 则页面整体不能上下滚动(bounce效果),只在页面配置中有效,在globalStyle中设置无效 | 微信小程序(iOS)、百度小程序(iOS) |
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 平台 |
disableSwipeBack | Boolean | false | 是否禁用滑动返回 | App-iOS(3.4.0+) |
titleImage | String | 导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址 | 支付宝小程序、H5、App | |
transparentTitle | String | none | 导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 | 支付宝小程序、H5、APP |
titlePenetrate | String | NO | 导航栏点击穿透 | 支付宝小程序、H5 |
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-lark | Object | 设置编译到 mp-lark 平台的特定样式 | 飞书小程序 | |
mp-qq | Object | 设置编译到 mp-qq 平台的特定样式 | QQ小程序 | |
mp-kuaishou | Object | 设置编译到 mp-kuaishou 平台的特定样式 | 快手小程序 | |
mp-jd | Object | 设置编译到 mp-jd 平台的特定样式 | 京东小程序 | |
usingComponents | Object | 引用小程序组件,参考 小程序组件 | App、微信小程序、支付宝小程序、百度小程序、京东小程序 | |
leftWindow | Boolean | true | 当存在 leftWindow时,当前页面是否显示 leftWindow | H5 |
topWindow | Boolean | true | 当存在 topWindow 时,当前页面是否显示 topWindow | H5 |
rightWindow | Boolean | true | 当存在 rightWindow时,当前页面是否显示 rightWindow | H5 |
maxWidth | Number | 单位px,当浏览器可见区域宽度大于maxWidth时,两侧留白,当小于等于maxWidth时,页面铺满;不同页面支持配置不同的maxWidth;maxWidth = leftWindow(可选)+page(页面主体)+rightWindow(可选) | H5(2.9.9+) |
注意
- 使用
maxWidth
时,页面内fixed元素需要使用--window-left,--window-right来保证布局位置正确
代码示例:
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",//设置页面标题文字
"enablePullDownRefresh":true//开启下拉刷新
}
},
...
]
}
复制代码
注意
- 支付宝小程序使用
titleImage
时必须使用https
的图片链接地址,需要真机调试才能看到效果,支付宝开发者工具内无效果
pages.json 文件:pages 节点的更多相关文章
- 2.3.pages.json文件的页面配置与全局配置
新建页面 # pages uni-app 通过 pages 节点配置应用由哪些页面组成,pages 节点接收一个数组,数组每个项都是一个对象,其属性值如下: 属性 类型 默认值 描述 path Str ...
- 微信小程序app.json文件常用全局配置
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. JOSN文件不允许注释,下面为了学习加上注释,粘贴需要的片段 ...
- 【微信】微信小程序 微信开发工具中新创建的json文件,编译报错VM1781:2 pages/module/module.json 文件解析错误 SyntaxError: Unexpected end of JSON input
如果新创建报错:编译报错VM1781:2 pages/module/module.json 文件解析错误 SyntaxError: Unexpected end of JSON input 解决方法 ...
- ASP.NET Web Pages:文件
ylbtech-.Net-ASP.NET Web Pages:文件 1.返回顶部 1. ASP.NET Web Pages - 文件 本章介绍有关使用文本文件的知识. 使用文本文件 在前面的章节中,我 ...
- ASP.NET Web Pages:文件夹
ylbtech-.Net-ASP.NET Web Pages:文件夹 1.返回顶部 1. ASP.NET Web Pages - 文件夹 本章介绍有关文件夹和文件夹路径的知识. 在本章中,您将学到: ...
- Nodejs package.json文件介绍
每个npm的安装包里面都会包含一个package.json,通常这个文件会在包的根目录下. 这个文件很类似于.net项目中的.csproj+AssemblyInfo.cs+App.config文件,主 ...
- 使用Travis CI自动部署博客到github pages和coding pages
每次换系统或换电脑之后重新部署博客总是很苦恼?想像jekyll那样,一次性部署完成后,以后本地不用安装环境直接 git push 就能生成博客?那推荐你应该使用使用 Travis CI了. 这篇文章我 ...
- 微信小程序 app.json文件配置
https://developers.weixin.qq.com/miniprogram/dev/index.html 起步 https://developers.weixin.qq.com/min ...
- 世界地图和主要国家的 JSON 文件
转自:http://blog.csdn.net/chinagissoft/article/details/52136253 世界地图: world.json 美洲: 美国:USA.json 加拿大:C ...
- 小程序学习一 .json 文件配置
微信小程序——配置 以下就是小编对小程序配置的资料进行的系统的整理,希望能对开发者有帮助. 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置 ...
随机推荐
- Unity图片转存及读取
[code]csharpcode: /// <summary> /// 加载图片 /// </summary> private Sprite LoadTexture(strin ...
- mxnet的broadcast_power() 注释错误
用relationnet时,发现broadcast_power()的源码中的注释如下: 官方文档中的注释如下: 怎么算都算不出它这个结果... 自己用mxnet实验了一把,发现是注释错了,代码如下:
- LoadRunner——分析图详解(十四)
<分析图详解> 一.Running V user s 图 X轴表示运行所用的时间,Y轴表示vuser数, 显示在整个运行过程中随着时间的推移,虚拟用户数量是如何变化的,具体描述为:用户是如 ...
- 数据库相关知识点整理,助力拿到心仪的offer
1. 数据库的事务 1.1 什么是数据库事务? 事务是指一组逻辑上相关的操作,这些操作要么全部完成,要么全部不完成. 事务是数据库管理系统执行过程中的一个逻辑工作单位,是用户定义的一个操作序列,这些操 ...
- 利用 Rainbond 云原生平台简化 Kubernetes 业务问题排查
Kubernetes 已经成为了云原生时代基础设施的事实标准,越来越多的应用系统在 Kubernetes 环境中运行.Kubernetes 已经依靠其强大的自动化运维能力解决了业务系统的大多数运行维护 ...
- day10-SpringBoot的异常处理
SpringBoot异常处理 1.基本介绍 默认情况下,SpringBoot提供/error处理所有错误的映射,也就是说当出现错误时,SpringBoot底层会请求转发到/error这个映射路径所关联 ...
- fullcalendar 日历插件的使用
[需求]:使用 fullcalendar日历插件,完成如下功能:可以进行拖动,点击空白处添加,双击后修改和删除等功能.API 链接
- Golang 挑战:编写函数 walk(x interface{}, fn func(string)),参数为结构体 x,并对 x 中的所有字符串字段调用 fn 函数。难度级别:递归。
golang 挑战:编写函数 walk(x interface{}, fn func(string)),参数为结构体 x,并对 x 中的所有字符串字段调用 fn 函数.难度级别:递归. 为此,我们需要 ...
- Java中使用List的add方法后元素相同问题
在写JavaWeb时,我在后端通过JDBC读取了数据后逐个使用List.add()方法添加元素并通过request方法传给jsp页面解析,但是添加以后出现了在列表里有n个(假设添加了n个元素)最后一个 ...
- [Maven]Maven聚合工程
一直对此问题好奇,正好有这兴致和时间,有必要了解一下. 所谓聚合项目,实际上就是对项目分模块. 互联网项目一般来说按照业务分(订单模块.VIP模块.支付模块.CMS模块-): 传统的软件项目,大多采用 ...