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

news/2024/4/29 1:30:36/文章来源:https://blog.csdn.net/ProGram_Java521/article/details/131675995

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

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

文章目录

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

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

相关文章

​​Layui之用户管理实例（对数据的增删改查）

​​Layui之用户管理实例（对数据的增删改查）

目录 ​编辑一、R工具介绍（） ​编辑二、数据表的增删改查 ​编辑2.1我们先得从查询数据库的语句入手 2.2优化dao类 2.4UserAction类 2.5前台的页面实现增删改查操作 2.6 userManage页面JS 2.7user新增、修改iframe层js 前言 上一篇我分享了…
阅读更多...
SpringCloudAlibaba:消息驱动之RocketMQ学习

SpringCloudAlibaba:消息驱动之RocketMQ学习

目录 一、MQ简介 （一）什么是MQ （二）MQ的应用场景 1、异步解耦 2、流量削峰 （三）常见的MQ产品 二、RocketMQ入门 （一）RocketMQ安装部署 1、环境要求 2、下载RocketMQ 3、安…
阅读更多...
nginx的前端集成

nginx的前端集成

对于springcloud项目，后端我们有很多的微服务，当然前端我们也可以有很多的小项目进行集成 前端项目部署思路 通过nginx来进行配置，功能如下 通过nginx的反向代理功能访问后台的网关资源 通过nginx的静态服务器功能访问前端静态页面 配置ng…
阅读更多...
CSS3绘制3D银行卡片层叠展示特效

CSS3绘制3D银行卡片层叠展示特效

使用纯css3绘制3D银行卡层叠展示特效 具体示例如下 <template><div><div class"tariffCards"><div class"economy"><img src"../images/css-article-imgs/example-css3D-card/tarcs.png" alt"中信银行" he…
阅读更多...
图腾柱电路

图腾柱电路

驱动MOS或者IGBT管&#xff0c;需要比较大的驱动电流或者灌电流 使用图腾柱电路或许是一个好的办法 电流路径是这样的 当CTL1端口输出为高电平的时候 三极管Q2的2脚为高&#xff0c;三极管Q2不导通 三极管Q1的2脚为高&#xff0c;三极管导通 所以Q1的3脚和1脚导通 VCC--…
阅读更多...
Linux线程的生产者消费者模型 --- 阻塞队列(blockqueue)

Linux线程的生产者消费者模型 --- 阻塞队列(blockqueue)

文章目录 线程同步条件变量条件变量的接口 生产者消费者场景消费者和消费者的关系生产者和生产者的关系生产者和消费者的关系从何体现出效率的提高 Blockqueueblockqueue.hpp为什么条件变量的接口有锁作为参数 CP.cc生产者 -> queue -> 消费者兼生产者 -> queue ->…
阅读更多...
【HarmonyOS】Stage模型二维码/条码生成与解析

【HarmonyOS】Stage模型二维码/条码生成与解析

HarmonyOS的官方API中提供了QRCode组件&#xff08;QRCode-基础组件-组件参考&#xff08;基于ArkTS的声明式开发范式&#xff09;-ArkTS API参考-HarmonyOS应用开发&#xff09;&#xff0c;这个组件有个缺点只能用于显示二维码&#xff0c;无法显示条码与解析码内容&#xff…
阅读更多...
【已解决】Flask项目报错TypeError: tuple indices must be integers or slices, not str

【已解决】Flask项目报错TypeError: tuple indices must be integers or slices, not str

文章目录 问题情境报错及分析报错代码分析 解决方案必要的解决方法可能有用的解决方法 问题情境 本解决方案适用情境&#xff1a;在本地可以正常运行的flask项目&#xff0c;放到云服务器报错TypeError: tuple indices must be integers or slices, not str&#xff0c;即代码…
阅读更多...
《深度学习推荐系统》笔记

《深度学习推荐系统》笔记

目录 一、推荐系统是什么1.作用和意义2.推荐系统的架构2.1 逻辑架构2.2 技术架构 二、传统的推荐系统方法1. 协同过滤算法1.1 userCF&&ItemCF1.3 矩阵分解算法 2. 逻辑回归算法3. 因子分解机3.1 POLY2模型3.2 FM模型3.3 FFM模型3.4 小结 4. 组合模型4.1 GBDTLR组合模型…
阅读更多...
【C++/嵌入式笔试面试八股】二、24.TCP三次握手四次挥手 | TCP可靠性

【C++/嵌入式笔试面试八股】二、24.TCP三次握手四次挥手 | TCP可靠性

TCP三次握手四次挥手 64.TCP头部中有哪些信息？❤️ TCP数据报格式（左图） UDP数据报格式也放这（右图），不具体解释了。 结合三次握手四次挥手来看 端口： 区分应用层的不同应用进程 扩展：应用程序的端口号和应用程序所在主机的 IP 地址统称为 socket（套接字），IP:端口…
阅读更多...
Docker安装ElasticSearch/ES

