【微信小程序】-- uni-app 项目-- 配置 tabBar 效果（五十一）

请添加图片描述

  • 💌 所属专栏：【微信小程序开发教程】

  • 😀 作  者：我是夜阑的狗🐶

  • 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！

  • 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘

文章目录

  • 前言
  • 一、配置 tabBar 效果
      • 1、创建 tabBar 分支
      • 2、创建 tabBar 页面
      • 3、配置 tabBar 效果
      • 4、删除默认的 index 首页
      • 5、修改导航条的样式效果
      • 6、分支的提交与合并
  • 总结

前言

  大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第51篇文章;
  今天开始学习微信小程序的第35天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
  专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
  如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。

一、配置 tabBar 效果

  前面已经介绍了使用 Git 管理项目，在使用过程也遇到很多一些配置差异的问题，被卡了很多时间。接下来就来讲解一下配置 tabBar 效果吧。话不多说，让我们原文再续，书接上回吧。

请添加图片描述

1、创建 tabBar 分支

  在实际开发过程中，一般代码改动都先上传到自己的分支，然后在请求合并到 master 分支中，而不是直接上传 master 分支。运行如下的命令，基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能：

git checkout -b tabBar
  • git checkout 命令是 Git 中的一个常用命令，用于切换分支和检出文件。它的用法有以下几种：
    • 切换分支：git checkout branch-name
      将当前工作目录下的文件切换到指定的分支 branch-name，如果 branch-name 不存在，则会提示错误。如果当前工作目录下有未提交的修改，会提示你先提交或保存更改，或者使用 git stash 命令暂存更改。
    • 创建并切换到新分支：git checkout -b branch-name
      创建一个新分支 branch-name 并切换到该分支。这相当于执行 git branch branch-name 和 git checkout branch-name 两个命令。
    • 检出文件：git checkout commit-id file-path
      将指定提交记录 commit-id 中的指定文件 file-path 检出到当前工作目录中，覆盖原有文件。如果不指定 commit-id，则默认使用 HEAD（即当前分支最近的一次提交）。
    • 恢复文件：git checkout -- file-path。
      恢复指定文件 file-path 的修改，使其回到最近一次提交的状态。如果不指定 file-path，则默认将所有修改的文件都恢复到最近一次提交的状态。

在这里插入图片描述

  其中 -b 参数是创建 tabBar 分支并切换到该分支，这相当于执行 git branch tabBar 和 git checkout tabBar 两个命令。可以使用以下命令来看一下当前分支是那个分支：

git branch
  • git branch 命令的常用选项如下：
    • git branch：不带参数时，列出所有本地分支，当前分支前面会有一个 * 号；
    • git branch -a：列出所有本地和远程分支；
    • git branch branch-name：创建一个名为 branch-name 的新分支；
    • git branch -d branch-name：删除一个名为 branch-name 的分支，如果分支还未合并到当前分支，则需要使用 -D 参数来强制删除；
    • git branch -m old-branch new-branch：将旧分支重命名为新分支。

在这里插入图片描述

2、创建 tabBar 页面

  在 pages 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面。在 HBuilderX 中，可以通过如下的两个步骤，快速新建页面：

  • Step 1、在 pages 目录上鼠标右键，选择新建页面。

  • Step 2、在弹出的窗口中，填写页面的名称、勾选 scss 模板之后，点击创建按钮。截图如下：

在这里插入图片描述

  创建完这四个页面之后就能在 pages.json 文件看到文件配置了，这里可以对代码进行格式化（重排代码格式），VSCode 风格的快捷键是 Alt + Shift + F 。

在这里插入图片描述

3、配置 tabBar 效果

  将 资料目录下的 static 文件夹 拷贝一份，替换掉项目根目录中的 static 文件夹，图片资源可以在 gitee 上进行下载，点击下载，

在这里插入图片描述

  修改项目根目录中的 pages.json 配置文件，新增 tabBar 的配置节点如下：

