微信小程序页面配置

大家好，欢迎来到IT知识分享网。

页面配置

小程序的配置可以配置页面路径、窗口表现、tabBar等，分为全局配置和页面配置，全局配置针对所有页面生效，页面配置只针对当前页生效。

全局配置 (app.json)

(1) 路径配置

pages 配置页面路径，未配置路径的页面无法被访问到

技巧 : 创建一个页面文件时, 在pages中添加一个配置项, 小程序开发工具自动把文件创建出来,不需要手动创建

//app.json 中 { "pages": [ "pages/index/index", "pages/home/home", "pages/info/info", ], } 

(2) 起始页配置

entryPath 配置小程序默认的启动页面（首页） 如果不填，将默认为 pages 列表的第一项

 { "entryPagePath": "pages/home/home", } 

(3) window窗口配置

window 用于设置小程序的状态栏、导航条、标题、窗口背景色。

 "window": { "enablePullDownRefresh": true, //窗口配置 "backgroundColor": "#eee", "backgroundTextStyle": "dark", //导航栏的配置 "navigationBarBackgroundColor": "#FFA500", "navigationBarTextStyle": "white", "navigationBarTitleText": "我的小程序", "navigationStyle": "default" }, 

窗口的配置

• backgroundColor 窗口的背景色

导航栏的配置

• navigationBarBackgroundColor 导航栏背景颜色 (颜色是十六进制)
• navigationBarTextStyle 导航栏标题颜色，仅支持 black / white
• navigationBarTitleText 导航栏标题文字内容
• navigationStyle 导航栏样式，仅支持以下值: default 默认样式 custom 自定义导航栏

下拉刷新的配置

• backgroundTextStyle 下拉 loading 的样式，仅支持 dark / light
• enablePullDownRefresh 是否开启全局的下拉刷新。

(4) tabBar 配置

tabBar 底部 Tab 栏（tabBar 中的页面必须配置在 pages 中）

 "tabBar": { "color": "#999", "selectedColor": "#5792AF", "backgroundColor": "#e0e0e0", "borderStyle": "white", "position": "bottom", "list": [ { "pagePath": "pages/home/home", "text": "我的", "iconPath": "/assets/icon/home.png", "selectedIconPath": "/assets/icon/home-active.png" }, ] }, 

• color 文字颜色，仅支持十六进制颜色
• selectedColor 文字选中时的颜色，仅支持十六进制颜色
• backgroundColor tab 的背景色，仅支持十六进制颜色
• borderStyle tabbar上边框的颜色 , 仅支持 black / white
• list tabBar 页面跳转的路径和图标配置
• pagePath 跳转的页面路径
• text tabBar 上按钮文字
• iconPath 图片路径 icon 大小限制为 40kb，不支持网络图片。 当 position 为 top 时，不显示 icon。
• selectedIconPath 选中时的图片路径
• position tabBar 的位置，仅支持 bottom / top

页面配置

页面配置大部分与全局配置中的 window 是重叠的，页面配置的优先级大于全局配置的。

• disableScroll 只能用在在页面配置中，禁用页面滚动
• usingComponents 后续学到自定义组件时再介绍