小程序入门学习(四)之全局配置

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

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

pages:记录当前小程序所有页面的存放路径

window:全局设置小程序窗口的外观

tabBar:设置小程序底部的 tabBar 效果

style:是否启用新版的组件样式

二、window

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

2、window 节点常用的配置项

3. 设置导航栏的标题

设置步骤:app.json -> window -> navigationBarTitleText

4. 设置导航栏的背景色

设置步骤:app.json -> window -> navigationBarBackgroundColor

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

设置步骤:app.json -> window -> navigationBarTextStyle

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

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

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

注意:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!

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

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

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

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

9. 设置上拉触底的距离

设置步骤: app.json -> window -> 为 onReachBottomDistance 设置新的数值。

注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。

三、tabBar

1. 什么是 tabBar

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

  • 底部 tabBar
  • 顶部 tabBar

注意:

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

2. tabBar 的 6 个组成部分

  • backgroundColor:tabBar 的背景色
  • selectedIconPath:选中时的图片路径
  • borderStyle:tabBar 上边框的颜色
  • iconPath:未选中时的图片路径
  • selectedColor:tab 上的文字选中时的颜色
  • color:tab 上文字的默认(未选中)颜色

3. tabBar 节点的配置项

属性类型必填默认值描述
positionStringbottomtabBar 的位置,仅支持 bottom/top
borderStyleStringblacktabBar 上边框的颜色,仅支持 black/white
colorHexColortab 上文字的默认(未选中)颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortabBar 的背景色
listArraytab 页签的列表, 最少 2 个、最多 5 个 tab

4. 每个 tab 项的配置选项

"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"}]
},

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Web】AlpacaHack Round 7 (Web) 题解

Treasure Hunt flag在md5值拼接flagtxt的文件里,如 d/4/1/d/8/c/d/9/8/f/0/0/b/2/0/4/e/9/8/0/0/9/9/8/e/c/f/8/4/2/7/e/f/l/a/g/t/x/t 访问已经存在的目录状态码是301 访问不存在的目录状态码是404 基于此差异可以写爆破脚本 这段waf可以用url编码绕过 做个lab …

android studio 读写文件操作(应用场景三)

android studio版本:2023.3.1 patch2 例程:filesaveandread 其实我写这个都是我记录我要做后个数独小游戏,每一个都是为了解决一个问题。即是分享也是备忘,反正我什么都不会,就是一顿瞎改,不行就研究。这…

c++:timer

1.设置休眠时间sleep_for 添加头文件 #include <thread> #include <iostream> #include <chrono> #include <thread>int main(int argc, char const *argv[]) {// 休眠2秒std::this_thread::sleep_for(std::chrono::seconds(2));// 休眠500毫秒std:…

【开源】A064—基于JAVA的民族婚纱预定系统的设计与实现

&#x1f64a;作者简介&#xff1a;在校研究生&#xff0c;拥有计算机专业的研究生开发团队&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的网站项目。 代码可以查看项目链接获取⬇️&#xff0c;记得注明来意哦~&#x1f339; 赠送计算机毕业设计600个选题ex…

嵌入式学习(17)-stm32F407串口使用注意事项

一、概述 配置串口时串口的接收一直不好使&#xff0c;对比例程发现了问题&#xff1a; 在网上也找了一些资料供参考“STM32F4的串口RX引脚不能被设置为输入是因为串口的接收&#xff08;RX&#xff09;功能是由硬件电路实现的&#xff0c;无法通过软件配置来控制。串口接收功…

如何在UI自动化测试中创建稳定的定位器?

如何在UI自动化测试中创建稳定的定位器&#xff1f; 前言1. 避免使用绝对路径2. 避免在定位器中使用索引3. 避免多个类名的定位器4. 避免动态和自动生成的ID5. 确保定位器唯一6. 处理隐藏元素的策略7. 谨慎使用基于文本的定位器8. 使用AI创建稳定的定位器 总结 前言 在自动化测…

在做题中学习(77):快排

解法&#xff1a;快排 思路&#xff1a; 1.快排排一趟&#xff0c;递归分出来的左区间和右区间&#xff08;一趟的思想&#xff0c;看我的前一个文章&#xff1a;颜色分类题解&#xff09; 2.递归&#xff1a;想清楚 函数头 和 返回条件怎么写 函数头&#xff1a;把递归想成…

数学拯救世界(二)——— 学艺

一、 然而&#xff0c;袁qy大臣又犯难了&#xff0c;他在想&#xff0c;如何把分数与国人知道的小数或者整数联系在一起呢&#xff1f;如果直接告诉国王分数是自己是造出来的&#xff0c;那么可能会导致国王发怒。 “可恶而又死板的暴君&#xff0c;不愿意接受任何新东西”&…

【RK3562J开发笔记】MCP2518FD外部CAN-FD控制器的调试方法

