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

最新推荐文章于 2024-06-19 14:51:59 发布
最新推荐文章于 2024-06-19 14:51:59 发布
阅读量7.5k 收藏 31
点赞数 6
分类专栏： 前端 vue 文章标签： 小程序 微信小程序 编辑器 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ProGram_Java521/article/details/131675995
版权
vue 同时被 2 个专栏收录
16 篇文章 1 订阅
订阅专栏
前端
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小白冲刺者
关注
  • 6
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
backgroundcolor 小程序_微信小程序：动态设置页面标题、导航条
weixin_39989159的博客
12-29 1037
前言navigationBarTitleText用于小程序设置当前页面标题，可以给每个页面设置独立的标题，但是这样不能满足一些特殊业务场景；比如说商城，商品详情页面的标题，会根据获取到的数据动态修改，下面就来说说如何动态修改标题以及导航条相关设置。正文一、wx.setNavigationBarTitle1.设置整个小程序通用标题，在app.json里设置："window": { "navi...
navigationbartitletext设置样式_14. 小程序项目实战：设置分类页面布局（1）
weixin_39944146的博客
11-27 3207
大家好！这一章我们将上一章获取的所有接口数据变成页面标签。首先，先来看一下分类页面有哪些标签结构，如下图所示分为三大块：1、标题文字：商品的分类2、搜索框3、内容部分：左右两侧。并且左(右)边发生滚动时，右(左)边不动。明确分类页面的标签结构后，一起来写代码吧！！！1、 找到pages-category-index.json文件，修改标题文字，代码如下：{"usingComponents":...
微信小程序-页面配置-顶部导航栏背景色渐变
11-29
自定义tabBar页面的顶部导航栏，并保持导航栏的风格与其他tabBar页面导航栏风格统一，也就是导航栏标题文字排版统一。
微信小程序 自定义 tabBar
Embrace924的博客
05-31 480
微信小程序 自定义 tabBar
微信小程序导航栏
最新发布
2301_79658787的博客
06-19 237
在微信小程序中，导航栏通常指的是顶部的标题栏，它包括了页面的标题、左侧的返回按钮或自定义按钮以及右侧的操作按钮。- `navigationBarTextStyle`：指定导航栏标题的颜色，支持 `black` 和 `white`。在每个页面的配置中可以设置导航栏的样式、标题等。在小程序的全局配置文件 `app.json` 中可以配置所有页面的默认导航栏样式和行为。"navigationBarTitleText": "页面标题","navigationBarTitleText": "页面标题",
微信小程序-----全局配置与页面配置
m0_73633088的博客
01-16 2771
今天我们开始学习微信小程序中的全局配置，前面对微信小程序文件介绍的时候讲到过.json文件的基本作用和内容，那么本期的主角是app.json文件，这个是作为微信小程序的全局配置文件，通过这个文件我们可以对微信小程序进行全局性的管理。
uniapp HBuilder navigationBarTitleText不显示
weixin_43462310的博客
04-20 467
其中 navigationBarTitleText 默认为空，所以在 globalStyle 中配置会被覆盖，即 globalStyle 中 navigationBarTitleText 并不会生效。是 HBuilderX(3,99) 的缺陷，在 page.json 中进行相关配置时会自动生成两条页面配置样式。保存后生效（如果在微信开发者工具中不生效重新编译一下）
【uniapp】微信小程序开发之动态改变底部tabBar和导航标题navigationBarTitleText
糖葫芦哎的博客
05-12 6560
在开发中，我们会遇到一些需求，需要动态改变底部的tabBar和导航标题navigationBarTitleText，下面就简单的介绍一下，如何改变呢
微信小程序“navigationBarTitleText“: “全民优购“不显示
qq_44776454的博客
08-11 5198
微信小程序"navigationBarTitleText": "全民优购"不显示
navigationBarTextStyle动态修改状态栏颜色
weixin_47873655的博客
05-28 6210
手机状态栏就是这个区域 近期项目有一个需求 ， 手机状态栏是需要进行动态修改颜色的 虽然他也就只有两个取值，一个白色一个黑色，翻阅文档 ，uniapp和微信小程序都写了相关的在页面动态修改的方法 ，但是代码写上去却不生效。 onPageScroll(e) { if (e.scrollTop > 360) { this.isTopBg = true wx.setNavigationBarColor({ frontColor: "#000000", }) } else
微信 设置底部导航栏
热门推荐
weixin_43077063的博客
08-27 1万+
转 微信小程序设置底部导航栏目方法 2...
微信小程序 外卖点餐 KFC-master （源代码+截图）
06-21
微信小程序 外卖点餐 KFC-master （源代码+截图）微信小程序 外卖点餐 KFC-master （源代码+截图）微信小程序 外卖点餐 KFC-master （源代码+截图）微信小程序 外卖点餐 KFC-master （源代码+截图）微信小程序 外卖...
微信小程序练手项目-音乐播放器(完整代码)
01-06
微信小程序练手项目-音乐播放器(完整代码)微信小程序练手项目-音乐播放器(完整代码)微信小程序练手项目-音乐播放器(完整代码)微信小程序练手项目-音乐播放器(完整代码)微信小程序练手项目-音乐播放器(完整代码)微信...
微信小程序期末大作业-手机商城微信小程序
12-15
微信小程序期末大作业-手机商城微信小程序（免积分下载） 含底部导航，轮播图等等，小程序运行截图请看我的文章介绍：https://blog.csdn.net/weixin_43474701/article/details/135025795
微信小程序 ---- 组件应用和实际开发的DEMO
01-09
微信小程序是一种轻量级的应用开发平台，主要针对移动端，由腾讯公司推出，旨在提供便捷的、无需下载安装即可使用的线上服务。本主题聚焦于微信小程序的组件应用与实际开发，通过一系列DEMO来深入理解其核心功能和...
微信小程序 自定义导航栏navigationBar
油焖茄子 的博客
07-28 4651
除了胶囊按钮以外，原生导航栏只会出现返回按钮和当用户打开的小程序最底层页面是非首页时，默认展示的“返回首页”按钮。原生导航栏的标题文字的颜色只有黑白。布局无法改变，不能做定制。将需要自定义navigationBar页面的page.json的navigationBarTitleText去掉。加上"navigationStyle"："custom"，这样原生的导航栏就已经消失，甚至后退键也不会出现需要自定义。
手把手教你完成微信小程序顶部导航栏
Jason Wang
04-13 1万+
微信小程序顶部导航栏十分常见、尤其是在新闻类的小程序里，常见的导航栏有可水平滑动导航栏、居中导航栏、平分导航栏，本文手把手教你完成水平导航栏。 以《报修小程序源码》为基础拓展讲解平分导航栏 传送门：flask + mysql + 微信报修小程序源码获取 最终实现结果如下： 编写 wxml 页面 编程思路： 需要一个外层 view ，将内层水平的子 view 包含进来 ，保证内层 view 的...
修改微信小程序顶部状态栏颜色
qq_50386946的博客
06-11 951
效果图： 代码： { "usingComponents": {}, "navigationBarTitleText": "选品库", "navigationBarTextStyle": "white", // 只能写 black 和 white "navigationStyle": "custom" // 自定义导航栏 }
微信H5跳转微信小程序 wx-open-launch-weapp
01-04
微信H5跳转微信小程序的方法是使用`wx-open-launch-weapp`标签。该标签需要在微信版本7.0.12及以上以及iOS 10.3及以上或Android 5.0及以上的系统版本中才能正常使用。 要实现微信H5跳转微信小程序，你可以按照以下步骤进行操作： 1. 在需要跳转的页面中，引入微信开放标签的JS文件： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 在页面加载完成后，调用`wx.config`方法进行配置： ```javascript wx.config({ // 配置参数 }); ``` 3. 在`wx.config`方法的回调函数中，调用`wx-open-launch-weapp`标签进行跳转： ```javascript wx.ready(function() { wx.openBusinessView({ businessType: 'wx-open-launch-weapp', extraData: { appId: '小程序的AppID', path: '小程序的路径', envVersion: '开发版、体验版或正式版' } }); }); ``` 其中，`appId`是要跳转的小程序的AppID，`path`是小程序的路径，`envVersion`是小程序的版本（可以选择开发版、体验版或正式版）。 请注意，为了看到效果，你需要使用开发者工具或在手机真机上进行调试。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值