【小程序从0到1】常用的全局配置

欢迎来到我的博客
📔博主是一名大学在读本科生，主要学习方向是前端。
🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏
🛠目前正在学习的是🔥$React/小程序$🔥，中间穿插了一些基础知识的回顾
🌈博客主页👉codeMak1r.小新的博客

😇本文目录😇

• 全局配置文件及常用的配置项
• 全局配置 --- window
• • 小程序窗口组成部分
  • 了解window节点常用的配置项
  • 设置导航栏的标题：
  • 设置导航栏的背景色：
  • 设置导航栏标题颜色：
  • 全局开启下拉刷新功能
  • 设置下拉刷新时窗口的背景色
  • 设置下拉刷新时的loading样式
• 全局配置 --- tabBar
• • tabBar的六个组成部分
  • tabBar节点的配置项
  • 每个tab项的配置选项

本文被专栏【小程序｜原力计划】收录

🕹坚持创作✏️，一起学习📖，码出未来👨🏻‍💻！

上篇文章详细讲解了微信小程序WXSS模版语法的一些基本使用，这篇文章将带领大家学习的是小程序的「小程序的全局配置」

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

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

1. pages：记录当前小程序所有页面的存放路径
2. window：全局设置小程序窗口的外观
3. tabBar：设置小程序底部的tabBar效果
4. style：是否启用新版的组件样式

全局配置 — window

小程序窗口组成部分

了解window节点常用的配置项

设置导航栏的标题：

app.json ⇒ window ⇒ navigationBarTitleText

设置导航栏的背景色：

app.json ⇒ window ⇒ navigationBarBackgroundColor
仅支持十六进制的颜色设置，不支持如“red/black”颜色设置。

设置导航栏标题颜色：

app.json ⇒ window ⇒ navigationBarTextStyle

全局开启下拉刷新功能

概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
app.json ⇒ window ⇒ enablePullDownRefresh设置为true
在app.json中启动下拉刷新功能，会作用于每个小程序页面。

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

当全局开启下拉刷新功能之后，默认的窗口背景为白色。

自定义下拉刷新窗口的背景色：
app.json ⇒ window ⇒ 为backgroundColor指定16进制的颜色值为：#efefef。

设置下拉刷新时的loading样式

当全局开启下拉刷新功能之后，默认窗口的loading样式为白色

更改loading样式的效果

app.json ⇒ window ⇒ backgroundTextStyle

全局配置 — tabBar

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

1. 底部tabBar
2. 顶部tabBar

• tabBar中只能配置最少2个，最多5个tab页签；
• 当渲染顶部tabBar时，不显示icon，只显示文本

tabBar的六个组成部分

1. backgroundColor：tabBar的背景色
2. selectedIconPath：选中时的图片路径
3. borderStyle：tabBar上边框的颜色
4. iconPath：未选中时图片的路径
5. selectedColor：tab上的文字选中时的颜色
6. color：tab上文字的默认（未选中）颜色

tabBar节点的配置项

每个tab项的配置选项