当前位置：首页 > news >正文

【微信小程序】全局配置

news 2025/7/13 18:49:50

1. 全局配置文件及常用的配置项

在这里插入图片描述

2.window

(1).小程序窗口的组成部分

在这里插入图片描述

(2). 了解 window 节点常用的配置项

在这里插入图片描述

(3). 设置导航栏的标题

在这里插入图片描述

(4). 设置导航栏的背景色

在这里插入图片描述

(5). 设置导航栏的标题颜色

在这里插入图片描述

(6). 全局开启下拉刷新功能

在这里插入图片描述

(7). 设置下拉刷新时窗口的背景色

在这里插入图片描述

(8).设置下拉刷新时 loading 的样式

在这里插入图片描述

(9).设置上拉触底的距离

在这里插入图片描述

3.tabBar

(1).什么是 tabBar

在这里插入图片描述

(2).tabBar 的 6 个组成部分

在这里插入图片描述

(3).tabBar 节点的配置项

在这里插入图片描述

(4).每个 tab 项的配置选项

在这里插入图片描述

4.案例：配置 tabBar

(1).需求描述

在这里插入图片描述

(2).实现步骤

在这里插入图片描述

步骤1 - 拷贝图标资源

在这里插入图片描述

步骤2 - 新建 3 个对应的 tab 页面

在这里插入图片描述

步骤3 - 配置 tabBar 选项

在这里插入图片描述

完整的配置代码

在这里插入图片描述

{"pages": ["pages/home/home","pages/message/message","pages/contact/contact"],"window": {"navigationBarTextStyle":"black","navigationBarTitleText": "微信小程序","navigationBarBackgroundColor": "#00ffff","backgroundColor": "#eee","enablePullDownRefresh": true,"backgroundTextStyle": "light"},"style": "v2","componentFramework": "glass-easel","sitemapLocation": "sitemap.json","lazyCodeLoading": "requiredComponents","tabBar": {"list": [{"pagePath": "pages/home/home","text": "首页","iconPath": "images/tabs/home.png", //相对路径"selectedIconPath": "images/tabs/home-active.png"},{"pagePath": "pages/message/message","text": "消息","iconPath": "images/tabs/message.png","selectedIconPath": "images/tabs/message-active.png"},{"pagePath": "pages/contact/contact","text": "联系我们","iconPath": "images/tabs/contact.png","selectedIconPath": "images/tabs/contact-active.png"}],"color": "#000000","selectedColor": "#ff0000","backgroundColor": "#eee","position":"bottom", // top或者bottom"borderStyle": "white"  // white或者black}
}