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

最新推荐文章于 2024-08-16 08:13:55 发布
最新推荐文章于 2024-08-16 08:13:55 发布
阅读量8.7k 收藏 37
点赞数 7
分类专栏： 前端 vue 文章标签： 小程序 微信小程序 编辑器 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/program_java521/article/details/131675995
版权
vue 同时被 2 个专栏收录
16 篇文章 2 订阅
订阅专栏
前端
14 篇文章 0 订阅
订阅专栏

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

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

文章目录

前言

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

一、入口文件的配置

微信小程序通过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文件调用后端接口。

在这里插入图片描述

java小白冲刺者
关注
专栏目录
微信小程序 自定义头部导航栏 navigationStyle
12-24
微信小程序 自定义头部导航栏 navigationStyle，修改微信小程序默认情况下只有返回的按钮，具体使用方法很简单，这里是直接使用组件方式，
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
10-16
主要介绍了微信小程序 自定义头部导航栏和导航栏背景图片 navigationStyle功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
微信小程序导航栏(Navigation Bar)组件使用指南
最新发布
gitblog_00649的博客
08-16 1172
微信小程序导航栏(Navigation Bar)组件使用指南 navigation-barweapp custom component -- navigation-bar项目地址:https://gitcode.com/gh_mirrors/nav/navigation-bar 项目介绍 微信小程序的导航栏组件是开发中不可或缺的一部分，本项目基于GitHub上的wechat-miniprogr...
【微信小程序入门到精通】— window 导航栏配置
热爱生活，积极向上的阿酱！
10-30 4482
本篇文章首先介绍一下在 wxss 中我们 rpx 的应用以及我们对于小程序全局样式以及局部样式的配置，然后我们将详细介绍如何配置我们的 window 导航栏。关于 rpx 介绍1. 我们在之前进行 HTML 学习中了解过 px（分辨率）这一个单位，在我们设置组件经常用到，那么在微信小程序中我们用的分辨单位是什么呢？那就是rpx。
【微信小程序】基础篇 -- 全局配置 -- window - 导航栏（十五）
JMFive的博客
03-01 7060
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第15篇文章;今天开始学习微信小程序的第九天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。🌹 🌹 🌹也欢迎你，关注我。👍 👍 👍！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。
微信小程序开发笔记 进阶篇①——微信小程序，调用云函数报错-404011 / -501000，未使用云开发模板的解决办法
小康师兄
04-15 5782
微信小程序，调用云函数报错-404011 / -501000，未使用云开发模板的解决办法
微信小程序配置导航栏
qq_35598132的博客
07-30 385
app.json配置导航栏 "tabBar": { "color": "#000000",//未点中颜色 "selectedColor": "#51b7f6",//点中颜色 "borderStyl
微信小程序实现原生导航栏和自定义头部导航栏
花铛
10-28 1万+
因为不同的手机型号头部导航栏高度可能不一致，所以为了适配更多型号，需要动态计算导航栏的高度。状态栏的高度可以通过获取。胶囊按钮的信息可以通过获取。所以导航栏高度=状态栏高度+胶囊按钮的高度+（胶囊按钮距离顶部的距离-状态栏的高度）*2。由于胶囊按钮是原生组件，为表现一致，其单位在各个系统都为 px，所以自定义导航栏高度的单位都必须是 px，才能完美适配。
微信小程序导航栏的设置
weixin_54889443的博客
07-18 650
1.在app.json中设置"tabBar":{} 2.tabBar的属性有 3.其中list为导航栏的设置，它的属性为 4.下面是例子： 效果 代码： “tabBar”:{ “list”: [ { “iconPath”:"/image/12.png", “pagePath”: “pages/index/index”, “selectedIconPath”:"/image/11.png", “text”: “微信” }, { “iconPath”:"/image/32.png", “pagePath
微信小程序 - 自定义头部导航栏开发
觉醒法师的专栏
07-30 3785
默认情况下，‌小程序的顶部导航栏由系统自动生成，‌允许修改一些基本样式如背景色、‌文字颜色等。‌然而，‌如果需要实现更复杂的样式，‌如自定义图标、‌背景等，‌或者需要适配不同手机屏幕的高度和样式，‌就需要自定义顶部导航栏。‌ 小程序自定义头部导航栏的开发主要涉及系统顶部状态栏和导航栏标题区域，‌自定义顶部导航栏的好处包括提高用户体验、‌增加页面交互性等。‌创建一个自定义导航栏组件，‌包含导航栏的样式和交互逻辑，‌并在需要使用导航栏的页面中引入自定义导航栏组件。‌
微信小程序实现自定义导航栏
Upward Force的博客
06-26 5042
1、要实现自定义导航栏，首先得在全局进行相关配置 app.json页面 "window": { ... "navigationStyle": "custom" }, 根据微信小程序官方文档的说法，只有客户端7.0.0以上版本才支持局部页面实现自定义导航栏，7.0.0以下版本只支持全体页面的自定义导航栏，自己项目里采用的是就是这种 app.js页面 App({ onLaunch: function(options) { var _this = this;
微信小程序-艺术小程序源码及项目截图
06-12
1. app.json：小程序的全局配置，如页面路径、导航栏样式、窗口背景色等。 2. pages：每个页面的目录，包含对应的WXML、WXSS和JS文件，分别对应界面、样式和逻辑。 3. utils：工具函数库，封装一些通用的函数，如...
日常工作报告生成器-微信小程序
07-13
【标题】"日常工作报告生成器-微信小程序"是一款专门针对日常工作汇报需求设计的应用，它能够帮助用户快速生成专业且格式规范的工作报告。通过微信小程序的形式，用户无需下载安装额外的应用，只需在微信内就能轻松...
【愚公系列】《微信小程序开发解析》002-小程序基础知识
热门推荐
时光隧道
07-07 2万+
小程序是一种轻量级应用程序，用户可以在不需要下载安装的情况下直接使用。小程序通常具有较小的体积，快速加载速度，提供类似原生应用的用户体验。
【微信小程序】WXSS和全局、页面配置
weixin_62542181的博客
07-21 5734
本文对微信小程序的WXSS相对于CSS新增内容进行讲解，以及微信小程序的全局配置，页面配置
微信小程序的基础配置和目录结构
s_y_f_的博客
06-22 894
介绍:昨天学习了小程序的安装和作用,今天就开始小程序的基础知识了,今天主要讲一下目录结构,全局配置和页面配置的一些属性 官方文档地址 https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html. 一.目录结构 如图 components : 放自定义组件的地方，之前小程序是不支持组件化开发的，后来为了贴合大众开发口味，开始支持自定义组件。组件模版会在后面讲，这里只是了解一下目录构成。 images：存放静态图
【微信小程序】自定义导航栏
得意小门生的博客
08-31 577
微信头部导航栏可能通过json配置： （文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html） 但是有时候我们项目需求可能需要自定义头部导航栏，如下图所示： 分析上图，我得到如下信息： Android 跟 iOS 有差异，表现在顶部到胶囊按钮之间的距离差了 6pt 胶囊按钮高度为 32pt， iOS 和 Android 一致 如何计算 导航栏分为状态栏和标题栏，只要能算出每台手机的
微信小程序 自定义导航栏navigationBar
油焖茄子 的博客
07-28 5234
除了胶囊按钮以外，原生导航栏只会出现返回按钮和当用户打开的小程序最底层页面是非首页时，默认展示的“返回首页”按钮。原生导航栏的标题文字的颜色只有黑白。布局无法改变，不能做定制。将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉。加上"navigationStyle"："custom"，这样原生的导航栏就已经消失，甚至后退键也不会出现需要自定义。
【微信小程序】动态设置导航栏标题
m0_55394328的博客
01-17 5188
哈喽大家好，本期是微信小程序专栏第十八期。本期主要内容是动态设置导航栏标题。导航栏是页面最顶部的一块区域。本期使用两种方法来实现动态导航栏标题的设置，分别是使用配置文件配置导航栏标题和使用wx.setNavigationBarTitle(OBJECT)设置导航栏。每期内容是连载呢，建议大家可以看看往期内容，更好理解噢~以上就是今天的学习内容啦~如果有兴趣的话可以订阅专栏，持续更新呢~咱们下期再见~
微信小程序navigationbar
06-28
### 回答1： 微信小程序navigationbar是小程序中的一个组件，用于展示页面的标题和导航栏。它可以包含左侧返回按钮、右侧操作按钮、标题等内容，并且可以自定义样式和事件。通过navigationbar，用户可以更方便地进行页面之间的切换和操作。 ### 回答2： 微信小程序是一种新型应用形态，而小程序的navigationbar则是小程序中的一个非常关键的元素。简单而言，navigationbar就是小程序界面中的导航栏，提供了小程序页面之间的切换和页面内容的展示。小程序的navigationbar可以让用户快速了解和切换到不同的页面，加快小程序的交互速度，提高用户的使用体验。 微信小程序navigationbar有以下的几个特点： 1. 支持自定义导航栏颜色和标题颜色，提高小程序的美观性和个性化。 2. 支持定位功能和搜索功能，方便用户快速找到自己需要的页面和内容。 3. 支持滚动效果和渐变效果，让页面过渡更加平滑，让用户视觉感受更加舒适。 4. 支持TabBar模式和自定义模式，可以根据具体的小程序设计来选择合适的模式，提高交互效果。 5. 支持与微信原生导航栏进行无缝衔接，让用户更加顺畅地在小程序和微信原生界面之间切换。 小程序navigationbar在小程序中起到了非常重要的作用，可以帮助小程序实现更好的交互效果和提高用户的使用体验。随着微信小程序的不断发展和普及，小程序navigationbar也将越来越受到开发者的重视和关注，开发者们应该加强对小程序navigationbar的学习和运用，以便更好地打造出具有竞争力的小程序。 ### 回答3： 微信小程序是一种轻量级的应用，它提供了许多有用的功能，例如导航栏。导航栏是指小程序页面上的一个包含标题和返回按钮的栏，它通常出现在页面顶部或底部。微信小程序提供了许多不同的导航栏选项，其中navigationbar是其中之一。在本文中，我们将探讨微信小程序navigationbar的一些基本知识以及如何使用它来创建一个更好的用户体验。 什么是微信小程序navigationbar？ 微信小程序navigationbar是微信小程序中的一种导航栏样式。它可以在微信小程序页面的顶部或底部显示，并且可以包含标题、返回按钮、背景颜色等界面元素。创建一个微信小程序navigationbar通常需要使用微信小程序提供的navigator组件，以及一些css样式定义。 如何在微信小程序中使用navigationbar？ 在微信小程序中，使用navigationbar需要以下步骤： 第一步：在页面的json配置文件中添加"navigationBarBackgroundColor"和"navigationBarTextStyle"两个属性，用来定义导航栏的背景颜色和字体颜色。 第二步：在页面wxml文件中添加navigator组件和view组件，用来定义导航栏和页面内容。 第三步：在页面js文件中添加wx.setNavigationBarTitle和wx.setNavigationBarColor方法，用来设置导航栏的标题和颜色。 第四步：在CSS文件中添加.navigation-bar和.navigation-tab样式，用来定义导航栏和底部tab栏的样式。 总结 微信小程序navigationbar是一个非常有用的功能，可以帮助用户更方便地浏览和访问小程序。使用navigationbar可以提高小程序的用户体验和可用性，同时也可以提高小程序的品牌知名度和用户忠诚度。在开发小程序时，我们应该根据不同业务需求和用户需求，合理地选择和使用不同的导航栏样式，以达到更好的效果。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值