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

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



相关文章
|
22天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
419 1
|
8天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
6天前
|
机器人
布谷直播App系统源码开发之后台管理功能详解
直播系统开发搭建管理后台功能详解!
|
15天前
|
NoSQL PHP Redis
布谷语音app源码服务器环境配置及技术开发语言
布谷语音app源码服务器环境配置及技术语言研发。。
|
22天前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
239 0
|
23天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
341 7
|
1月前
|
JavaScript 前端开发 小程序
uniapp一个人开发APP关键步骤和考虑因素
uniapp一个人开发APP关键步骤和考虑因素
96 1
uniapp一个人开发APP关键步骤和考虑因素
|
23天前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
49 9
|
26天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
137 1
|
27天前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
431 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机

热门文章

最新文章