• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

云南网站建设教你配置uni-app配置文件pages.json教程

当前位置：网站建设 > 优化推广

　　uni-app 配置文件 - pages.json

　　云南网站制作网站建设教你配置uni-app配置文件pages.json教程

　　pages.json

　　pages.json 文件用来对 uni-app 进行全局配置，决定网站页面文件的路径、窗口表现、配置设置多 tab 等。

　　pages.json 配置项列表

　　globalStyle Object 否 配置设置默认网站页面的窗口表现pages Object Array 是 配置设置网站页面路径及窗口表现tabBar Object 否 配置设置底部 tab 的表现condition Object 否 启动模式配置

　　以下是一个包含了所有配置选项的 pages.json ：

　　{ "pages": [{ "path": "pages/component/index", "style": { "navigationBarTitleText": "组件" } }, { "path": "pages/API/index", "style": { "navigationBarTitleText": "接口" } }, { "path": "pages/component/view/index", "style": { "navigationBarTitleText": "view" } }], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "演示", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" }, "tabBar": { "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "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": "接口" }] }}

　　globalStyle

　　用于配置设置应用的状态栏、导航条、title标题、窗口背景色等。

　　navigationBarBackgroundColor HexColor #000000 导航栏背景颜色 navigationBarTextStyle String white 导航栏title标题颜色，仅支持 black/white navigationBarTitleText String 导航栏title标题纯文本文字信息内容 navigationStyle String default 导航栏样式，仅支持 default/custom。 backgroundColor HexColor #ffffff 窗口的背景色 微信小程序

　　注意：navigationStyle 只在 pages.json->globalStyle 中配置设置生效。开启 custom 后，所有窗口均无导航栏。

　　pages

　　接收一个数组，来指定应用由哪些网站页面组成。每一项代表对应网站页面的信息，应用中新增/减少网站页面，都需要对 pages 数组进行调整修改。

　　文件名不需要写后缀，框架会自动寻找路径下的网站页面资源。

　　注意：pages节点的第一项为应用入口页（即首页）。

　　代码示例：

　　建设开发目录为：

　　pages/pages/index/index.vue pages/login/login.vue mainfest.json pages.json

　　则需要在 pages.json 中填写

　　{ "pages": [{ "index": { "path": "pages/index/index" } }, { "login": { "path": "pages/login/login" } } ]}

　　pages.style

　　用于配置设置每个网站页面的状态栏、导航条、title标题、窗口背景色等。

　　navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如"#000000" navigationBarTextStyle String white 导航栏title标题颜色，仅支持 black/white navigationBarTitleText String 导航栏title标题纯文本文字信息内容 backgroundColor HexColor #ffffff 窗口的背景色 微信小程序backgroundTextStyle String dark 下拉 loading 的样式，仅支持 dark/light enablePullDownRefresh Boolean false 是不是是否开启下拉刷新，详见网站页面同类相关事件处理函数 onReachBottomDistance Number 50 网站页面上拉触底事件触发时距网站页面底部距离，单位为px navigationStyle String default 导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏，只保留右上角胶囊状的按钮。 微信小程序backgroundColorTop String #ffffff 顶部窗口的背景色。 微信小程序且为 iOSbackgroundColorBottom String #ffffff 底部窗口的背景色。 微信小程序且为 iOS

　　代码示例：

　　{ "pages": [{ "index": { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页",//配置设置网站页面title标题纯文本文字 "enablePullDownRefresh":true//开启下拉刷新 } } }, ... ]}

　　tabBar

　　如果应用是一个多 tab 应用，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

　　Tips

　　当配置设置 position 为 top 时，将不会显示 icon

　　tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

　　属性说明：

　　color HexColor 是 tab 上的纯文本文字默认颜色selectedColor HexColor 是 tab 上的纯文本文字选中时的颜色backgroundColor HexColor 是 tab 的背景色borderStyle String 否 black tabbar 上边框的颜色，仅支持 black/white list Array 是 tab 的列表，详见 list 属性说明，最少2个、最多5个 tab position String 否 bottom 可选值 bottom、top

　　其中 list 接收一个数组，数组中的每个项都是一个对象，其属性值如下：

　　pagePath String 是 网站页面路径，必须在 pages 中先定义text String 是 tab 上按钮纯文本文字iconPath String 否 image图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px，当 postion 为 top 时，此参数无效，不支持互联网网络image图片selectedIconPath String 否 选中时的image图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px ，当 postion 为 top 时，此参数无效

　　condition

　　启动模式配置，仅建设开发期间生效，用于模拟直达网站页面的场景，如：小程序转发后，用户使用者访问点击所打开的网站页面。

　　属性说明：

　　current Number 是 当前激活的模式，list节点的索引值list Array 是 启动模式列表

　　list说明：

　　name String 是 启动模式名称path String 是 启动网站页面路径query String 否 启动参数，可在网站页面的 函数里获得

　　注意： 在5+app里真机运行可直接打开配置的网站页面，微信建设开发者工具里需要手动改变编译模式：

　　代码示例：

　　"condition": { //模式配置，仅建设开发期间生效 "current": 0, //当前激活的模式（list 的索引项） "list": [{ "name": "swiper", //模式名称 "path": "pages/component/swiper/swiper", //启动网站页面，必选 "query": "interval=4000&autoplay=false" //启动参数，在网站页面的函数里面得到。 }, { "name": "test", "path": "pages/component/switch/switch" } ]}

　　实例（见多媒体视频教程）

　　1、改变导航背景颜色及title标题

　　2、创建网站页面

　　3、创建 tabbar

　　云南网站制作网站建设教你配置uni-app配置文件pages.json教程

　　信息文章请注明出处：

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。