【小程序项目开发-- 京东商城】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

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



相关文章
|
7天前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
7天前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
7天前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
|
7天前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面
|
11天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
165 7
|
10天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
165 1
|
11天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
34 9
|
14天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
84 1
|
15天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
205 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
20天前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
75 0
uniapp一个人开发APP关键步骤和考虑因素