uni-app 黑马优购项目学习记录（二）
2. tabBar
2.1 创建 tabBar 分支
运行如下的命令，基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能：
2.2 创建 tabBar 页面
在 pages 目录中，创建首页(home)、分类(cate)、购物车(cart)、我的(my) 这 4 个 tabBar 页面。在 HBuilderX 中，可以通过如下的两个步骤，快速新建页面：
在
pages目录上鼠标右键，选择新建页面在弹出的窗口中，填写**页面的名称**、勾选 `scss` 模板之后，点击创建按钮。截图如下：
2.3 配置 tabBar 效果
将
资料目录下的static 文件夹拷贝一份，替换掉项目根目录中的static文件夹修改项目根目录中的
pages.json配置文件，新增tabBar的配置节点（与pages配置节点同级）如下：
2.4 删除默认的 index 首页
在 HBuilderX 中，把
pages目录下的index首页文件夹 删除掉同时，把
page.json中记录的index首页 路径删除掉为了防止小程序运行失败，在微信开发者工具中，手动删除
pages目录下的index首页文件夹同时，把
components目录下的组件文件夹删除掉
2.5 修改导航条的样式效果
打开
pages.json这个全局的配置文件修改
globalStyle节点如下：
2.6 分支的提交与合并
将本地的
tabbar分支进行本地的commit提交：
将本地的
tabbar分支推送到远程仓库进行保存：
将本地的
tabbar分支合并到本地的master分支：
更新码云仓库代码
因为新的代码我们推到了
tabbar分支里面，master分支里的代码我们还没有更新，可运行以下代码进行更新：
删除本地的 tabbar 分支：
版权声明: 本文为 InfoQ 作者【海底烧烤店ai】的原创文章。
原文链接:【http://xie.infoq.cn/article/3fca1e6df73a4710c4b5b3ff2】。文章转载请联系作者。
前端之行，任重道远！ 2022.08.25 加入
本科大三学生、CSDN前端领域新星创作者、华为云享专家、第十三届蓝桥杯国赛三等奖获得者
评论