【微信小程序创作之路】- 小程序窗口整体配置（导航栏、标题）

【微信小程序创作之路】- 小程序窗口导航栏配置

第五章 微信小程序窗口导航栏配置

文章目录

  • 【微信小程序创作之路】- 小程序窗口导航栏配置
  • 前言
  • 一、入口文件的配置
  • 二、页面配置
  • 三、全局默认窗口配置
    • 1.navigationBarTitleText：导航栏标题文字
    • 2.navigationBarBackgroundColor：导航栏背景颜色
    • 3.navigationBarTextStyle：导航栏标题颜色，仅支持 black / white
    • 4.enablePullDownRefresh：是否开启全局的下拉刷新
    • 5.backgroundColor ：下拉刷新窗口的背景色
    • 6.backgroundTextStyle：设置下拉刷新样式
    • 7.navigationStyle：导航栏样式
    • 8.onReachBottomDistance：上拉触底
  • 四、底部tab栏配置
    • 1.tabBar 的 6 个组成部分
    • 2.tabBar和每个tab项的属性配置
    • 3.代码示例
  • 总结

前言

本章主要介绍小程序窗口导航栏、窗口下拉、窗口上拉、标题等设置。

一、入口文件的配置

微信小程序通过app.json文件中的entryPagePath对象来指定小程序的首页。常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。
🧀我们通过代码来演示
🏀🏀🏀设置pages 中第二个页面路径为首页

app.json

{"entryPagePath": "pages/index/index"
}

在这里插入图片描述

二、页面配置

微信小程序通过app.json文件中的Pages对象来指定小程序的所有页面。该对象是一个数组，数组的每一项就是一个页面。如代码示例中有一个index页面，数组的第一项就代表是小程序第一个页面。

🧀我们通过代码来演示
🏀🏀🏀新建小程序页面
只需要在 pages 中新增页面的存放路径，小程序开发者工具即可帮我们自动创建对应的页面文件
在这里插入图片描述
添加一个home页面

"pages": ["pages/index/index","pages/home/home"],

在这里插入图片描述
🍉🍉🍉切换页面快捷键
按住 ALT键 + 箭头上下键，即可将该代码上下移动。

三、全局默认窗口配置

微信小程序通过app.json文件来配置窗口页面设置。window对象设置窗口外观，它有很多属性。

属性类型默认值必填说明
navigationBarTitleTextString字符串否导航栏的文字
navigationBarBackgroundColorHexColor#000000否导航栏背景颜色，默认为#fff（白色）
navigationBarTextStyleStringwhite否导航栏标题颜色，仅支持 black / white，默认为white
backgroundColorHexColor#ffffff否窗口的背景色
backgroundTextStyleStringdark否下拉 loading 的样式，仅支持 dark / light
enablePullDownRefreshBooleanfalse否是否全局开启下拉刷新
onReachBottomDistanceNumber50否页面上拉触底事件触发时距页面底部距离，单位为px
navigationStyleStringdefault否导航栏样式，仅支持 default / custom

这里引用小白白大佬文章的图片来说一下小程序窗口的组成部分。
🍉🍉🍉小程序窗口的组成部分
在这里插入图片描述

1.navigationBarTitleText：导航栏标题文字

🧀我们通过代码来演示
🏀🏀🏀修改导航栏标题文字为“第一个小程序”

"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#ff1111","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "black","enablePullDownRefresh": true},

在这里插入图片描述

2.navigationBarBackgroundColor：导航栏背景颜色

🧀我们通过代码来演示
🏀🏀🏀修改导航栏背景颜色为黑色

"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#333","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "black","enablePullDownRefresh": true},

在这里插入图片描述

3.navigationBarTextStyle：导航栏标题颜色，仅支持 black / white

🧀我们通过代码来演示
🏀🏀🏀修改导航栏标题颜色为白色

"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#333","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "white","enablePullDownRefresh": true},

在这里插入图片描述

4.enablePullDownRefresh：是否开启全局的下拉刷新

🧀我们通过代码来演示
🏀🏀🏀开启小程序下拉选项

"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#333","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "white","enablePullDownRefresh": true},

在这里插入图片描述

5.backgroundColor ：下拉刷新窗口的背景色

🧀我们通过代码来演示
🏀🏀🏀开启全局下拉刷新功能后，默认的窗口的背景颜色为白色，我们把下拉背景颜色改为#efefef 

    "window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#333","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "white","backgroundColor":"#efefef","enablePullDownRefresh": true},

在这里插入图片描述

6.backgroundTextStyle：设置下拉刷新样式

🧀我们通过代码来演示
🍉🍉🍉backgroundTextStyle 的可选值只有 light 和 dark
🏀🏀🏀 dark

   "window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#333","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "white","backgroundColor":"#efefef","enablePullDownRefresh": true},

在这里插入图片描述

