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

news2024/11/25 14:49:23

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

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

文章目录

  • 【微信小程序创作之路】- 小程序窗口导航栏配置
  • 前言
  • 一、入口文件的配置
  • 二、页面配置
  • 三、全局默认窗口配置
    • 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.coloradmin.cn/o/753968.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

基于ChatGPT上线《你说我猜》小游戏

基于ChatGPT上线《你说我猜》小游戏

摘要 AIGC、GPT、休闲小游戏三者可以怎么结合？ AIGC、GPT与小游戏的结合为游戏体验带来了新的可能性。AIGC（Artificial Intelligence Game Content）作为一种人工智能技术，可以自动生成任务、剧情和角色对话等游戏元素&#xff0c…
阅读更多...
安卓：Fragment

安卓：Fragment

一、Fragment介绍 Fragment 是 Android 平台上的一种 UI 组件，用于构建灵活且可复用的界面模块。每个 Fragment 都有自己的生命周期，可以嵌入到 Activity 中，并在一个 Activity 内部管理其自己的布局和行为。通过使用 Fragment，可…
阅读更多...
1000多道大厂Java真题汇总。刷完这一套高质量题集，这个金九银十妥妥的

1000多道大厂Java真题汇总。刷完这一套高质量题集，这个金九银十妥妥的

又是一年金九银十！ 纵观今年的技术招聘市场，Java依旧是当仁不让的霸主！即便遭受Go等新兴语言不断冲击，依旧岿然不动。究其原因： Java有着极其成熟的生态，这个不用我多说；Java在运维、可观测性…
阅读更多...
el-table实现动态表头，自定义斑马纹等功能

el-table实现动态表头，自定义斑马纹等功能

需求：1.根据选择的日期时间，实现表头的动态显示功能 2.修改默认表头灰色样式， 3.斑马纹偶数灰色改为奇数为灰色 4.表格某一行加分割线区分 1.效果 2.动态表格实现 1.height：表格的高度设置，内容超出后会显示滚动条&a…
阅读更多...
类和对象（二）

类和对象（二）

目录 一、类的六个默认成员函数 二、构造函数 2.1 概念 2.2 特性 三、析构函数 3.1 概念 3.2 特性 四、拷贝构造函数 4.1 概念 4.2 特性 五、赋值运算符重载 5.1 运算符重载 5.2 赋值运算符重载特性 六、const修饰成员函数 七、取地址及const取地址操作符重载 一…
阅读更多...
Html基础知识学习——css精灵(十五)

Html基础知识学习——css精灵(十五)

这里写自定义目录标题 定义示例一示例二 定义 将网页用到的图片放在一张图片上&#xff0c;进行定位展示 优点:防止网页http请求次数过多&#xff0c;从而提高页面性能 缺点&#xff1a;降低开发效率。维护难度加大 示例一 使用图 网页制作图 <!DOCTYPE html> <…
阅读更多...
如何能够极速浏览大体积tif影像文件？

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

在无人机航拍的高清正射影像中&#xff0c;大体积文件是普遍现象&#xff0c;几十GB的TIFF文件很常见。常规的浏览方式特别容易导致卡顿&#xff0c;用户需要花费半天时间等待影像图的呈现。 建议您尝试将tiff格式快速转换为mbtiles或lrp格式&#xff0c;mbtiles和lrp格式专门…
阅读更多...
JSP+MySql实战

JSP+MySql实战

0目录 JSPMySql实战 创建maven工程和包 创建2张表 User表 Employee表 实体类封装 Util 包BaseDao类 Dao包 EmployeeDao类 UserDao类 实现接口方法 Dao包新建impl包 UserDaoImp EmployeeDaoImpl 新建Service包 接口方法 UserService EmployeeSe…
阅读更多...
【分布式任务调度】XXL-JOB的任务调度实现原理（四）

【分布式任务调度】XXL-JOB的任务调度实现原理（四）

文章目录 1.前言2.调度中心流程2.1.任务配置扫描流程2.2.计算任务触发时机2.2.1.已超时5秒以上2.2.2.超时未超过5秒2.2.3.还未到触发时间 2.3.任务触发流程2.3.1.任务触发线程池2.3.2.参数处理2.3.3.任务触发2.3.4.分片广播策略&#xff08;补充&#xff09; 3.执行器流程3.1.任…
阅读更多...
笔记本安装Centos Stream9系统的详细安装教程

笔记本安装Centos Stream9系统的详细安装教程

