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

这篇具有很好参考价值的文章主要介绍了【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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



前言

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


一、入口文件的配置

微信小程序通过app.json文件中的entryPagePath对象来指定小程序的首页。常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为 pages 列表的第一项。不支持带页面路径参数。
🧀我们通过代码来演示
🏀🏀🏀设置pages 中第二个页面路径为首页

app.json

{
  "entryPagePath": "pages/index/index"
}

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

二、页面配置

微信小程序通过app.json文件中的Pages对象来指定小程序的所有页面。该对象是一个数组,数组的每一项就是一个页面。如代码示例中有一个index页面,数组的第一项就代表是小程序第一个页面

🧀我们通过代码来演示
🏀🏀🏀新建小程序页面
只需要在 pages 中新增页面的存放路径,小程序开发者工具即可帮我们自动创建对应的页面文件
【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端
添加一个home页面

"pages": [
        "pages/index/index",
        "pages/home/home"
    ],

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端
🍉🍉🍉切换页面快捷键
按住 ALT键 + 箭头上下键,即可将该代码上下移动。

三、全局默认窗口配置

微信小程序通过app.json文件来配置窗口页面设置。window对象设置窗口外观,它有很多属性。

属性 类型 默认值 必填 说明
navigationBarTitleText String 字符串 导航栏的文字
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色,默认为#fff(白色)
navigationBarTextStyle String white 导航栏标题颜色,仅支持 black / white,默认为white
backgroundColor HexColor #ffffff 窗口的背景色
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light
enablePullDownRefresh Boolean false 是否全局开启下拉刷新
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为px
navigationStyle String default 导航栏样式,仅支持 default / custom

这里引用小白白大佬文章的图片来说一下小程序窗口的组成部分。
🍉🍉🍉小程序窗口的组成部分
【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

1.navigationBarTitleText:导航栏标题文字

🧀我们通过代码来演示
🏀🏀🏀修改导航栏标题文字为“第一个小程序”

"window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#ff1111",
        "navigationBarTitleText": "第一个小程序",
        "navigationBarTextStyle": "black",
        "enablePullDownRefresh": true
    },

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

2.navigationBarBackgroundColor:导航栏背景颜色

🧀我们通过代码来演示
🏀🏀🏀修改导航栏背景颜色为黑色

"window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#333",
        "navigationBarTitleText": "第一个小程序",
        "navigationBarTextStyle": "black",
        "enablePullDownRefresh": true
    },

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

3.navigationBarTextStyle:导航栏标题颜色,仅支持 black / white

🧀我们通过代码来演示
🏀🏀🏀修改导航栏标题颜色为白色

"window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#333",
        "navigationBarTitleText": "第一个小程序",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true
    },

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

4.enablePullDownRefresh:是否开启全局的下拉刷新

🧀我们通过代码来演示
🏀🏀🏀开启小程序下拉选项

"window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#333",
        "navigationBarTitleText": "第一个小程序",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true
    },

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

5.backgroundColor :下拉刷新窗口的背景色

🧀我们通过代码来演示
🏀🏀🏀开启全局下拉刷新功能后,默认的窗口的背景颜色为白色,我们把下拉背景颜色改为#efefef

    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#333",
        "navigationBarTitleText": "第一个小程序",
        "navigationBarTextStyle": "white",
        "backgroundColor":"#efefef",
        "enablePullDownRefresh": true
    },

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

6.backgroundTextStyle:设置下拉刷新样式

🧀我们通过代码来演示
🍉🍉🍉backgroundTextStyle 的可选值只有 light dark
🏀🏀🏀 dark

   "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#333",
        "navigationBarTitleText": "第一个小程序",
        "navigationBarTextStyle": "white",
        "backgroundColor":"#efefef",
        "enablePullDownRefresh": true
    },

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

🏀🏀🏀 light

"window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#333",
        "navigationBarTitleText": "第一个小程序",
        "navigationBarTextStyle": "white",
        "backgroundColor":"#efefef",
        "enablePullDownRefresh": true
    },

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

7.navigationStyle:导航栏样式

