微信小程序开发系列（五）·小程序配置文件详细介绍·tabbar配置以及页面配置_开发测试

微信小程序开发系列（五）·小程序配置文件详细介绍·tabbar配置以及页面配置

创始人

2024-11-10 01:37:08

0次

零基础手把手教你创建微信小程序（四）·小程序配置文件详细介绍·pages配置以及window配置-CSDN博客

1. 全局配置-tabbar配置

2. 页面配置

1. 全局配置-tabbar配置

tabBar 字段：定义小程序顶部、底部 tab 栏，用以实现页面之间的快速切换，可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
borderStyle	string	否	black	tabbar 上边框的颜色，仅支持 `black` / `white`
list	Array	是		tab 的列表，详见 `list` 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 `bottom` / `top`
custom	boolean	否	false	自定义 tabBar，见详情	2.5.0

其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下：

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。

代码示例：

{   "entryPagePath": "pages/index/index",   "pages": [     "pages/index/index",     "pages/cate/cate",     "pages/cart/cart",     "pages/profile/profile"   ],   "window": {     "navigationBarTitleText": "慕尚花坊",     "navigationBarBackgroundColor": "#f3514f",     "enablePullDownRefresh": true,     "backgroundColor": "#efefef",     "backgroundTextStyle":"dark"   },   "tabBar": {     "selectedColor": "#f35114f",     "color": "#666",     "backgroundColor": "#efefef",     "borderStyle":"black",     "position": "top",     "list": [       {         "text":"首页",         "pagePath": "pages/index/index",         "iconPath": "",         "selectedIconPath": ""       },       {         "text":"分类",         "pagePath": "pages/cate/cate",         "iconPath": "",         "selectedIconPath": ""       },       {         "text":"购物车",         "pagePath": "pages/cart/cart",         "iconPath": "",         "selectedIconPath": ""       },       {         "text":"我的",         "pagePath": "pages/profile/profile",         "iconPath": "",         "selectedIconPath": ""       }     ]   },     "style": "v2",   "sitemapLocation": "sitemap.json",   "lazyCodeLoading": "requiredComponents" }

其中

"iconPath": "",
"selectedIconPath": ""

双引号内的内容根据自己准备的图片进行编写，若是不写图片最终展示效果为：

2. 页面配置

小程序的页面配置,也称局部配置,每一个小程序页面也可以使用自己的.json文件来对本页面的窗口表现进行配置需要注意的是：页面配置文件的属性和全局配置文件中的 window 属性几乎一致,只不过这里不需要额外指定 window 字段,因此如果出现相同的配置项，页面中配置项会覆盖全局配置文件中相同的配置项。

属性	类型	默认值	描述	最低版本
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，如 `#000000`
navigationBarTextStyle	string	white	导航栏标题、状态栏颜色，仅支持 `black` / `white`
navigationBarTitleText	string		导航栏标题文字内容
navigationStyle	string	default	导航栏样式，仅支持以下值： `default` 默认样式 `custom` 自定义导航栏，只保留右上角胶囊按钮。	iOS/Android 微信客户端 7.0.0，Windows 微信客户端不支持
homeButton	boolean	false	在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键	微信客户端 8.0.24
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundColorContent	HexColor	#RRGGBBAA	页面容器背景色，点击查看设置背景色详情
backgroundTextStyle	string	dark	下拉 loading 的样式，仅支持 `dark` / `light`
backgroundColorTop	string	#ffffff	顶部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
backgroundColorBottom	string	#ffffff	底部窗口的背景色，仅 iOS 支持	微信客户端 6.5.16
enablePullDownRefresh	boolean	false	是否开启当前页面下拉刷新。详见 Page.onPullDownRefresh
onReachBottomDistance	number	50	页面上拉触底事件触发时距页面底部距离，单位为px。详见 Page.onReachBottom
pageOrientation	string	portrait	屏幕旋转设置，支持 `auto` / `portrait` / `landscape` 详见响应显示区域变化	2.4.0 (auto) / 2.5.0 (landscape)
disableScroll	boolean	false	设置为 `true` 则页面整体不能上下滚动。只在页面配置中有效，无法在 `app.json` 中设置
usingComponents	Object	否	页面自定义组件配置	1.6.3
initialRenderingCache	string		页面初始渲染缓存配置，支持 `static` / `dynamic`	2.11.1
style	string	default	启用新版的组件样式	2.10.2
singlePage	Object	否	单页模式相关配置	2.12.0
restartStrategy	string	homePage	重新启动策略配置	2.8.0
handleWebviewPreload	string	static	控制预加载下个页面的时机。支持 `static` / `manual` / `auto`	2.15.0
visualEffectInBackground	string	否	切入系统后台时，隐藏页面内容，保护用户隐私。支持 `hidden` / `none`，若对页面单独设置则会覆盖全局的配置，详见全局配置	2.15.0
enablePassiveEvent	Object或boolean	否	事件监听是否为 passive，若对页面单独设置则会覆盖全局的配置，详见全局配置	2.24.1
renderer	string	否	渲染后端	2.30.4
rendererOptions	Object	否	渲染后端选项，详情相关文档	3.1.0
componentFramework	string	否	组件框架，详情相关文档	2.30.4

找到对应模块的.json文件：

代码部分可以参考window配置：

零基础手把手教你创建微信小程序（四）·小程序配置文件详细介绍·pages配置以及window配置-CSDN博客

上一篇：【微信小程序开发】微信小程序、大前端之flex布局方式详细解析

下一篇：uniapp 开发微信小程序请求问题 , 真机调试正常,开发工具正常,但是使用扫码预览接口都是不通的,发布到体验版也是请求失败

微信小程序开发系列（五）·小程序配置文件详细介绍·tabbar配置以及页面配置

1. 全局配置-tabbar配置

2. 页面配置

相关内容

热门资讯