微信小程序全局配置

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

小程序根目录下的 app.json 文件是小程序的全局配置文件。常用的配置项如下:
① pages
记录当前小程序所有页面的存放路径
window
全局设置小程序窗口的外观
tabBar
设置小程序底部的 tabBar 效果
④ style
是否启用新版的组件样式

全局配置 - window

  • 小程序窗口的组成部分

  • 了解 window 节点常用的配置项

  • 设置导航栏的标题 

 设置步骤:app.json -> window -> navigationBarTitleText 需求:把导航栏上的标题,从默认的 “WeChat”修改为“黑马程序员”,效果如图所示:

  • 设置导航栏的背景色 

设置步骤:app.json -> window -> navigationBarBackgroundColor 需求:把导航栏标题的背景色,从默认的 #fff 修改为 #2b4b6b ,效果如图所示: 

  • 设置导航栏的标题颜色 

设置步骤:app.json -> window -> navigationBarTextStyle 需求:把导航栏上的标题颜色,从默认的 black 修改为 white ,效果如图所示: 

注意: navigationBarTextStyle 的可选值只有 black 和 white 

  •  全局开启下拉刷新功能

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

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

当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为: app.json -> window -> 为 backgroundColor 指定16进制的颜色值 #efefef。效果如下:

注意:真机测试时,下拉窗口不会自动关闭,需要结合wx.stopPullDownRefresh()关闭刷新

  • 设置下拉刷新时 loading 的样式 

当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果,设置步骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值。效果如下:

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

  •  设置上拉触底的距离

概念:上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为。 设置步骤: app.json -> window -> 为 onReachBottomDistance 设置新的数值 注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。

全局配置 - tabBar

  • 什么是 tabBar 

tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为: 底部 tabBar 顶部 tabBar 注意: tabBar中只能配置最少 2 个、最多 5 个 tab 页签 当渲染顶部 tabBar 时,不显示 icon,只显示文本

 

  • tabBar 的 6 个组成部分 

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

  • tabBar 节点的配置项 

  • 每个 tab 项的配置选项 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/550680.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MongoDB的CURD(增删改查操作)

读者大大们好呀!!!☀️☀️☀️ 🔥 欢迎来到我的博客 👀期待大大的关注哦❗️❗️❗️ 🚀欢迎收看我的主页文章➡️寻至善的主页 ✈️如果喜欢这篇文章的话 🙏大大们可以动动发财的小手👉&#…

【IT运维入门(ITHW)系列】之「快速部署」第二期清单(持续更新)

ITHW是Information Technology Hello World的缩写简拼。意在提供IT领域的入门相关知识,近期给大家带来的是主流技术选型的快速部署系列,意在最大程度地简化部署过程,以便能快速体验或测试相关技术选型。 「快速部署」第一期清单 ITHW快捷部署…

Day 15 Linux网络管理

IP解析 IP地址组成:IP地址由4部分数字组成,每部分数字对应于8位二进制数字,各部分之间用小数点分开,这是点分2进制。如果换算为10进制我们称为点分10进制。 每个ip地址由两部分组成网络地址(NetID)和主机地址(HostID).网络地址表…

文件服务: txt文件预览乱码问题

文章目录 一、背景二、解决方案1、转换流(解决代码与文件编码不一致读取乱码的问题)2、获取文本文件的字符编码 一、背景 在springboot项目中使用springmvc web.resources的形式进行文件访问。本地上传txt文件编码格式为GB2312(中文简体),浏…

大数据平台搭建2024(二)

二:Hive安装 只在node01上操作 1 安装MySQL 8.0 最小化安装需要安装这个 yum install -y wget1-1 下载MySQL的yum源 wget http://dev.mysql.com/get/mysql80-community-release-el7-7.noarch.rpm检查是否安装成功 rpm -qpl mysql80-community-release-el7-7.n…

什么是漏洞?最全的漏洞分类!

01 — “ 什么是漏洞**”** 漏洞是指一个系统存在的弱点或缺陷,系统对特定威胁攻击或危险事件的敏感性,或进行攻击的威胁作用的可能性。漏洞可能来自应用软件或操作系统设计时的缺陷或编码时产生的错误,也可能来自业务在交互处理过程中的设…

14.C++常用的算法_排序算法

