【小程序项目开发-- 京东商城】uni-app开发之配置 tabBar & 窗口样式

简介: 【小程序项目开发-- 京东商城】uni-app开发之配置 tabBar & 窗口样式

专栏内容

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

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

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

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

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

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

✨-- 京东商城uni-app 商品分类页面(上) --✨

✨-- 京东商城uni-app 商品分类页面(下) --✨

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

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

文章目录

一、新建tabBar分支(选读*)

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

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

根目录下,右键打开bash

基于 master 分支在本地创建 tabBar 子分支,用来开发和 tabBar 相关的功能:

  • 创建新分支tabbar且跳转到该分支
git checkout -b tabbar

查看分支(前面有*代表着当前分支)

git branch

图片.png

二、创建 tabBar 页面

在HBuilderX 依次创建页面

🎏home

🎏cate

🎏cart

🎏my

图片.png

图片.png

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

  • uni-app 与 微信小程序开发工具文件区别:
  1. 在pages中每个页面也没有 对应的四个文件 .wxss,.wxml,.json,.js
  2. 在这里则是以vuetemplate 代替 .wxml ``style代替.wxssscript代替.js, .json配置则在page.json每个页面的style配置

图片.png

图片.png

三、配置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"
      }
    ]
  }

效果(这是图标素材,自己配置,只需要放自己的图片即可):

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

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

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

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

图片.png

效果:

图片.png

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

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

  1. 每个页面的json配置都在pages.json的页面节点的style配置,这是局部配置(页面配置) ,
    2.全局配置(应用配置),在小程序开发工具中在 app.json中配置windows节点即可,而uni-app则需要在pages.json文件中globalStyle节点配置即可(全局风格)
    图片.png
    其修改样式属性没有变化,只是配置的方式不同

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

如:

图片.png

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

 "navigationBarTitleText": "窗口主题",

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

图片.png

效果

图片.png

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

在项目根目录下打开bash

分别运行

  • 添加到缓存区
git add .
  • 添加到仓库
git commit -m "tabbar 分支"
  • 查看状态
git status
  • 推送到码云gitee 仓库 ( 由于是第一次提交 加上-u
git push -u origin tabbar

成功上传

图片.png

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

图片.png

  • 本地的tabbar分支 合并到主分支 master (注意:要切换到主分支)
git checkout master   注释: 切换到主分支,不切换就是合并到tabbar分支了
git merge tabbar  注释: merge 合并分支

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

git push 

成功

图片.png

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

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

git branch -d tabbar

删除成功

图片.png

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



相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
3天前
|
小程序 云计算 Android开发
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
发者社区 云计算 文章 正文 小程序开发与公众号用户关联推送消息(九)
16 3
|
9天前
|
小程序
|
30天前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
203 3
|
1月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
48 0
微信小程序更新提醒uniapp
|
3月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
104 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
小程序 前端开发 JavaScript
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
【避坑宝】是一款企业黑红名单吐槽小程序,旨在帮助打工人群体辨别企业优劣。该平台采用SpringBoot+MybatisPlus+uniapp+uview2等技术栈构建,具备丰富的注释与简洁的代码结构,非常适合实战练习与学习。通过小程序搜索“避坑宝”即可体验。
100 0
【项目实战】SpringBoot+uniapp+uview2打造一个企业黑红名单吐槽小程序
|
3月前
|
存储 小程序 JavaScript
|
4月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
62 7