🧀我们通过代码来演示
🍉🍉🍉backgroundTextStyle 的可选值只有 default 默认样式custom 自定义导航栏,只保留右上角胶囊按钮
🏀🏀🏀 default

   "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#333",
        "navigationBarTitleText": "第一个小程序",
        "navigationBarTextStyle": "white",
        "backgroundColor":"#efefef",
        "navigationStyle":"default",
        "enablePullDownRefresh": true
    },

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端
🏀🏀🏀 custom

   "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#333",
        "navigationBarTitleText": "第一个小程序",
        "navigationBarTextStyle": "white",
        "backgroundColor":"#efefef",
        "navigationStyle":"custom",
        "enablePullDownRefresh": true
    },

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

8.onReachBottomDistance:上拉触底

🧀我们通过代码来演示
🍉🍉🍉上拉触底 是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而 加载更多数据 的行为。 默认距离为50px ,如果没有特殊需求,建议使用默认值即可。
🏀🏀🏀 设置上拉触底距离为80px

 "window": {
        "backgroundTextStyle": "dark",
        "navigationBarBackgroundColor": "#333",
        "navigationBarTitleText": "第一个小程序",
        "navigationBarTextStyle": "white",
        "backgroundColor":"#efefef",
        "navigationStyle":"default",
        "onReachBottomDistance":80,
        "enablePullDownRefresh": true
    },

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

四、底部tab栏配置

如果小程序是一个多 tab 应用,可以通过tabBar 配置项指定 tab 栏,以及 tab 切换时显示的对应页面,即:实现小程序多页面的快速切换
🍉🍉🍉小程序通常分为:

  • 底部tabBar
  • 顶部tabBar

注意:

  • tabBar 只能配置 最少2个最多2个tab页签
  • 当渲染顶部 tabBar 时,不显示 icon(图标),只显示文本

1.tabBar 的 6 个组成部分

这里引用小白白大佬博客的图片
【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

2.tabBar和每个tab项的属性配置

🍉🍉🍉 tabBar 节点属性配置

属性 类型 默认值 必填 说明
position String bottom tabBar 的位置,仅支持 bottom / top
borderStyle String black tabBar上边框的颜色,仅支持 black / white
color HexColor tab上文字的默认(未选中)颜色,仅支持十六进制颜色
selectedColor HexColor tab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColor HexColor tab 的背景色,仅支持十六进制颜色
list Array tab 页签的列表,最少 2 个、最多 5 个 tab
custom boolean false 自定义tabBar

🍉🍉🍉 每个tab项的属性配置

属性 类型 默认值 必填 说明
pagePath String 页面路径,必须在 pages 中预先定义
text String tab 上按钮文字
iconPath String 图片路径,icon大小限制为40kb,建议尺寸为81px*81px,不支持网络图片;当 postion 为 top 时,不显示 icon
selectedIconPath String 选中时的图标路径,icon大小限制为40kb,建议尺寸为81px*81px,不支持网络图片;当 postion 为 top 时,不显示 icon

3.代码示例

🧀我们通过代码来演示
🏀🏀🏀 实现通过配置tabBar选项来切换不同页面
图片素材:
【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端
我们把图片名称改为页面名称,选中的图片加-selected。

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端
把图片的文件夹拷贝到小程序项目的根目录。
【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端

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"
}

主页
【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端
家庭页
【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端
联系我们
【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端


总结

以上就是今天要讲的内容,本文简单介绍了全局app.json文件中入口文件的配置entryPagePath、页面配置Pages、全局默认窗口配置window和底部tab栏配置tabBar 使用,下一章我们将讲解小程序JS文件调用后端接口。

【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题),前端,vue,小程序,微信小程序,编辑器,前端文章来源地址https://www.toymoban.com/news/detail-564874.html

