微信小程序页面配置

页面配置

小程序的配置可以配置页面路径、窗口表现、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 后续学到自定义组件时再介绍