【小程序项目开发-- 京东商城】uni-app开发之配置 tabBar & 窗口样式一、新建tabBar分支（选读*）二、创建 tabBar 页面三、配置tabbar效果四、配置选中颜色和未选中颜色五、修改窗口顶部样式效果六、tabbar分支的提交与合并（同第一节内容，选读*)

👋👋欢迎来到👋👋

🎩魔术之家！！🎩

该文章收录专栏

✨-- 2022微信小程序京东商城实战 --✨

专栏内容

✨-- 京东商城uni-app项目搭建 --✨

✨-- 京东商城uni-app 配置tabBar & 窗口样式 --✨

✨-- 京东商城uni-app开发之分包配置 --✨

✨-- 京东商城uni-app开发之轮播图 --✨

✨-- 京东商城uni-app之分类导航区域 --✨

✨-- 京东商城uni-app 首页楼层商品 --✨

✨-- 京东商城uni-app 商品分类页面（上） --✨

✨-- 京东商城uni-app 商品分类页面（下） --✨

✨-- 京东商城uni-app之自定义搜索组件（上） --✨

✨-- 京东商城uni-app之自定义搜索组件（中） --✨

文章目录

一、新建tabBar分支（选读*）
二、创建 tabBar 页面
三、配置tabbar效果
四、配置选中颜色和未选中颜色
五、修改窗口顶部样式效果
六、tabbar分支的提交与合并（同第一节内容，选读*)

一、新建tabBar分支（选读*）

之所以为了创建分支，也是养成良好的项目开发习惯，这样在开放项目井井有条

也可以跳过本节内容，不影响阅读观感🌹

在根目录下，右键打开 bash 基于 master 分支在本地创建 tabBar 子分支，用来开发和 tabBar 相关的功能：

创建新分支tabbar且跳转到该分支

git checkout -b tabbar

复制

查看分支（前面有*代表着当前分支）

git branch

复制

二、创建 tabBar 页面

在HBuilderX 依次创建页面

🎏home

🎏cate

🎏cart

🎏my

在 pages.json 文件可以看到页面配置, 然后删除index页面文件和相应配置,

uni-app 与微信小程序开发工具文件区别：

在pages中每个页面也没有对应的四个文件 .wxss,.wxml,.json,.js
在这里则是以 vue 中 template 代替 .wxml ``style 代替 .wxss ， script 代替 .js , .json 配置则在 page.json 每个页面的 style 配置

三、配置tabbar效果

放入我们的 static （存放静态资源文件，如我们需要的图标）文件，替换源目录的 static 文件
修改根目录的 pages.json 配置文件，新增节点tabBar配置如下：

"tabBar": {
    "list": [{
        "pagePath": "pages/home/home",
        "text": "home",
        "iconPath": "./static/tab_icons/home.png",
        "selectedIconPath": "./static/tab_icons/home-active.png"
      },
      {
        "pagePath": "pages/cate/cate",
        "text": "cate",
        "iconPath": "./static/tab_icons/cate.png",
        "selectedIconPath": "./static/tab_icons/cate-active.png"
      },
      {
        "pagePath": "pages/cart/cart",
        "text": "cart",
        "iconPath": "./static/tab_icons/cart.png",
        "selectedIconPath": "./static/tab_icons/cart-active.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "my",
        "iconPath": "./static/tab_icons/my.png",
        "selectedIconPath": "./static/tab_icons/my-active.png"
      }
    ]
  }

复制

效果（这是图标素材，自己配置，只需要放自己的图片即可）：

图标素材库：https://icons8.com/icons/set/find-job

四、配置选中颜色和未选中颜色

只需要在page.json中的tabbar节点设置两个属性即可

"tabBar": {
    "selectedColor": "#ff3007",
    "color": "#efefef"
    
     "list": [{
         ......
      },
    
    }

复制

且非常好用的可以看到对应的颜色

效果：

五、修改窗口顶部样式效果

在上文也已看到，小程序开发工具开发与 uni-app开发的区别，

每个页面的 json 配置都在 pages.json 的页面节点的 style
配置，这是局部配置（页面配置），

2.全局配置（应用配置），在小程序开发工具中在
app.json 中配置 windows 节点即可，而在 uni-app 则需要在 pages.json 文件中 globalStyle 节点配置即可(全局风格）

其修改样式属性没有变化，只是配置的方式不同

可以讲鼠标停留在属性上，uni-app非常实用的提醒你用法和作用

如：

如果此时设置的主题样式没有效果

"navigationBarTitleText": "窗口主题",

复制

则是因为你在页面配置中覆盖了，局部配置会覆盖全局配置

效果

六、tabbar分支的提交与合并（同第一节内容，选读*)

在项目根目录下打开

bash

分别运行

添加到缓存区

git add .

复制

添加到仓库

git commit -m "tabbar 分支"

复制

查看状态

git status

复制

推送到码云gitee 仓库（由于是第一次提交加上 -u ）

git push -u origin tabbar

复制

成功上传

可以看到修改过文件会显示 tabbar分支完成

将本地的tabbar分支合并到主分支 master （注意：要切换到主分支）

git checkout master   注释： 切换到主分支，不切换就是合并到tabbar分支了
git merge tabbar  注释： merge 合并分支

复制

合并之后本地仓库的master 已经更新，此时需要上传更新的master分支（默认上传到origin master

git push

复制

成功

删除本地的tabbar，此时tabbar已经完成使命，对其进行删除内存释放（需要看代码可以去远程仓库去看）。

删除某个分支，应该先跳出被删除的分支 (delete)

git branch -d tabbar

复制

删除成功

✨谢谢你的阅读，您的点赞和收藏就是我创造的最大动力！✨

复制