到了这里,关于【微信小程序创作之路】- 小程序窗口整体配置(导航栏、标题)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序-原生开发】实用教程02-添加全局页面配置、页面、底部导航

    开始前,请先完成项目创建,详见 【微信小程序-原生开发】实用教程01-注册登录账号,获取 AppID、下载安装开发工具、创建项目、上传体验 因我们的项目是根据模板创建的,需先清理掉无效的页面代码,具体操作方式如下: 删除 pages 文件夹下的所有文件 用下方代码替换掉

    2023年04月10日
    浏览(41)
  • 微信小程序页面的跳转和导航的配置和vant组件

    结论: navigateTo ,  redirectTo  只能打开非 tabBar 页面。 switchTab  只能打开 tabBar 页面。 reLaunch  可以打开任意页面。 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。 调用页面路由带的参数可以在目标页面的 onLoad 中获取。 (1)当我们使用 redirectTo跳

    2024年02月09日
    浏览(52)
  • 微信小程序-消息订阅整体流程

    1.首先登录微信公众平台,网址:微信公众平台 2.找到“订阅消息”,如果订阅消息没开启,可以点击开启,然后根据自己的消息需求到公共模版里找合适的,然后点击选用,如果没有比较合适的可以申请模版 3.申请模版步骤(如果找到合适的模版可以不申请直接跳过这步)

    2024年04月25日
    浏览(44)
  • 基于微信小程序的校园导航微信小程序

    博主主页: 一点素材 博主简介: 专注Java技术领域和毕业设计项目实战、Java、微信小程序、安卓等技术开发,远程调试部署、代码讲解、文档指导、ppt制作等技术指导。 主要内容: SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、小程序、安卓app、大数据等设计与开发。 感兴

    2024年02月20日
    浏览(49)
  • 微信小程序页面导航

    1.1.1配置的Tab页面    1.1.2页面跳转书写  1.2.3页面展示     1.2.1页面跳转代码 其实默认跳转的就是非Tab页面,可以简写成一下 1.2.2图片展示   注意: 跳转tab页面不能传参,但是非Tab页面可以传递参数,微信开发左下角!    或者在跳转后的页面 说明:delta代码后退的层数,默

    2024年02月12日
    浏览(44)
  • 微信小程序之导航

    导航:导航指的是页面之间的互相跳转 tabBar 页面:被配置为 tabBar的页面 实现:在页面上声明一个 navigator 导航组件,通过点击 navigator 组件实现页面跳转 导航到 tabBar 页面 在使用 navigator 组件跳转到指定的 tabBar 页面时,需要指定的 url 属性和 open-type 属性 注: url 表示要

    2024年01月16日
    浏览(35)
  • 微信小程序地图导航

    官方坐标获取:https://lbs.qq.com/getPoint/ 如:重庆解放碑 纬度:29.557284 经度:106.577153 微信小程序文档:https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.openLocation.html

    2024年02月11日
    浏览(59)
  • 微信小程序 实现导航守卫

    小程序中是不支持路由拦截的,需要开发者自行封装路由拦截的功能,实践有许多的实现思路,下面我采用的是封装组件的方式实现。比方说一个小程序项目只有一两个页面是不需要登录就可以访问的,其他页面都是需要登录之后才能访问的,那我就用封装一些逻辑来检测用

    2024年02月10日
    浏览(58)
  • 微信小程序滑动导航栏

    微信小程序可以使用组件库中的 scroll-view 组件和 swiper 组件实现滑动导航栏。 下面是一个使用 scroll-view 组件实现滑动导航栏的例子: 在 .wxml 文件中定义 scroll-view 组件和导航栏 php Copy code scroll-view scroll-x=\\\"true\\\" class=\\\"nav-scroll\\\"   view class=\\\"nav-item {{activeIndex==0?\\\'active\\\':\\\'\\\'}}\\\" bindta

    2024年02月11日
    浏览(44)
  • 微信小程序:12.页面导航

    页面导航指的是页面之间的相互跳转。例如,浏览器中实现的页面导航的方式有两种: 连接 location.href 在页面上声明一个导航组件 通过点击组件实现页面跳转 是指配置TabBar页面 在使用组件跳转到指定的tabBar页面,需要指定url属性和open-type属性,其中: url表示要跳转的页面

    2024年04月27日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包