{
  "pages": [],
  "tabBar": {
    "selectedColor": "#C00000",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "static/tab_icons/home.png",
        "selectedIconPath": "static/tab_icons/home-active.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "分类",
        "iconPath": "static/tab_icons/cate.png",
        "selectedIconPath": "static/tab_icons/cate-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "购物车",
        "iconPath": "static/tab_icons/cart.png",
        "selectedIconPath": "static/tab_icons/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "static/tab_icons/my.png",
        "selectedIconPath": "static/tab_icons/my-active.png"
      }
    ],
  }
}

4、删除默认的 index 首页

  这里一定要注意要在 pages.json 中 index 页面删除或者把 tabBar 页面放在前面，因为 tabBar 页面必须在前面，否则运行的时候是看不到的。
  删除的话，在 HBuilderX 中，把 pages 目录下的 index 首页文件夹 删除掉，同时，把 page.json 中记录的 index 首页 路径删除掉，为了防止小程序运行失败，在微信开发者工具中，手动删除 pages 目录下的 index 首页文件夹。
  如果嫌麻烦的话，不删除也可以的。

在这里插入图片描述

  这里我是选择把该页面放 tabBar 页面后面，可以来看一下运行效果：

在这里插入图片描述

5、修改导航条的样式效果

  打开 pages.json 这个全局的配置文件，修改 globalStyle 节点如下：

{
  "globalStyle": {
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我是夜兰的狗",
    "navigationBarBackgroundColor": "#C00000",
    "backgroundColor": "#FFFFFF",
    "app-plus": {
      "background": "#efeff4"
    }
  },
}

  注意：这里有个坑点， 在 globalStyle 设置 navigationBarTitleText 参数的时候，页面中也有这个参数，而且赋值为空，只是前面创页面的自动创建的值，这样在运行过程globalStyle的参数就被页面的参数覆盖，从而不显示，这里可以把页面中的 navigationBarTitleText 参数进行删除即可。

在这里插入图片描述

  删除之后可以来看一下运行效果：

在这里插入图片描述

6、分支的提交与合并

  这里打开 Git 软件进行提交代码，将本地的 tabbar 分支进行本地的 commit 提交：

git add .
git commit -m "【更新】1.完成了 tabBar 的开发"

在这里插入图片描述

  查看文件状态

在这里插入图片描述

  提交更新内容。

在这里插入图片描述

  将本地的 tabbar 分支推送到远程仓库进行保存：

git push -u origin tabbar

在这里插入图片描述

  将本地的 tabbar 分支合并到本地的 master 分支：

git checkout master
git merge tabbar
git push

在这里插入图片描述

  提交分支合并。

在这里插入图片描述

  可以查看分支更新情况。

在这里插入图片描述

  删除本地的 tabbar 分支：

git branch -d tabbar

  用完本地的 tabbar 分支就可以卸磨杀驴了

在这里插入图片描述

总结

  感谢观看，这里就是uni-app 项目-- 配置 tabBar 效果的介绍使用，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹

在这里插入图片描述

  也欢迎你，关注我。👍 👍 👍

  原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉

更多专栏订阅:

  • 😀 【LeetCode题解（持续更新中）】
  • 🚝 【Java Web项目构建过程】
  • 💛 【微信小程序开发教程】
  • ⚽ 【JavaScript随手笔记】
  • 🤩 【大数据学习笔记（华为云）】
  • 🦄 【程序错误解决方法（建议收藏）】
  • 🚀 【软件安装教程】



订阅更多，你们将会看到更多的优质内容！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/3832.html

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

相关文章

【C++进阶】智能指针

【C++进阶】智能指针

文章目录为什么需要智能指针？内存泄漏什么是内存泄漏，内存泄漏的危害内存泄漏分类（了解）如何避免内存泄漏智能指针的使用及原理smart_ptrauto_ptrunique_ptrshared_ptr线程安全的解决循环引用weak_ptr删除器为什么需要智能指针&am…
阅读更多...
HJZS电源监视继电器HJZS-E202 AC220V

