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

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

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

文章目录

  • 【微信小程序创作之路】- 小程序窗口导航栏配置
  • 前言
  • 一、入口文件的配置
  • 二、页面配置
  • 三、全局默认窗口配置
    • 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文件调用后端接口。

在这里插入图片描述

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

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

相关文章

【UE4 C++】02-编译、生成当前的C++程序

【UE4 C++】02-编译、生成当前的C++程序

一、编译 编译快捷键： CtrlF7 如果不使用快捷键，可以点击顶部菜单栏中的下拉按钮，然后选择自定义 点击添加命令 点击“生成”，选择编译“”，点击“确定” 此时可以看到顶部菜单栏多了一个用于编译的按钮 二、生成 鼠…
阅读更多...
TypeScript学习笔记

TypeScript学习笔记

TypeScript学习笔记 1、运行环境 1.1、初始化 npm init -y npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader html-webpack-plugin1.2、webpack.config.js const path require(path) const htmlWebpackPlugin require("html-webpack-plugin&…
阅读更多...
Todo-List案例版本五

Todo-List案例版本五

安装库npm i pubsub-js 消息的订阅与发布 src/App.vue <template><div class"app"><h1>{{ msg }}</h1><School/><Student/></div> </template><script> import Student from ./components/Student import …
阅读更多...
【unity之IMGUI实践】单例模式管理数据存储【二】

【unity之IMGUI实践】单例模式管理数据存储【二】

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;uni…
阅读更多...
安卓UI：SearchView

安卓UI：SearchView

目录 一、SearchView介绍 二、常用方法 &#xff08;一&#xff09;、监听器&#xff1a; (二)、常用方法&#xff1a; (三)、其他常用方法 三、例子&#xff1a; MainActivity2 &#xff1a; ChatListAdapter &#xff1a; item_people_view: activity_main2: 运行结果…
阅读更多...
Java支付SDK接口远程调试 - 支付宝沙箱环境【公网地址调试】

Java支付SDK接口远程调试 - 支付宝沙箱环境【公网地址调试】

文章目录 1.测试环境2.本地配置3. 内网穿透3.1 下载安装cpolar内网穿透3.2 创建隧道 4. 测试公网访问5. 配置固定二级子域名5.1 保留一个二级子域名5.2 配置二级子域名 6. 使用固定二级子域名进行访问 转载自cpolar极点云文章&#xff1a;Java支付宝沙箱环境支付&#xff0c;SD…
阅读更多...
详解 ➾【FTP服务工作原理及连接模式】

详解 ➾【FTP服务工作原理及连接模式】

详解 ➾【FTP服务工作原理及连接模式】 &#x1f53b; 前言&#x1f53b; 一、FTP服务简介&#x1f6a5; 1.1 FTP工作原理&#x1f6a5; 1.2 匿名用户访问的产生&#x1f6a5; 1.3 FTP服务的连接模式&#x1f6a5; 1.4 几种流行的FTP服务器软件 &#x1f53b; 总结—温故知新 &…
阅读更多...
QTranslator语言转换

QTranslator语言转换

//appname的格式 例如通常为&#xff08;QQ为应用的名称&#xff09; QQ_en.ts或QQ_zh_CN.ts QString qmName"zh_CN"; QTranslator trans ; QString qm QString(":/translatoin/qt/appname_%1.qm").arg(qmName); auto ret trans.load(qm); Q_UNUSED(ret)…
阅读更多...
WebSocket理解

WebSocket理解

WebSocket理解 WebSocket定义与HTTP关系相同点:不同点&#xff1a;联系总体过程 HTTP问题长轮询Ajax轮询 WebSocket特点 WebSocket 定义 本质上是TCP的协议 持久化的协议 实现了浏览器和服务器的全双工通信&#xff0c;能更好的节省服务器资源和带宽 与HTTP关系 相同点: 基于…
阅读更多...
小白到运维工程师自学之路 第五十三集 （rsync+inotify备份）

小白到运维工程师自学之路 第五十三集 （rsync+inotify备份）

一、概述 Rsync是一个用于在不同计算机之间同步文件和文件夹的工具。它可以在本地计算机和远程服务器之间复制、更新和备份文件。rsync通过比较源和目标文件的差异来最小化传输的数据量&#xff0c;从而提供高效的文件同步功能。 Inotify是Linux内核提供的一种机制&#xff0…
阅读更多...
web中引入live2d的moc3模型

web中引入live2d的moc3模型

文章目录 前言下载官方sdk文件使用ide编译项目&#xff08;vsCode&#xff09;项目初始化使用vsCode项目树介绍使用live server运行index页面 演示导入自己的模型并显示modelDir文件resources文件夾案例模型修改modelDir然後重新打包項目運行 前言 先跟着官方sdk调试一遍&…
阅读更多...
【状态估计】基于卡尔曼滤波器和扩展卡尔曼滤波器用于 INS/GNSS 导航、目标跟踪和地形参考导航研究（Matlab代码实现）

【状态估计】基于卡尔曼滤波器和扩展卡尔曼滤波器用于 INS/GNSS 导航、目标跟踪和地形参考导航研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…
阅读更多...
Windows VScode如何配置与使用git？

Windows VScode如何配置与使用git？

当我们在VScode中编写代码后&#xff0c;需要提交到git仓库时&#xff0c;但是我们又不想切换到git的命令行窗口&#xff0c;我们可以在VScode中配置git&#xff0c;然后就可以很方便快捷的把代码提交到仓库中。 1. 官网下载安装Git命令行工具 根据自己的电脑系统&#xff0c…
阅读更多...
尚硅谷Docker实战教程-笔记12【高级篇，Docker-compose容器编排】

尚硅谷Docker实战教程-笔记12【高级篇，Docker-compose容器编排】

尚硅谷大数据技术-教程-学习路线-笔记汇总表【课程资料下载】视频地址&#xff1a;尚硅谷Docker实战教程&#xff08;docker教程天花板&#xff09;_哔哩哔哩_bilibili 尚硅谷Docker实战教程-笔记01【基础篇&#xff0c;Docker理念简介、官网介绍、平台入门图解、平台架构图解】…
阅读更多...
3.2.17 什么是数组及应用

3.2.17 什么是数组及应用

【分享成果&#xff0c;随喜正能量】人这一生&#xff0c;好不好都得自己走&#xff0c;累不累都得自己承受。每个人都有难言之苦&#xff0c;每个人都有无声的泪&#xff0c;岁月可曾放过谁&#xff1f;再风光的人&#xff0c;背后都有寒凉凄楚&#xff0c;再幸福的人&#xf…
阅读更多...
[每周一更]-(第54期)：Go的多版本管理工具

[每周一更]-(第54期)：Go的多版本管理工具

参考 https://zhuanlan.zhihu.com/p/611253641https://learnku.com/articles/78326 前文概要 Go语言从开始使用从1.13起步&#xff0c;随着泛型的支持&#xff0c;带领团队在转型Go的时候&#xff0c;做基础组件架构选型使用1.18&#xff0c;但是Go版本不断迭代想使用最新版本…
阅读更多...
C++类相关概念

C++类相关概念

1. 函数形参默认值 &#xff08;1&#xff09; 建议函数&#xff08;不仅仅是构造函数&#xff09;形参默认值只在函数声明中指定&#xff1b; &#xff08;函数声明和定义写在同一个文件中&#xff0c;则函数声明、定义两者之一或两者都可指定形参默认值&#xff0c;两者都指…
阅读更多...
中国移动光猫设置桥接

中国移动光猫设置桥接

网上教程五花八门&#xff0c;有些坑有些行&#xff0c;我试成功了&#xff0c;记录一下方法。 一、流程简述 1. 使用超级管理员账号登录中国移动光猫&#xff0c;设置桥接&#xff0c;并重启 2. 用网线连接路由器和光猫&#xff0c;登录路由器&#xff0c;设置宽带拨号&…
阅读更多...
数据分析——AB测试应用与实战

数据分析——AB测试应用与实战

摘要 某电商公司非常注重自己的落地页设计&#xff0c;希望通过改进设计来提高转化率。以往该公司全年转化率平均在13%左右&#xff0c;现在希望设计的新页面能够带来更高的转化率&#xff0c;希望新页面的转化率能有2%的提升&#xff0c;达到15%。在正式推出新页面之前&#…
阅读更多...
【Distributed】分布式ELK日志文件分析系统（二）

【Distributed】分布式ELK日志文件分析系统（二）

文章目录 一、FilebeatELK 部署1. 环境部署2. 在 Filebeat 节点上操作2.1 安装 Filebeat2.2 设置 filebeat 的主配置文件 3. 在 Apache 节点上操作3.1 在 Logstash 组件所在节点上新建一个 Logstash 配置文件 3. 启动3.1 在Logstash 组件所在节点启动3.2 在 Filebeat 节点 启动…
阅读更多...
最新文章

Copyright @ 2022~2023