【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)

简介: 【微信小程序】-- uni-app 项目--- 购物车 -- 配置 tabBar 效果(五十一)



一、配置 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-namegit 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 tabBargit 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.jsonindex 页面删除或者把 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 效果的介绍使用,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

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

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

相关文章
|
12天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
10天前
|
移动开发 监控 供应链
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
一开始接触MES系统,很多人会和博主一样,对MES细节的应用不了解,这样很正常,因为MES系统相对于其他系统来讲应用比较多!
26 1
JAVA智慧工厂制造生产管理MES系统,全套源码,多端展示(app、小程序、H5、台后管理端)
|
12天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
19 1
|
12天前
|
小程序 开发者
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录 已解决
【微信小程序】微信开发者工具 app.json: [“subpackages“][0][“root“] 字段需为目录 已解决
18 0
|
12天前
|
移动开发 小程序 前端开发
使用uni-app开发(h5、小程序、app)步骤
使用uni-app开发(h5、小程序、app)步骤
|
12天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
12天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
12天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
12天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
2天前
|
小程序 API 数据安全/隐私保护
微信小程序开发中的一些常用标签
这些标签是微信小程序开发中的基础,开发者可以根据需要组合使用这些标签来构建小程序的界面。每个标签都有其属性和事件,可以通过属性来调整组件的样式和行为,通过事件来响应用户的操作。
15 5

热门文章

最新文章