U盘刻录工具&#xff1a; Index of /downloadshttp://rufus.ie/downloads/
阅读更多...
库迪身陷“价格”囹圄，融资苦难户还有突围的希望吗？

库迪身陷“价格”囹圄，融资苦难户还有突围的希望吗？

作者 | 心怡 来源 | 洞见新研社 三伏天已至&#xff0c;正是咖啡品牌借冰咖笑傲市场的好时机。没想到的是&#xff0c;靠低价狂奔的库迪却率先传出涨价的消息。 消息称&#xff0c;7月起&#xff0c;库迪划线价格上调1-2元&#xff0c;8.8元的团购价涨到9.9元&#xff0c;热门…
阅读更多...
如何使用vb上位机串口通信

如何使用vb上位机串口通信

今天我来分享一下如何使用vb上位机串口通信。首先&#xff0c;我们需要准备一台具有串口的上位机设备和一台计算机。刚好&#xff0c;我这里有上位机入门&#xff0c;学习线路图&#xff0c;各种项目&#xff0c;需要留个6。接下来&#xff0c;我们需要安装相应的控件和程序包。…
阅读更多...
【PHP面试题44】PHP5的版本和PHP7之间有哪些区别

【PHP面试题44】PHP5的版本和PHP7之间有哪些区别

文章目录 一、前言二、底层调整2.1性能提升2.2 新的引擎2.3 数据类型改进2.4 错误处理改进2.5 语言特性增加 三、应用层差异3.1 兼容性3.2 类和方法改进3.3 错误处理机制3.4 性能优化3.5 新的扩展支持 四、一些语法糖示例4.1 标量类型声明示例4.2 新增了Spaceship操作符&#x…
阅读更多...
新字符设备驱动实验

新字符设备驱动实验

目录&#xff1a; 1. 新字符设备驱动原理1.1. 分配和释放设备号1.2. 添加字符设备 2.自动创建设备节点2.1. mdev机制2.2. 创建和删除类2.3. 创建设备2.4. 新字符设备驱动框架总结 3. 文件结构体和文件私有数据4. 实验程序编写4.1. 驱动程序4.2. 应用程序 5. 运行测试 1. 新字符…
阅读更多...
RabbitMQ 同样的操作一次成功一次失败

RabbitMQ 同样的操作一次成功一次失败

RabbitMQ 是一个功能强大的消息队列系统&#xff0c;广泛应用于分布式系统中。然而&#xff0c;我遇到这样的情况&#xff1a;执行同样的操作&#xff0c;一次成功&#xff0c;一次失败。在本篇博文中&#xff0c;我将探讨这个问题的原因&#xff0c;并提供解决方法。 我是在表…
阅读更多...
DatenLord前沿技术分享 No.30

DatenLord前沿技术分享 No.30

达坦科技专注于打造新一代开源跨云存储平台DatenLord&#xff0c;通过软硬件深度融合的方式打通云云壁垒&#xff0c;致力于解决多云架构、多数据中心场景下异构存储、数据统一管理需求等问题&#xff0c;以满足不同行业客户对海量数据跨云、跨数据中心高性能访问的需求。在本周…
阅读更多...
【雕爷学编程】Arduino动手做（161）---16路PWM舵机驱动板2

【雕爷学编程】Arduino动手做（161）---16路PWM舵机驱动板2

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…
阅读更多...
windows搭建git服务器 无法识别 ‘git‘ 命令：exec: “git“: executable file not found in %PATH%

windows搭建git服务器 无法识别 ‘git‘ 命令：exec: “git“: executable file not found in %PATH%

无法识别 git 命令&#xff1a;exec: "git": executable file not found in %PATH% 确保已经安装git&#xff0c;如下图配置环境变量即可。
阅读更多...
ylb-接口7注册发送短信

ylb-接口7注册发送短信

总览&#xff1a; 在common模块下引入短信验证码的依赖项&#xff08;生成4位随机数&#xff09;&#xff1a; 在web模块下的resources/application.yml&#xff0c;添加配置信息&#xff08;京东万象&#xff09;&#xff1a; #短信配置 jdwx:sms:url: https://way.jd.com…
阅读更多...
在 3ds Max 中使用Mental Ray渲染 wip 图像

在 3ds Max 中使用Mental Ray渲染 wip 图像

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 本教程面向初学者&#xff0c;每个步骤都详细概述和显示。如果您是 3D Studio MAX 的新手&#xff0c;您可能想先尝试我们的其他一些教程。 使用默认的 3D Studio MAX 渲染器创建粘土渲染 步骤 1 在 3D S…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023