小程序 – 全局配置项

全局配置文件

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下：

① pages

记录当前小程序所有页面的存放路径

② window

全局设置小程序窗口的外观

③ tabBar

设置小程序底部的  tabBar 效果

④ style

是否启用新版的组件样式

小程序窗口的组成部分

常用的配置项

导航栏的标题

设置步骤：app.json -> window -> navigationBarTitleText

{
    "window": {
         "navigationBarTitleText" : "Foo XXX"
     }

}

导航栏背景色

设置步骤：app.json -> window -> navigationBarBackgroundColor

{
    "window": {
         "navigationBarBackgroundColor" : "#2b4b6b"
     }
}

导航栏标题颜色

设置步骤：app.json -> window -> navigationBarTextStyle

{
    "window": {
         "navigationBarTextStyle" : "black or white"
     }
}

注意： navigationBarTextStyle 的可选值只有 black 和 white

开发时去掉黄色提示

在 project.config.json 文件中的 setting 选项，加入下面配置即可关闭“自动热重载”黄色提示

"setting": {
    "checkSiteMap": false,
  },

在 HBuildX 版的 uni-app 中，设置则为 manifest.json 文件中的

"mp-weixin" : {
        "setting" : {
	    "checkSiteMap" : false
        },
    },

全局下拉刷新

概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

全局下拉刷新

设置步骤：app.json -> window -> enablePullDownRefresh  的值设置为true

{
    "window": {
         "enablePullDownRefresh" : true
     }
}

注意：在 app.json 中启用下拉刷新功能，会作用于每个小程序页面！

下拉刷新框背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为:

app.json -> window -> backgroundColor  指定16进制的颜色值 #efefef #efefef #efefef

{
    "window": {
         "backgroundColor" : "#efefef"
     }
}

下拉框 loading 加载中样式

当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果，设置步骤

app.json -> window -> backgroundTextStyle  指定 dark 值

注意： backgroundTextStyle 的可选值只有 light 和 dark

{
    "window": {
         "backgroundTextStyle" : "light or dark"
     }
}

上拉触底的距离

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

设置步骤： app.json -> window -> onReachBottomDistance  设置新的数值

{
    "window": {
         "onReachBottomDistance" : 50
     }
}

注意：默认距离为50px ，如果没有特殊需求，建议使用默认值即可。

Tabbar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

底部 tabBar

顶部 tabBar

注意：

tabBar中只能配置最少 2 个、最多 5 个 tab 页签

当渲染顶部 tabBar 时，不显示 icon，只显示文本

tabBar 的组成部分

① backgroundColor：tabBar 的背景色

② selectedIconPath：选中时的图片路径

③ borderStyle：tabBar 上边框的颜色

④ iconPath：未选中时的图片路径

⑤ selectedColor：tab 上的文字选中时的颜色

⑥ color：tab 上文字的默认（未选中）颜色

tabBar 节点的配置项

{
    "window": { ... },

    "tabBar": {
        "position": "bottom", // tabBar 的位置，仅支持 bottom/top
        "borderStyle": "black", // tabBar 上边框的颜色，仅支持 black/white
        "color": "#fff", // tab 上文字的默认（未选中）颜色
        "selectedColor": "#000", // tab 上的文字选中时的颜色
        "backgroundColor": "#fff", // tabBar 的背景色
        "list": [{ ... }, { ... }] // tab 页签的列表，最少 2 个、最多 5 个 tab，详细配置在下表
    }
}

tab 项的配置选项

{
    "pages": [ ... ]
    "window": { ... },

    "tabBar": {
        "list": [{ 
            "pagePath": "pages/home/home", // 页面路径，页面必须在 pages 中预先定义
            "text": "主页", // tab 上显示的文字
            "iconPath": "image/icon/home.png", // 未选中时的图标路径；当 postion 为 top 时，不显示 icon
            "selectedIconPath": "image/icon/home-active.png", // 选中时的图标路径；当 postion 为 top 时，不显示 icon
         }, { ... }]
    }
}

注意：设置 tabBar 页的页面，必须排在 pages 数组前位

局部页面配置

小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。

注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。