文章目录 遍历算法1. sort()代码工程运行结果 2. random_shuffle()代码工程运行结果第一次运行结果第二次运行结果第三次运行结果 3. merge()代码工程运行结果 4. reverse()代码工程运行结果 遍历算法 1. sort() 代码工程 sort()函数默认是升序排列,如果想要降序…

ChatGPT实用指南2024

随着ChatGPT技术的演进,越来越多的人开始在工作中利用此工具。以下是关于ChatGPT的实用指南,适合不太熟悉此技术的朋友参考。 一、ChatGPT概述 1. ChatGPT是什么? ChatGPT是基于OpenAI开发的GPT大型语言模型的智能对话工具。它能够通过自然语…

爆肝3k字!掌握Spring与Redis的高效交互:从Jedis到Spring Data Redis

🌟 前言 欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍 &#x…

B203-若依框架应用

目录 简介版本RuoYi-fast项目准备新增模块/代码生成 简介 基于SpringBoot的权限管理系统,基于SpringBoot开发的轻量级Java快速开发框架 版本 前后端未分离单应用版本:RuoYi-fast,前后端未分离多模块版本:RuoYi 前后端分离单应用…

06节-51单片机-LCD1602调试工具

欢迎订阅专栏,持续为您更新! 1.LCD1602调试工具 使用LCD1602液晶屏作为调试窗口,提供类似printf函数的功能,可实时观察单片机内部数据的变换情况,便于调试和演示。 本文提供的LCD1602代码属于模块化的代码&#xff…

Java如何用EasyExcel插件对Excel进行数据导入和数据导出

文章目录 一、EasyExcel的示例导入依赖创建实体类数据导入和导出 二、EasyExcel的作用三、EasyExcel的注解 EasyExcel是一个阿里巴巴开源的excel处理框架,它以使用简单、节省内存著称。在解析Excel时,EasyExcel没有将文件数据一次性全部加载到内存中&…

如果补货机器人也开始搬砖

过去几年,如果一位顾客的欲购商品疑似缺货,“请稍等,我去后台查一下”便是最常听到的一句话。随着过去几年劳动力短缺的加剧,货架并不总像许多人习惯的那样满满当当。为减轻不断补货的负担,使员工可以将精力集中于其他…

【AI工具】AI一键生成思维导图

ChatMind 被 Xmind 收购之后(即那个 00 后团队),将重点聚焦于海外市场,国内职场用户可对其予以关注,用户体验着实不错(我认为 AI 生成思维导图,其关键点在于交互与 UI): …

05节-51单片机-模块化编程

1.两种编程方式的对比 传统方式编程: 所有的函数均放在main.c里,若使用的模块比较多,则一个文件内会有很多的代码,不利于代码的组织和管理,而且很影响编程者的思路 模块化编程: 把各个模块的代码放在不同的…

【javaWeb 第七篇】后端-Spring

Spring SpringspringBoot请求简单参数实体参数数组集合参数日期参数JSON参数路径参数 响应数据分层解耦三层架构解耦操作Bean的声明Bean组件扫描问题DI详解 Spring 详细介绍结合官网查看:https://spring.io/why-spring Spring发展到今天已经形成一种开发生态圈&…

浅谈CAP原则

CAP原则,全称Consistency(一致性)、Availability(可用性)、Partition Tolerance(分区容错性)原则,是分布式系统设计中一个经典的理论。它指出在分布式系统中,任何系统都无…

基于HEC-RAS数值模拟与GIS水文分析技术的洪水危险性及风险评估实践应用

气候变化背景下,极端天气导致的洪水事件将更加频发。快速城市化对流域下垫面的改变,及人类活动向洪泛区的扩张。二者共同使得全世界多数人类活动高度聚集区的洪水风险增加。洪水淹没危险性(各种年遇型洪水淹没)是洪水损失评估、风…

UPnP是什么?有什么更好的连接方案?快解析内网穿透

一、UPnP是什么 有些小伙伴对于UPnP并不了解,其实UPnP只是一种网络协议,主要作用就是简化家庭和企业网络中设备之间的连接和通信过程,它的主要目标是实现网络的无缝连接,并简化相关网络操作。 二、UPnP有什么主要作用&#xff1…

012Node.js自定义模块文件名不是index.js引入的方法

nodejs默认会找node_modules对应模块db里的index.js //var dbrequire(db) //错误,因为nodejs默认会找node_modules对应模块db里的index.jsvar dbrequire(db); //没有错误,是因为在DB目录的CMD下执行了npm init --yes,生成了package.json文…