🏀🏀🏀 light

"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#333","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "white","backgroundColor":"#efefef","enablePullDownRefresh": true},

在这里插入图片描述

7.navigationStyle：导航栏样式

🧀我们通过代码来演示
🍉🍉🍉backgroundTextStyle 的可选值只有 default 默认样式和 custom 自定义导航栏，只保留右上角胶囊按钮
🏀🏀🏀 default 

   "window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#333","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "white","backgroundColor":"#efefef","navigationStyle":"default","enablePullDownRefresh": true},

在这里插入图片描述
🏀🏀🏀 custom

   "window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#333","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "white","backgroundColor":"#efefef","navigationStyle":"custom","enablePullDownRefresh": true},

在这里插入图片描述

8.onReachBottomDistance：上拉触底

🧀我们通过代码来演示
🍉🍉🍉上拉触底 是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而 加载更多数据 的行为。 默认距离为50px ，如果没有特殊需求，建议使用默认值即可。
🏀🏀🏀 设置上拉触底距离为80px

 "window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#333","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "white","backgroundColor":"#efefef","navigationStyle":"default","onReachBottomDistance":80,"enablePullDownRefresh": true},

在这里插入图片描述

四、底部tab栏配置

如果小程序是一个多 tab 应用，可以通过tabBar 配置项指定 tab 栏，以及 tab 切换时显示的对应页面，即：实现小程序多页面的快速切换。
🍉🍉🍉小程序通常分为：

  • 底部tabBar
  • 顶部tabBar

注意：

  • tabBar 只能配置 最少2个和 最多2个tab页签
  • 当渲染顶部 tabBar 时，不显示 icon（图标），只显示文本

1.tabBar 的 6 个组成部分

这里引用小白白大佬博客的图片
在这里插入图片描述

2.tabBar和每个tab项的属性配置

🍉🍉🍉 tabBar 节点属性配置

属性类型默认值必填说明
positionString否bottomtabBar 的位置，仅支持 bottom / top
borderStyleString否blacktabBar上边框的颜色，仅支持 black / white
colorHexColor否tab上文字的默认（未选中）颜色，仅支持十六进制颜色
selectedColorHexColor否tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColorHexColor否tab 的背景色，仅支持十六进制颜色
listArray是tab 页签的列表，最少 2 个、最多 5 个 tab
customboolean否false自定义tabBar

🍉🍉🍉 每个tab项的属性配置

属性类型默认值必填说明
pagePathString是页面路径，必须在 pages 中预先定义
textString是tab 上按钮文字
iconPathString否图片路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片；当 postion 为 top 时，不显示 icon
selectedIconPathString否选中时的图标路径，icon大小限制为40kb，建议尺寸为81px*81px，不支持网络图片；当 postion 为 top 时，不显示 icon

3.代码示例

🧀我们通过代码来演示
🏀🏀🏀 实现通过配置tabBar选项来切换不同页面
图片素材：
请添加图片描述请添加图片描述请添加图片描述请添加图片描述请添加图片描述请添加图片描述
我们把图片名称改为页面名称，选中的图片加-selected。

在这里插入图片描述
把图片的文件夹拷贝到小程序项目的根目录。
在这里插入图片描述

app.json

{"entryPagePath": "pages/index/index","pages": ["pages/index/index","pages/home/home","pages/contact/contact"],"window": {"backgroundTextStyle": "dark","navigationBarBackgroundColor": "#333","navigationBarTitleText": "第一个小程序","navigationBarTextStyle": "white","backgroundColor":"#efefef","navigationStyle":"default","onReachBottomDistance":80,"enablePullDownRefresh": true},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath":"image/index.png","selectedIconPath": "image/index-selected.png"},{"pagePath": "pages/home/home","text": "家庭","iconPath":"image/home.png","selectedIconPath": "image/home-selected.png"},{"pagePath": "pages/contact/contact","text": "联系我们","iconPath":"image/contact.png","selectedIconPath": "image/contact-selected.png"}]},"style": "v2","sitemapLocation": "sitemap.json"
}

主页
在这里插入图片描述
家庭页
在这里插入图片描述
联系我们
在这里插入图片描述

总结

以上就是今天要讲的内容，本文简单介绍了全局app.json文件中入口文件的配置entryPagePath、页面配置Pages、全局默认窗口配置window和底部tab栏配置tabBar 使用，下一章我们将讲解小程序JS文件调用后端接口。

在这里插入图片描述

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

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

相关文章

Unity 限制范围-限制在4分之一圆柱形范围内活动

Unity 限制范围-限制在4分之一圆柱形范围内活动

在我的游戏中，玩家的两只手操控中，不想让他们的手围着自己在一个圆形范围内随便乱跑，左手只想让他在左上角，右手在右上角范围活动。所以我制作这样一个算法来实现。 首先用Dot函数划分出4个区域，然后根据区域计算修正…
阅读更多...
分配操作菜单