HJZS电源监视继电器HJZS-E202 AC220V

系列型号： HJZS-E202断电延时继电器 HJZS-E002断电延时继电器 一 应用 HJZS-E202电源监视继电器用于直流或交流操作的各种保护和自动控制的装置中，用以增加触点数量。 二 安装结构 导轨安装9壳体结构，具体尺寸参阅外型尺寸图。 三 产品型号…
阅读更多...
蓝桥杯刷题冲刺 | 倒计时14天

蓝桥杯刷题冲刺 | 倒计时14天

作者：指针不指南吗 专栏：蓝桥杯倒计时冲刺 🐾马上就要蓝桥杯了，最后的这几天尤为重要，不可懈怠哦🐾 文章目录1.最长递增2.走迷宫3.解立方根4.回文特判5.修改数组1.最长递增 题目 链接： 最长递增…
阅读更多...
【Java版oj 】 day17杨辉三角形的变形、计算某字符出现次数

【Java版oj 】 day17杨辉三角形的变形、计算某字符出现次数

目录 一、杨辉三角形的变形 （1）原题再现 （2）问题分析 （3）完整代码 二、计算某字符出现次数 （1）原题再现 （2）问题分析 （3）完整代…
阅读更多...
Python调用GPT3.5接口的最新方法

Python调用GPT3.5接口的最新方法

GPT3.5接口调用方法主要包括openai安装、api_requestor.py替换、接口调用、示例程序说明四个部分。 1 openai安装 Python openai库可直接通过pip install openai安装。如果已经安装openai，但是后续提示找不到ChatCompletion，那么请使用命令“pip instal…
阅读更多...
【ArcGIS Pro二次开发】(18)：地理处理工具类【Geoprocessing】补遗

【ArcGIS Pro二次开发】(18)：地理处理工具类【Geoprocessing】补遗

ArcGIS Pro SDK 3.0中的Geoprocessing类是用于执行地理处理工具的核心类。地理处理工具是用于执行空间分析、数据转换、数据管理等任务的工具集，包括常见的空间分析工具、栅格处理工具、矢量处理工具、地图制图工具等。 之前有简单记录了下Geoprocessing工具的用法…
阅读更多...
整理了一份github上比较热门的ChatGPT项目，值得收藏

整理了一份github上比较热门的ChatGPT项目，值得收藏

ChatGPT已经火了一段时间了，但是，热度依旧是各大自媒体的热榜。由于，国内不能直接访问ChatGPT,国内的开发者依托OpenAI的接口，开发出一些ChatGPT的应用。今天就整理一下github上最热门的ChatGPT项目。 lencx/ChatGPT 该项目是Cha…
阅读更多...
springboot校友社交系统

springboot校友社交系统

050-springboot校友社交系统演示录像开发语言：Java 框架：springboot JDK版本：JDK1.8 服务器：tomcat7 数据库：mysql 5.7（一定要5.7版本） 数据库工具：Navicat11 开发软件：e…
阅读更多...
蓝桥杯第14天（Python版）

蓝桥杯第14天（Python版）

并查集的使用# 并查集模板 N400 fa[] def init(): # 初始化，默认自身为根接点for i in range(N):fa.append(i)def merge(x,y): # 发现可以合并，默认选x的根节点为根接点fa[find(x)]find(y)def find(x): # 相等就是根结点，不然就递归查找根…
阅读更多...
Vue3监听器使用

Vue3监听器使用