Docker安装ElasticSearch/ES

目录 前言准备拉取ElasticSearch镜像安装ElasticSearch拉取elasticsearch-head镜像安装elasticsearch-head参考 前言 TencentOS Server 3.1Docker version 19.03.14, build 5eb3275d40 准备 docker 已安装。 安装 docker 参考&#xff1a;【Centos 8】【Centos 7】安装 docke…
阅读更多...
基于STM32 ARM+FPGA伺服控制系统总体设计方案(一）

基于STM32 ARM+FPGA伺服控制系统总体设计方案(一）

设计需求 一套完整的伺服控制方案包括了上位机、驱控一体控制器和功率板三者。操作人员 通过上位机发送各种不同指令&#xff0c;然后控制器解析指令后执行相应的伺服功能&#xff0c;其次控 制器将驱动信号传输至功率板驱动电机&#xff0c;最后控制器采集反馈信息进行闭环…
阅读更多...
了解PostgreSQL sql shell和VACUUM命令

了解PostgreSQL sql shell和VACUUM命令

从SQL Shell进入PostgreSQL&#xff1b;没用过这东西&#xff0c;看一下&#xff1b; 一直回车&#xff1b;最后输入口令就登入了&#xff1b;此时是登入默认的数据库postgres&#xff1b;这个数据库是默认安装的&#xff1b; 看一下有没有表&#xff0c;根据资料可以用 \d 或…
阅读更多...
大坝安全监测中需要做好检查监测

大坝安全监测中需要做好检查监测

大坝安全监测是人们了解大坝运行状态和安全状况的有效手段和方法。它的目的主要是了解大坝安全状况及其发展态势&#xff0c;是一个包括由获取各种环境、水文、结构、安全信息到经过识别、计算、判断等步骤&#xff0c;最终给出一个大坝安全 程度的全过程。 此过程包括&#xf…
阅读更多...
Linux中常用的监控性能的命令（sar、mpstat,vmstat, iostat,）详解

Linux中常用的监控性能的命令（sar、mpstat,vmstat, iostat,）详解

Linux中常用的监控性能的命令有&#xff1a; sar&#xff1a;能查看CPU的平均信息&#xff0c;还能查看指定CPU的信息。与mpstat相比&#xff0c;sar能查看CPU历史信息 mpstat&#xff1a;能查看所有CPU的平均信息&#xff0c;还能查看指定CPU的信息。 与sar相比&#xff0c…
阅读更多...
九五从零开始的运维之路（其二十）

九五从零开始的运维之路（其二十）

[TOC](文章目录) 文章目录 前言一、LAMP是什么二、配置环境及安装1.配置yum源2.关闭防火墙、网络图形化工具及SElinux3.安装软件包 三、配置apache服务器内容四、启动服务五、访问验证总结 前言 本篇将简述的内容&#xff1a;Linux系统下的LAMP平台部署 基于discuz框架的论坛搭…
阅读更多...
阿里云无影云电脑价格_企业办公型1元_云桌面入口

阿里云无影云电脑价格_企业办公型1元_云桌面入口

阿里云无影云电脑配置费用&#xff0c;4核8G企业办公型云电脑可以免费使用3个月&#xff0c;无影云电脑地域不同费用不同&#xff0c;无影云电脑是由云桌面配置、云盘、互联网访问带宽、AD Connector、桌面组共用桌面session等费用组成&#xff0c;阿里云百科分享阿里云无影云电…
阅读更多...
中文数据下载

中文数据下载

研究AI离不开数据&#xff0c;数据库可以说是AI的半壁天下。有链接的数据库下载是很nice的。 语音数据集整理 目录 1.Mozilla Common Voice. 2 2.翻译和口语音频的大型数据库Tatoeba. 2 3.VOiCES Dataset 3 4. LibriSpeech. 4 5.2000 HUB5 English&#xff1a;... 4 6.…
阅读更多...
如何用Three.js + Blender打造一个web 3D展览馆

如何用Three.js + Blender打造一个web 3D展览馆

作者&#xff1a;vivo 互联网前端团队- Wei Xing 运营活动新玩法层出不穷&#xff0c;web 3D炙手可热&#xff0c;本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web 3D展览馆。 一、前言 3D展览馆是什么&#xff0c;先来预览下效果&#xff1a; 看起来像…
阅读更多...
Linux离线环境Jenkins部署SpringBoot

Linux离线环境Jenkins部署SpringBoot

Jenkins服务器 把Jar包上传到Linux服务器的/jenkins/目录下 Dashboard----》新建任务----》构建一个自由风格的软件项目----》test 修改jenkins工作空间 新建构建前执行命令stop.sh&#xff0c;停止SpringBoot并备份 &#xff08;这里是目标服务器&#xff0c;即部署项目的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业