分配操作菜单

目录 概述介绍数据库后端前端效果展示 概述 在写后台管理系统时, 我们可以根据不同的登录人,给予不同的功能菜单 如 :给楼栋管理员登录时分配(楼栋管理,宿舍管理) 所以在数据库就要创建: 1.登录人与角色表, 2再给角色表分配操作菜单 登录时查询对应的操作菜单,将数据响应给前端…
阅读更多...
记一次rabbitmq消息发送成功，消费丢失问题

记一次rabbitmq消息发送成功，消费丢失问题

记一次rabbitmq消息发送成功，消费丢失问题 背景 测试数据归档，偶现数据未归档 排查 idea线上调试，log日志，数据库消息发送记录，代码分块重复执行看哪块出的问题，结果均无问题，最后使用rabbi…
阅读更多...
如何能够极速浏览大体积tif影像文件？

如何能够极速浏览大体积tif影像文件？

在无人机航拍的高清正射影像中，大体积文件是普遍现象，几十GB的TIFF文件很常见。常规的浏览方式特别容易导致卡顿，用户需要花费半天时间等待影像图的呈现。 建议您尝试将tiff格式快速转换为mbtiles或lrp格式，mbtiles和lrp格式专门…
阅读更多...
UE编辑器灯光颜色，能量传入Shader流程

UE编辑器灯光颜色，能量传入Shader流程

编辑器界面： 代码流程： FLinearColor ULightComponent::GetColoredLightBrightness() const {// Brightness in Lumensfloat LightBrightness ComputeLightBrightness();FLinearColor Energy FLinearColor(LightColor) * LightBrightness;if (bUseTem…
阅读更多...
如何在Windows 8和10中检查最后一次的启动模式

如何在Windows 8和10中检查最后一次的启动模式

Windows 8、Windows 8.1 和 Windows 10 中的用户可以在 PC 上执行混合关机（快速启动）、完全关机或休眠。 快速启动（又名：hiberboot、混合启动或混合关机）在 Windows 中默认打开，是一种帮助你的电脑在关机后更快启动的设置。甚至比休眠还要快。 休眠是一种主要为笔记本电…
阅读更多...
推荐五款优秀，可替代商业软件的开源软件

推荐五款优秀，可替代商业软件的开源软件

​ 在日常的使用中，我们需要使用各种软件来提高我们的工作效率或者进行创意的表达。然而，商业软件价格昂贵，某些国产软件又充斥着广告。因此，开源软件成为了一个不错的选择，以下是我推荐的五款优秀的开源软件。 图片浏…
阅读更多...
nginx配置IP白名单

nginx配置IP白名单

1、添加IP白名单文件 在nginx目录的 conf 中添加文件 ip.conf，注意白名单文件不用添加任何注释，可以有空行 vi ip.conf 192.168.3.11 1;192.168.3.10 1; 192.168.0.112 1;2、配置nginx.conf 编辑http节点： http {# ...# geo IP whitelist…
阅读更多...
macOS 14 Sonama - 小记

macOS 14 Sonama - 小记

文章目录 Sonoma 官方资讯关于 Sonama 命名关于 壁纸Sonoma 官方资讯 macOS Sonoma Preview https://www.apple.com/hk/en/macos/sonoma-preview/官方视频介绍 Apple Events --> Watch the Keynote --> 00:43:13 (约14min) https://www.apple.com/hk/en/apple-events/mac…
阅读更多...
数据库基本操作--------MySQL事务

数据库基本操作--------MySQL事务

目录 一、MySQL事务的概念 二、事务的ACID特点 1、原子性 2、一致性 3、隔离性 4、持久性 三、事务之间的相互影响 四、MySQL及事务隔离级别 1、查询全局事务隔离级别 2、查询会话事务隔离级别 3、设置全局事务隔离级别 4、设置会话事务隔离级别 五、事务控制语句 1、测…
阅读更多...
CentOS环境下的Nginx安装

CentOS环境下的Nginx安装

Nginx 安装 下载 nginx 下载地址：http://nginx.org/en/download.html 将下载好的压缩包拷贝到根目录下 通过xshell如果出现 bash: rz: 未找到命令 ，需要先运行下面的命令 yum -y install lrzsz安装 解压到当前目录 tar -zxvf nginx-1.22.1.tar.gz安…
阅读更多...
太阳能供电户外视频远程监控4G无线物联网工业路由器ZR3000

太阳能供电户外视频远程监控4G无线物联网工业路由器ZR3000

太阳能供电技术常被应用于环保节能的项目中，太阳能具备节能环保、寿命长、性能稳定、维护成本低等特点，被各行各业采纳使用。大多数太阳能应用于户外，存在监控点距离较远、取电困难、宽带光纤布线成本高、环境恶劣等问题，现场还有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023