当前位置: 首页 > article >正文

【微信小程序】1|底部图标 | 我的咖啡店-综合实训

底部图标

引言

        在微信小程序开发中,底部导航栏(tabBar)是用户界面的重要组成部分,它为用户提供了快速切换不同页面的功能。今天,我们将通过一个实际案例——“我的咖啡店”小程序,来详细解析如何配置底部图标,以及如何通过app.json文件实现全局样式和导航栏的自定义。

微信小程序配置文件概览

        微信小程序的配置文件app.json是整个小程序的全局配置文件,它包含了小程序的所有页面路径、窗口表现、底部导航栏等多个方面的设置。

全局样式设置

app.json中,我们首先设置了全局的窗口样式:

"window": {
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "我的咖啡店",
  "navigationBarBackgroundColor": "#ffffff"
},

        这里定义了导航栏的文字颜色为黑色,标题为“我的咖啡店”,背景颜色为白色。

页面路径定义

接下来,我们定义了小程序中包含的所有页面路径:

"pages": [
  "pages/home/home",
  "pages/index/index",
  "pages/logs/logs",
  "pages/order/order",
  "pages/ordering/ordering",
  "pages/mine/mine",
  "pages/search/search"
],

        这些路径指向了小程序的不同页面,例如首页、订单页、搜索页等。

底部导航栏配置

底部导航栏的配置是app.json中的重点,它定义了用户界面底部的图标和文字:

"tabBar": {
  "color": "#bfbfbf",
  "selectedColor": "#8B7355",
  "backgroundColor": "#ffffff",
  "list": [
    {
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "./image/home.png",
      "selectedIconPath": "./image/home-active.png"
    },
    {
      "pagePath": "pages/order/order",
      "text": "点餐",
      "iconPath": "./image/order.png",
      "selectedIconPath": "./image/order-active.png"
    },
    {
      "pagePath": "pages/ordering/ordering",
      "text": "订单",
      "iconPath": "./image/ordering.png",
      "selectedIconPath": "./image/ordering-active.png"
    },
    {
      "pagePath": "pages/mine/mine",
      "text": "我的",
      "iconPath": "./image/mine.png",
      "selectedIconPath": "./image/mine-active.png"
    }
  ]
},

        在这段配置中,我们定义了四个底部图标,每个图标都有对应的页面路径、显示文字、未选中和选中时的图标路径。这样,用户在点击不同图标时,可以跳转到对应的页面。

自定义组件使用

最后,我们还定义了小程序中使用的自定义组件:

"usingComponents": {
  "van-search": "@vant/weapp/search/index"
}

        这里使用了Vant Weapp的搜索组件,它是一个流行的小程序UI库,提供了丰富的组件来简化开发过程。

结语

        通过上述配置,我们可以看到微信小程序的app.json文件如何控制全局样式和底部导航栏的设置。这只是一个简单的示例,微信小程序的配置非常灵活,可以根据实际需求进行调整。希望这篇文章能帮助你在开发自己的小程序时,更好地理解和配置底部导航栏。

完整代码

app.json

{

  "pages": [

    "pages/home/home",

    "pages/index/index",

    "pages/logs/logs",

    "pages/order/order",

    "pages/ordering/ordering",

    "pages/mine/mine",

    "pages/search/search"

  ],

  "window": {

    "navigationBarTextStyle": "black",

    "navigationBarTitleText": "我的咖啡店",

    "navigationBarBackgroundColor": "#ffffff"

  },

  "style": "v2",

  "componentFramework": "glass-easel",

  "sitemapLocation": "sitemap.json",

  "lazyCodeLoading": "requiredComponents",

  "tabBar": {

    "color": "#bfbfbf",

    "selectedColor": "#8B7355",

    "backgroundColor": "#ffffff",

    "list": [

      {

        "pagePath": "pages/home/home",

        "text": "首页",

        "iconPath": "./image/home.png",

        "selectedIconPath": "./image/home-active.png"

      },

      {

        "pagePath": "pages/order/order",

        "text": "点餐",

        "iconPath": "./image/order.png",

        "selectedIconPath": "./image/order-active.png"

      },

      {

        "pagePath": "pages/ordering/ordering",

        "text": "订单",

        "iconPath": "./image/ordering.png",

        "selectedIconPath": "./image/ordering-active.png"

      },

      {

        "pagePath": "pages/mine/mine",

        "text": "我的",

        "iconPath": "./image/mine.png",

        "selectedIconPath": "./image/mine-active.png"

      }

    ]

  },

  "usingComponents": {

    "van-search": "@vant/weapp/search/index"

  }

}

image

展示


http://www.kler.cn/a/449400.html

相关文章:

  • 观察者模式(sigslot in C++)
  • sh cmake-linux.sh -- --skip-license --prefix = $MY_INSTALL_DIR
  • vue前端实现同步发送请求【已封装】
  • 任务2 配置防火墙firewalld
  • 领域自适应
  • 【085】基于51单片机PID直流电机控制系统【Proteus仿真+Keil程序+报告+原理图】
  • 搭建Elastic search群集
  • 利用Matlab绘制心性函数
  • ChatGPT生成接口文档实践案例(二)
  • ubuntu开机进入initramfs状态
  • Java基础面试题20:Java语言sendRedirect()和forward()方法有什么区别?
  • linux普通用户使用sudo不需要输密码
  • [创业之路-206]:《华为战略管理法-DSTE实战体系》- 6-关键成功因素法CSF
  • FreeMarker语法
  • 【潜意识Java】深度解析黑马项目《苍穹外卖》与蓝桥杯算法的结合问题
  • Linux下载时出现的错误(配置阿里云镜像解决)
  • Vue之版本演进
  • HashMap源码深度解析
  • 10_HTML5 MathML --[HTML5 API 学习之旅]
  • 事务、管道
  • CDGA|数据治理如何为企业数字化转型提供有力支撑?
  • 回顾 python3中字符串
  • Unity3D仿星露谷物语开发5之角色单例模式
  • 每天40分玩转Django:Django文件上传
  • 9. 日常算法
  • SAP SD客户主数据及其配置