微信小程序中的全局配置和页面配置

全局配置:

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象。有以下配置项:

entryPagePath:

小程序默认启动首页,如果不填,将默认为pages列表的第一项。不支持带页面路径参数。

pages:

页面路径,用于指定小程序由哪些页面组成,每一项都对应一个页面的路径信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的.josn、.js、.wxml、.wxss四个文件进行处理。

window:

全局的默认窗口表现,用于设置小程序的状态栏、导航条、标题、窗口背景色。
微信小程序中的全局配置和页面配置

  1. navigationBarBackgroundColor:导航栏背景颜色。
  2. navigationBarTitleText:导航栏标题文字内容。
  3. navigationBarTextStyle:导航栏标题颜色,仅支持 black / white。
  4. navigationStyle:导航栏样式,仅支持以下值:default 默认样式;custom 自定义导航栏,只保留右上角胶囊按钮。
  5. backgroundColor:窗口的背景色。
  6. backgroundTextStyle:下拉 loading 的样式,仅支持 dark / light。
  7. enablePullDownRefresh:是否开启全局的下拉刷新。
  8. onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为 px。
  9. pageOrientation:屏幕旋转设置,支持 auto / portrait / landscape。
tabBar:

底部tab栏的表现。如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

  1. color:tab 上的文字默认颜色,仅支持十六进制颜色。
  2. selectedColor:tab 上的文字选中时的颜色,仅支持十六进制颜色。
  3. backgroundColor:tab 的背景色,仅支持十六进制颜色。
  4. borderStyle:tabbar 上边框的颜色, 仅支持 black / white。
  5. position:tabBar 的位置,仅支持 bottom / top。
  6. custom:自定义 tabBar。
  7. list:tab 的列表。list接受一个数组,只能配置最少2个、最多5个 tab,tab按数组的顺序排序,每个项都是一个对象。

    list中的tab项的属性值:

    1. pagePath:页面路径,必须在 pages 中先定义。
    2. text:tab 上按钮文字。
    3. iconPath:图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
      当 position 为 top 时,不显示 icon。
    4. selectedIconPath:选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。当 position 为 top 时,不显示 icon。

页面配置:

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象。

有以下配置项:

  1. navigationBarBackgroundColor:导航栏背景颜色。
  2. navigationBarTitleText:导航栏标题文字内容。
  3. navigationBarTextStyle:导航栏标题颜色,仅支持 black / white。
  4. navigationStyle:导航栏样式,仅支持以下值:default 默认样式;custom 自定义导航栏,只保留右上角胶囊按钮。
  5. backgroundColor:窗口的背景色。
  6. backgroundTextStyle:下拉 loading 的样式,仅支持 dark / light。
  7. enablePullDownRefresh:是否开启全局的下拉刷新。
  8. onReachBottomDistance:页面上拉触底事件触发时距页面底部距离,单位为 px。
  9. pageOrientation:屏幕旋转设置,支持 auto / portrait / landscape。
  10. disableScroll:设置为 true 则页面整体不能上下滚动。只在页面配置中有效,无法在 app.json 中设置。
  11. usingComponents:页面自定义组件配置。