零基础微信小程序开发——全局配置之window窗口（保姆级教程+超详细）

🎥 作者简介： CSDN\阿里云\腾讯云\华为云开发社区优质创作者，专注分享大数据、Python、数据库、人工智能等领域的优质内容 🌸个人主页： 长风清留杨的博客 🍃形式准则： 无论成就大小，都保持一颗谦逊的心，尊重他人，虚心学习。 ✨推荐专栏： Python入门到入魔，Mysql入门到入魔，Python入门基础大全，Flink入门到实战 🍂若缘分至此，无法再续相逢，愿你朝朝暮暮，皆有安好，晨曦微露道早安，日中炽热说午安，星河长明寄晚安🍂

全局配置

小程序开发中的全局配置文件是app.json，它位于小程序的根目录下。这个文件非常重要，因为它包含了小程序的一些基础信息和全局配置。

window窗口

常用的配置项

1. pages
   • pages配置项用于记录当前小程序所有页面的存放路径。
   • 在开发小程序时，我们需要在app.json的pages数组中列出所有页面的路径。这样，小程序框架在启动时就能够知道有哪些页面需要加载和渲染。
2. window
   • window配置项用于全局设置小程序窗口的外观。
   • 它可以包含多个子配置项，如navigationBarBackgroundColor（导航栏背景颜色）、navigationBarTextStyle（导航栏标题颜色）、navigationBarTitleText（导航栏标题文字内容）等。
   • 通过这些配置项，我们可以自定义小程序窗口的外观，使其更加符合我们的设计需求。
3. tabBar
   • tabBar配置项用于设置小程序底部的tabBar效果。
   • 它可以包含多个list项，每个list项代表一个tab项。每个tab项都需要配置pagePath（页面路径）、text（tab上按钮文字）、iconPath（图片路径，未选中时的图标）、selectedIconPath（图片路径，选中时的图标）等属性。
   • 通过tabBar配置项，我们可以为小程序添加底部导航栏，方便用户在不同页面之间进行切换。
4. style
   • style配置项用于决定是否启用新版的组件样式。
   • 在微信小程序中，随着时间的推移，一些组件的样式可能会发生变化。通过设置style配置项为v2或v3等版本，我们可以选择使用新版的组件样式。
   • 需要注意的是，启用新版组件样式可能会影响小程序的整体外观和用户体验，因此在进行配置时需要谨慎考虑。

小程序窗口组成部分

1. 导航栏区域（navigationBar）：
   • 导航栏区域位于小程序窗口的顶部，通常包含小程序的标题、返回按钮（如果有上一级页面的话）、以及其他可能的操作按钮（如搜索、设置等）。
   • “导航栏区域：默认不可见，下拉才显示。” 这意味着在某些情况下（如用户未进行下拉操作），导航栏区域可能不会被立即显示，而是需要用户进行下拉操作才能看到。
2. 背景区域（background）：
   • 背景区域是小程序窗口中的一个重要部分，它位于导航栏区域下方，页面主体区域上方。
   • “背景区域”默认是不可见的，这是因为图片所展示的是一个特定的设计或开发状态，或者是因为背景区域被设置为透明或隐藏了。
   • 在实际的小程序开发中，背景区域通常会被用来设置窗口的背景颜色、图片或渐变色等，以增强小程序的美观性和用户体验。
3. 页面主体区域：
   • 页面主体区域是小程序窗口中最重要的部分，它位于背景区域下方，占据了窗口的大部分空间。
   • “页面主体区域”用来显示Wxml中的布局。这意味着页面主体区域是小程序中展示内容的主要区域，开发者会在这里使用Wxml（微信小程序的标记语言）来定义页面的布局和结构。
   • 在页面主体区域内，开发者可以放置各种组件（如按钮、文本框、图片等），并通过样式（如颜色、字体大小、边距等）来调整它们的外观和行为。

了解 window 节点常用的配置项

设置导航栏的标题

需求：把导航栏上的标题，从默认的 “WeChat”修改为“公众号:小白的大数据之旅”

设置步骤：index.wxml文件中第一行代码写上以下代码，主要修改title属性

<navigation-bar title="公众号:小白的大数据之旅" ></navigation-bar>

设置导航栏的背景色

需求：把导航栏标题的背景色，从默认的 #fff 修改为 #2b4b6b 设置步骤：index.wxml文件中第一行代码写上以下代码，主要修改background属性

<navigation-bar title="公众号:小白的大数据之旅" background="#2b4b6b" ></navigation-bar>

全局开启下拉刷新功能

下拉刷新是移动端的专有名词，它允许用户通过下拉屏幕的动作来触发页面数据的重新加载。在小程序开发中，全局下拉刷新意味着这个功能将应用于小程序的所有页面，而不仅仅是单个页面。

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

"window": {
    "enablePullDownRefresh": true
  }

默认为false，设置为true之后就可以开启下拉功能，这个是全局的，会作用到小程序的每一个页面上

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

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

设置步骤为: app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #FF0000 表示红色背景

"window": {
    "enablePullDownRefresh": true,
    "backgroundColor": "#FF0000"
  }

设置下拉刷新时 loading 的样式

当全局开启下拉刷新功能之后，默认窗口的 loading 样式为白色，如果要更改 loading 样式的效果(仅支持dark值和light值,默认是dark值)，dark值表示三个点会跳动，light表示静态不会动

设置步骤： app.json -> window -> 为 backgroundTextStyle 指定 dark 值。

"window": {
    "enablePullDownRefresh": true,
    "backgroundColor": "#FF0000",
    "backgroundTextStyle":"dark"
  }

仔细看，下拉之后三个小点会闪烁

设置上拉触底的距离

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多的数据。 上拉触底是指用户在浏览小程序页面时，当滚动条接近页面底部时，通过上拉动作触发加载更多数据的机制。这种交互方式在移动端应用中非常常见，旨在提高用户体验，使用户能够方便地获取更多内容。

设置步骤：上拉触底距离是指触发上拉触底事件时，滚动条距离页面底部的距离。这个距离可以在全局或页面的 app.json 配置文件中通过 onReachBottomDistance 属性来配置。小程序默认的触底距离是 50px，开发者可以根据自己的需求修改这个默认值，没有特殊需求最好保持默认值。