小程序之移花宫-自定义底部标签图标---【浅入深出系列005】

这篇具有很好参考价值的文章主要介绍了小程序之移花宫-自定义底部标签图标---【浅入深出系列005】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信目录集链接在此:

详细解析黑马微信小程序视频–【思维导图知识范围】 难度★✰✰✰✰

不会导入/打开小程序的看这里:参考

让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】

本系列校训

用免费公开视频,卷飞培训班哈人!打死不报班,赚钱靠狠干!
只要自己有电脑,前后项目都能搞!N年苦学无人问,一朝成名天下知!

学习资源的选择

黑马程序员微信小程序开发前端教程_零基础玩转微信小程序(130集)
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下:

P303-微信小程序的环境准备08:21 00:00 到 05:16 获取APPid, 后面下载开发工具。

学习目标

让自己的小程序与众不同
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
远看这不就是几个图标?近了一看这确实就是几个图标。

知识点

tabBar 是一个很怪的分级,在官方的文档里不属于任何一块。
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
搜索也没有任何的说明
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
但是事实上,几乎是任何一个小程序都要tabBar这个组件。

tabBar

什么是 tabBar
tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。小程序中通常将其分为:
底部 tabBar
顶部 tabBar
注意:
tabBar中 只能配置最少 2 个、最多 5 个 tab 页签(3-4个这种是最常见的)
当渲染顶部 tabBar 时,不显示 icon,只显示文本
如图:
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序

用轮播来实现顶部的tabBar

因为如果在顶部要做成tabBar 的样子,完全可以用swiper 来实现
就是轮播,这样还有一个滑动的效果,效果更棒。而且跟底部的 tabBar 也不会冲突。
如下图。
不过这种实用的技巧 会在小程序花园的系列里讨论。毕竟浅入深出系统主要还是用来入门的。
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序

图标的注意事项

对于WEB比较熟悉的同鞋可以转身离开了。因为微信小程序的图标跟WEB页的菜单的图标确实很像,技术也比较接近。
1 最好要PNG格式。
2 最好准备两个颜色(一为你的应用项目的所用颜色,另一为黑白色)
其实呢,也没有人规定必须要这样的设置,你就是设一个红色一个绿色也可以,但是问题是人家商业性的小程序太多了,大家都这样,那你一个初学者,把握不好颜色,UI的设计的时候,往往就是乱搞一气。
3 最好是跟小程序一起打包,不要放服务器,也不要放云空间。这个东西在小程序这里其实就是相当于网站的菜单,如果第一时间显示不出来那是很糟糕的事情。

补:
PNG(Portable Network Graphics),便携式网络图形,是一种采用无损压缩算法的位图格式,支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。
重要的是,他支持alpha–直白一点说就是透明。
“jpg是一种图像文件格式,全称为JPEG(JointPhotographicExpertsGroup),是一种有损压缩格式,能够将图像压缩在很小的储存空间,常见的后缀名为.jpg和.jpeg。

图标资源

阿里图标库 https://www.iconfont.cn/collections/index
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序

打开小程序

小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
并打开app.json
找到tabBar这一段

"tabBar": {
    "color": "black",
    "selectedColor": "#1296db",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "images/icon/shouye1.png",
        "selectedIconPath": "images/icon/shouye.png"
      },
      {
        "pagePath": "pages/getExpress/getExpress",
        "text": "取件",
        "iconPath": "images/icon/qujian1.png",
        "selectedIconPath": "images/icon/qujian.png"
      },
      {
        "pagePath": "pages/goExpress/goExpress",
        "text": "寄件",
        "iconPath": "images/icon/jijian1.png",
        "selectedIconPath": "images/icon/jijian.png"
      },
      {
        "pagePath": "pages/post/post",
        "text": "驿站",
        "iconPath": "images/icon/yizhanxiangqing_o1.png",
        "selectedIconPath": "images/icon/yizhanxiangqing_o.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "images/icon/renwu1.png",
        "selectedIconPath": "images/icon/renwu.png"
      }
    ]
  },

注意看这里。
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
这表示这是一个对象,里面有四个属性,分别为pagePath,text,iconPath,selectedIconPath
而“:”号后面就是他们的值。

动手实践

找到图标

将鼠标称动到 "images/icon/renwu1.png" 上面,然后左手按ctrl按键,鼠标一点击,小程序平台就会帮助跳转到这个图片上面。
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
再用鼠标,指到资源管理器里的这张图片的位置,右击鼠标。
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
选择 “在资源管理器中显示”(要注意的是这里的资源管理器是指windows自带的)苹果本的自行对比吧。我的苹果本其实太老了。为了几个菜单去搞一个程序有点太麻烦了,见谅了。不过整体布局是一致的。
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序

最简单,最无赖的手段

阿里图标库 https://www.iconfont.cn/
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
直接下载,然后覆盖原来的文件。不过,有一些图标支持选择灰度值,有一些选择了之后就。
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
先不要管这个小细节,后面再处理。

小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
回到小程序开发者平台里 重新编译
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序

使用photoshop 大法

不会美工的程序员不是一个好厨子。所以,PS的简单操作还是要会的。
这个功能比较简单,所以就随便搞个绿色版就行了。
要注意的是,扔进去的是彩的。你要是把那一团黑的扔进去,还能画个123来,那你直接就去当美工吧。
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
直接将饱合度降成-100
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序
这灰度,简直就是完美。
另存为,替换之!

