微信小程序页面配置

embedded/2025/3/21 2:03:29/

页面配置

小程序的配置可以配置页面路径、窗口表现、tabBar等,分为全局配置和页面配置,全局配置针对所有页面生效,页面配置只针对当前页生效。

全局配置 (app.json)

(1) 路径配置

pages 配置页面路径,未配置路径的页面无法被访问到

技巧 : 创建一个页面文件时, 在pages中添加一个配置项, 小程序开发工具自动把文件创建出来,不需要手动创建

//app.json 中
{"pages": ["pages/index/index","pages/home/home","pages/info/info",],
}

(2) 起始页配置

entryPath 配置小程序默认的启动页面(首页) 如果不填,将默认为 pages 列表的第一项

 {"entryPagePath": "pages/home/home",}

(3) window窗口配置

window 用于设置小程序的状态栏、导航条、标题、窗口背景色。

 "window": {"enablePullDownRefresh": true,//窗口配置"backgroundColor": "#eee","backgroundTextStyle": "dark",//导航栏的配置  "navigationBarBackgroundColor": "#FFA500", "navigationBarTextStyle": "white","navigationBarTitleText": "我的小程序","navigationStyle": "default"},

窗口的配置

  • backgroundColor 窗口的背景色

导航栏的配置

  • navigationBarBackgroundColor 导航栏背景颜色 (颜色是十六进制)

  • navigationBarTextStyle 导航栏标题颜色,仅支持 black / white

  • navigationBarTitleText 导航栏标题文字内容

  • navigationStyle 导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航栏

下拉刷新的配置

  • backgroundTextStyle 下拉 loading 的样式,仅支持 dark / light
  • enablePullDownRefresh 是否开启全局的下拉刷新。

(4) tabBar 配置

tabBar 底部 Tab 栏(tabBar 中的页面必须配置在 pages 中)

 "tabBar": {"color": "#999","selectedColor": "#5792AF","backgroundColor": "#e0e0e0","borderStyle": "white","position": "bottom","list": [{"pagePath": "pages/home/home","text": "我的","iconPath": "/assets/icon/home.png","selectedIconPath": "/assets/icon/home-active.png"},]},
  • color 文字颜色,仅支持十六进制颜色
  • selectedColor 文字选中时的颜色,仅支持十六进制颜色
  • backgroundColor tab 的背景色,仅支持十六进制颜色
  • borderStyle tabbar上边框的颜色 , 仅支持 black / white
  • list tabBar 页面跳转的路径图标配置
  • pagePath 跳转的页面路径
  • text tabBar 上按钮文字
  • iconPath 图片路径 icon 大小限制为 40kb,不支持网络图片。 当 position 为 top 时,不显示 icon。
  • selectedIconPath 选中时的图片路径
  • position tabBar 的位置,仅支持 bottom / top
页面配置

页面配置大部分与全局配置中的 window 是重叠的,页面配置的优先级大于全局配置的。

  • disableScroll 只能用在在页面配置中,禁用页面滚动
  • usingComponents 后续学到自定义组件时再介绍

http://www.ppmy.cn/embedded/48774.html

相关文章

【Go】使用Go语言实现AES CBC No Padding加密和解密

冷雨悄悄停吧 天真的心因为你 那管多风雨天仍和你一起 告诉你我其实多么的想你 其实我我真的爱着你 🎵 蒋明周《真的爱着你》 引言 高级加密标准(AES)是一种广泛使用的加密算法。它可以工作在多种模式下,最…

python中装饰器的用法

最近发现装饰器是一个非常有意思的东西,很高级! 允许你在不修改函数或类的源代码的情况下,为它们添加额外的功能或修改它们的行为。装饰器本质上是一个接受函数作为参数的可调用对象(通常是函数或类),并返…

Elasticsearch 认证模拟题 - 17

这两道题目非常具有代表性,分别是跨集群复制和跨集群检索,需要相应的 许可 这里在虚拟机上搭建集群完成这两道题目,这里补充一下 elasticsearch 和 kibana 的配置文件 # elasticsearch.yml cluster.name: cluster2 node.name: cluster2-node…

你不知道的HTML5应用程序缓存:深度揭秘与进阶实践

在HTML5的众多革新之中,应用程序缓存(AppCache)常常被视为一项被忽视的宝藏。尽管近年来Service Workers逐渐取代了它的位置,AppCache在特定场景下仍展现了其独特的魅力与价值。本文旨在深入挖掘HTML5应用程序缓存的隐藏功能、常见…

【内存管理之C语言数组】

1.栈空间上的C数组 糟糕的可用性,但是你将在遗留代码中见到它们 相同类型的对象的内存块 大小必须是常量表达式 第一个元素索引为0 2.指针和C数组 更奇怪的是:数组标识符退化为指向第一个元素的指针 3.访问数组 4.堆空间上的C数组 相同类型的对象的内…

PHP面试宝典之Laravel篇

引言 在现代Web开发中,PHP仍然占据着重要的位置,而Laravel作为PHP世界中最受欢迎的框架之一,以其优雅的语法、丰富的功能和良好的扩展性,赢得了众多开发者的青睐。本文将深入探讨Laravel的核心概念和实用技巧,帮助面试…

2024.6.14 作业 xyt

使用手动连接,将登录框中的取消按钮使用第二中连接方式,右击转到槽,在该槽函数中,调用关闭函数 将登录按钮使用qt4版本的连接到自定义的槽函数中,在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c…

互联网摸鱼日报(2024-06-11)

互联网摸鱼日报(2024-06-11) 36氪新闻 雅诗兰黛,胆子也太大了 苹果WWDC终极前瞻:5大看点20大AI新功能,库克不能输的一战 瑞士清洁科技公司Enerdrape开发预制地热板,回收城市地下空间的浅层地热能和废热用于建筑物制热或制冷 | …