“SPI转CAN-FD”是嵌入式开发领域的常用方法&#xff0c;它极大地促进了不同通信接口之间的无缝连接&#xff0c;并显著降低了系统设计的复杂性。飞凌嵌入式依托瑞芯微RK3562J处理器打造的OK3562J-C开发板因为内置了SPI转CAN-FD驱动&#xff0c;从而原生支持这一功能。该开发板…

Next.js系统性教学:服务器操作与数据变更

更多有关Next.js教程&#xff0c;请查阅&#xff1a; 【目录】Next.js 独立开发系列教程-CSDN博客 目录 1. 什么是服务器操作和数据变更&#xff1f; 1.1 服务器操作 (Server Actions) 1.2 数据变更 (Mutations) 2. Next.js中的服务器操作与数据变更 2.1 引入&#xff1a…

Appium 安装问题汇总

好生气好生气&#xff0c;装了几天了&#xff0c; opencv4nodejs 和 mjpeg-consumer 就是装不了&#xff0c;气死我了不管了&#xff0c;等后面会装的时候再来完善&#xff0c;气死了气死了。 目录 前言 1、apkanalyzer.bat 2、opencv4nodejs 3、ffmpeg 4、mjpeg-consume…

MCU、ARM体系结构,单片机基础,单片机操作

计算机基础 计算机的组成 输入设备、输出设备、存储器、运算器、控制器 输入设备&#xff1a;将其他信号转换为计算机可以识别的信号&#xff08;电信号&#xff09;。输出设备&#xff1a;将电信号&#xff08;&#xff10;、&#xff11;&#xff09;转为人或其他设备能理解的…

ArrayList常见操作源码逐句剖析

目录 前言 正文 1.需要了解的一些字段属性 1.存储 ArrayList 元素的数组缓冲区。 2.集合的大小 3.默认集合容量大小 2.ArrayList对象创建 1.无参构造 2.有参构造1 3.有参构造2 3.添加元素add(E e)以及扩容机制 ​编辑 4.添加元素add&#xff08;int index,E element…

【Linux从青铜到王者】数据链路层(mac,arp)以及ip分片

局域网通信 通过之前的学习&#xff0c;我们了解了应用层&#xff0c;传输层&#xff0c;网络层的协议和作用&#xff0c;这里先做个总结 应用层——http&#xff0c;https协议&#xff0c;也可以自己定义一套&#xff0c;作用是进行数据的处理传输层——tcp&#xff0c;udp协…

Linux絮絮叨(三) Ubuntu桌面版添加中文拼音输入法

步骤很详细&#xff0c;直接上教程 一. 配置安装简体拼音输入法 #安装相应的平台支持包 sudo apt install ibus-gtk ibus-gtk3# 安装简体拼音输入法 sudo apt install ibus-pinyin安装完成如果下面的步骤找不到对应输入法可以重启一下&#xff0c;一般不需要 二. 添加简体拼音…

Springboot 2.7+解决跨域问题,到底是在SpringBoot中添加拦截器还是修改Nginx配置

文章目录 1摘要2 核心代码2.1 SpringBoot 全局跨域拦截器2.2 Nginx 配置跨域处理2.3 Nginx 和 SpringBoot 同时添加允许跨域处理会怎么样&#xff1f; 3 推荐参考资料 1摘要 跨域问题报错信息: Referrer Policy:strict-origin-when-cross-origin跨域问题是在前后端分离的情况…

Ubuntu Server 22.04.5 LTS重启后IP被重置问题

Ubuntu Server 22.04.5 LTS重启后IP被重置问题 最近在使用Ubuntu Server 22.04做项目开发测试时发现每次重启和关机后&#xff0c;所设置的静态IP地址都会回复到安装系统时所设置的ip Ubuntu Server 22.04 官网下载地址&#xff1a;Ubuntu官方下载地址 对虚拟机下安装Ubuntu感…

052-linux安装MySQL数据库-保姆级

linux安装MySQL数据库 1.mysql数据库安装1.1.安装环境1.2.安装部署 2.mysql数据库主备实现2.1.主备配置2.1.1.前置环境准备2.1.2.master数据库服务器配置2.1.3.slave数据库服务器配置 2.2.主备故障切换 3.mysql数据库主主实现 1.mysql数据库安装 1.1.安装环境 操作系统版本&a…

棋牌游戏项目ctrl + c无法退出进程问题

棋牌游戏项目ctrl c无法退出进程问题 运行的服务为 user , 启动命令为 cd user && go run main.go启动之前先加入调试语句 在 go func() { metric.Serve(...) } 打日志在 app.Run(...) 打日志 user/main.go var configFile flag.String("config", "…

GAMES101 完结篇(笔记和作业)

写在前面 我已经把笔记和作业代码放在了GitHub上&#xff0c;欢迎访问GAMES101笔记及作业 (github.com)&#xff0c;如果对你有帮助&#xff0c;欢迎fork or star 下面我想简单介绍一下这里面的东西 Homework Homework文件夹里有0~8的作业框架&#xff0c;参考的其他大佬的代…