全局配置-window

小程序窗口的组成部分

QQ图片20220531154447.png

window节点常用配置项

属性	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

设置导航栏的标题

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

设置导航栏的背景色

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

设置导航栏的标题颜色

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

全局开启下拉刷新功能

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

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

设置下拉刷新时窗口的背景色

app.json -> window -> 为 backgroundColor

设置下拉刷新时loading的样式

设置步骤为 app.json -> window -> 为 backgroundTextStyle

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

设置上拉触底的距离

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

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

全局配置 - tabBar

底部 tabBar 顶部 tabBar

1 tabBar中只能配置最少2个、最多5个tab页签
2 当渲染顶部 tabBar 时，不显示icon ，只显示文本每个 tab 项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义
text	String	是	tab 上显示的文字
iconPath	String	否	未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedIconPath	String	否	选中时的图标路径；当 postion 为 top 时，不显示 icon

页面配置

页面配置文件的作用

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

页面配置和全局配置的关系

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json 配置文件”就可以实现这种需求。注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

页面配置中常用的配置项

属性	类型	默认值	说明
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		当前页面导航栏标题文字内容
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

举个栗子：

{
     "tabbar": {
         "list": [{
                "pagePath": "pages/index/index",
                "iconPath": "/image/index/teach-task.png",
                "selectedIconPath": "/image/index/teach-task-active.png",
                "text": "任务"
            }, {
                "pagePath": "/teacher/pages/teach/add-task/add-task",
                "iconPath": "/image/index/teach-task.png",
                "selectedIconPath": "/image/index/teach-task-active.png",
                "text": "添加"
            }, {
                "pagePath": "pages/data/data",
                "iconPath": "/image/index/teach-data.png",
                "selectedIconPath": "/image/index/teach-data-active.png",
                "text": "资料"
            }],
     }
}

小程序-基础篇-全局配置及页面配置