watch(监听的对象或值, 回调函数（参数新值，旧值）, 配置项是对象{ immediate: true//立即监听--进入就会执行一次 deep：true //深度监听 }) 首先引入 import { ref, watch } from vue; 设置响应式数据 const num ref(1) …
阅读更多...
【数据结构篇C++实现】- 栈

【数据结构篇C++实现】- 栈

文章目录🚀一、栈的原理精讲🚀二、栈的算法实现⛳栈的顺序存储结构🎉（一）顺序栈1.栈的结构体定义2.栈的初始化3.判断空栈4.判断栈满5.元素入栈6.元素出栈7.获取栈顶元素🎉（二）共享栈…
阅读更多...
冯诺依曼，操作系统以及进程概念

冯诺依曼，操作系统以及进程概念

文章目录一.冯诺依曼体系结构二.操作系统（operator system）三.系统调用和库函数四.进程1.进程控制块（PCB）2.查看进程3.系统相关的调用4.fork介绍（并发引入）五.总结一.冯诺依曼体系结构 计算机大体可以说是…
阅读更多...
MD5加密竟然不安全，应届生表示无法理解？

MD5加密竟然不安全，应届生表示无法理解？

前言 近日公司的一个应届生问我，他做的一个毕业设计密码是MD5加密存储的，为什么密码我帮他调试的时候，我能猜出来明文是什么？ 第六感，是后端研发的第六感！ 正文 示例，有个系统，前…
阅读更多...
【深度强化学习】(6) PPO 模型解析，附Pytorch完整代码

【深度强化学习】(6) PPO 模型解析，附Pytorch完整代码

大家好，今天和各位分享一下深度强化学习中的近端策略优化算法（proximal policy optimization，PPO），并借助 OpenAI 的 gym 环境完成一个小案例，完整代码可以从我的 GitHub 中获得： https://gith…
阅读更多...
泰克信号发生器特点

泰克信号发生器特点

泰克信号发生器是一种用于产生各种类型的电子信号的仪器，可以广泛应用于电子、通信、自动化、医疗等领域。泰克信号发生器具有以下特点：多种信号类型：泰克信号发生器可以产生多种类型的电子信号，包括正弦波、方波、三角波、脉冲等…
阅读更多...
TitanIDE：云原生开发到底强在哪里？

TitanIDE：云原生开发到底强在哪里？

原文作者：行云创新技术总监 邓冰寒 引言 是一种新的软件开发方法，旨在构建更可靠、高效、弹性、安全和可扩展的应用程序。与传统的应用程序开发方式不同，云原生是将开发环境完全搬到云端，构建一站式的云原生开发环境。云原生的开…
阅读更多...
PWM互补输出，以及死区时间计算

PWM互补输出，以及死区时间计算

本文基于野火例程进行解说 实验内容 本次实验输出一对互补的pwm波，且进行死区时间的计算说明。 代码 互补输出对应的定时器初始化代码： bsp_advance_tim.c /********************************************************************************* fi…
阅读更多...
【YOLO】YOLOv8训练自定义数据集（4种方式）

【YOLO】YOLOv8训练自定义数据集（4种方式）

YOLOv8 出来一段时间了，继承了分类、检测、分割，本文主要实现自定义的数据集，使用 YOLOV8 进行检测模型的训练和使用 YOLOv8 此次将所有的配置参数全部解耦到配置文件 default.yaml，不再类似于 YOLOv5，一部分在配置文件…
阅读更多...
Anaconda 的安装配置及依赖项的内外网配置

Anaconda 的安装配置及依赖项的内外网配置

在分享anaconda 的安装配置及使用前，我们必须先明白anaconda是什么；Anaconda是一个开源的Python发行版本。两者区别在于前者是一门编程语言，后者相当于编程语言中的工具包。 由于python自身缺少numpy、matplotlib、scipy、scikit-learn等一系…
阅读更多...
Java中的深拷贝和浅拷贝

Java中的深拷贝和浅拷贝

目录 🍎引出拷贝 🍎浅拷贝 🍎深拷贝 🍎总结 引出拷贝 现在有一个学生类和书包类，在学生类中有引用类型的书包变量： class SchoolBag {private String brand; //书包的品牌private int size; //书…
阅读更多...
最新文章

Copyright @ 2022~2023