最后如图:
小程序之移花宫-自定义底部标签图标---【浅入深出系列005】,微信小程序,小程序,微信小程序

图7:改好代码之后的样子
一般来说,window与tabBar对人的眼睛冲击最大。修改起来也是最简单。
可以说,不需要任何的电脑编程知识(当然,你还是要会键盘鼠标等操作,学习不是抬杠)
配套资源的PNG资源也可以自行百度PNG,只要熟练使用PS就可以处理了。这样图标就更加的灵活,更加的多样。

配套资源

让自己的小程序鹤立鸡群—【浅入深出系列005】配套资源
PNG资源
http://3png.com/a-13434696.html文章来源地址https://www.toymoban.com/news/detail-604120.html

到了这里,关于小程序之移花宫-自定义底部标签图标---【浅入深出系列005】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Docker由浅入深(一)

    容器化技术介绍 介绍容器化之前,我们得先知道,为什么会出现容器化,容器化之前都经历了什么 物理机时代 部署非常慢 成功很高 浪费资源 难于扩展与迁移 受制于硬件 虚拟化时代 在同一个物理机上安装多个虚拟机,每个虚拟机安装操作系统和应用, 虚拟机之间物理资源

    2024年02月03日
    浏览(55)
  • 由浅入深了解HashMap源码

           由经典面试题引入,讲解一下HashMap的底层数据结构?这个面试题你当然可以只答,HashMap底层的数据结构是由(数组+链表+红黑树)实现的,但是显然面试官不太满意这个答案,毕竟这里有一个坑需要你去填,那就是在回答HashMap的底层数据结构时需要考虑JDK的版本,因

    2023年04月13日
    浏览(46)
  • 由浅入深Netty代码调优

    序列化,反序列化主要用在消息正文的转换上 序列化时,需要将 Java 对象变为要传输的数据(可以是 byte[],或 json 等,最终都需要变成 byte[]) 反序列化时,需要将传入的正文数据还原成 Java 对象,便于处理 目前的代码仅支持 Java 自带的序列化,反序列化机制,核心代码如

    2024年02月05日
    浏览(46)
  • 【个人笔记】由浅入深分析 ClickHouse

    项目中不少地方使用到ClickHouse,就对它做了一个相对深入一点的了解和研究。并对各种知识点及整理过程中的一些理解心得进行了汇总并分享出来,希望对其他同学能有帮助。 本文主要讲解ClickHouse的特点、读写过程、存储形式、索引、引擎、物化视图等特性。 适合 入门和

    2024年01月20日
    浏览(47)
  • 浅入深出的微前端MicroApp

    本文是由最近做的一个项目有感而发,因为之前做了一些技术栈的统一,为了用ant Design的pro-table,PC统一使用react,但是我们有一些老的项目是vue的,本次新页面较多,老页面的改动较少,除此之外老项目想换菜单,因此我们想借助本次机会用react开发,经过了几番思考,发现

    2024年02月08日
    浏览(29)
  • React - redux 使用(由浅入深)

    中文文档: http://www.redux.org.cn/ 英文文档: https://redux.js.org/ Github: https://github.com/reactjs/redux 可直接参照 目录十 进行使用 react-redux redux 是一个专门用于做状态管理的JS库(不是react插件库)。 它可以用在 react, angular, vue 等项目中, 但基本与 react 配合使用。 作用: 集中式管理 re

    2024年02月07日
    浏览(54)
  • 由浅入深理解C#中的事件

    本文较长,给大家提供了目录,可以直接看自己感兴趣的部分。 前面介绍了C#中的委托,事件的很多部分都与委托类似。实际上,事件就像是专门用于某种特殊用途的简单委托,事件包含了一个私有的委托,如下图所示: 有关事件的私有委托需要了解的重要事项如下: 1、事

    2024年02月03日
    浏览(44)
  • 【由浅入深学习MySQL】之索引进阶

    本系列为:MySQL数据库详解,为千锋资深教学老师独家创作 致力于为大家讲解清晰MySQL数据库相关知识点,含有丰富的代码案例及讲解。如果感觉对大家有帮助的话,可以【关注】持续追更~ 文末有本文重点总结,技术类问题,也欢迎大家和我们沟通交流! 从今天开始本系列

    2024年02月05日
    浏览(45)
  • 手拉手Vue组件由浅入深

    组件 (Component) 是 Vue.js 最强大的功能之一,它是html、css、js等的一个聚合体,封装性和隔离性非常强。 组件化开发:     1、将一个具备完整功能的项目的一部分分割多处使用     2、加快项目的进度     3、可以进行项目的复用 组件注册分为:全局注册和局部注册 目录

    2024年01月18日
    浏览(46)
  • 由浅入深介绍 Python Websocket 编程

    1.1 websocket 协议简介 Websocket协议是对http的改进,可以实现client 与 server之间的双向通信; websocket连接一旦建立就始终保持,直到client或server 中断连接,弥补了http无法保持长连接的不足,方便了客户端应用与服务器之间实时通信。 适用场景 html页面实时更新, 客户端的html页面

    2024年02月03日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包