微信小程序页面配置

页面配置

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