首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2.1 icon组件介绍,及如何自定义实现图标?(视频)

2.1 icon组件介绍,及如何自定义实现图标?(视频)

作者头像
LIYI
发布2020-05-22 18:32:17
1.2K0
发布2020-05-22 18:32:17
举报
文章被收录于专栏:艺述论专栏艺述论专栏

小程序原生的icon组件,只支持不到10个类型,那么如果我们需要更多的类型怎么办?如何实现图标的自定义?在阿里巴巴的图标网站上,有上百种甚至更多个图标,都是可以免费使用的,我们可以把这些图标用于小程序当中吗?答案肯定是可以的。

有人说图标不够用,可以直接使用图片。

使用图片也是可以的,但是这会有三个问题。一,图片在文本里面不方便布局;二,图片不能伸缩,放大之后会变虚有锯齿;三,图片需要在本地或网络上存储,使用起来不如图标只使用一个名称那么方便。

这节课我们就看一看,如何自定义实现图标,再了解一下自定义图标都有哪些方案。

//developers.weixin.qq.com/miniprogram/dev/component/icon.html<icon type="success" size="30px" color="green" />type类型范围:'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'

片2

我们看一下,上面是微信小程序官方 icon 组件的文档网址。下面是这个组件的示例代码。这个组件属性是很简单的,一共只有三个属性:

1,type表示图标类型,目前只支持9种。

2,size表示大小,支持两种单位,rpx与px。如果值是数值类型,就是在默认使用px单位。rpx 是responsive pixel的简写,是屏幕自适应单位。rpx把屏幕分为750个单位,每个单位是1/750。在iPhone6机器上,屏幕宽度是350px,那么每个rpx就等于0.5个pixel。在iPhone6机器上,如果将size的值设置为60rpx,和30或30px,效果是一样的。

3,color是颜色样式,和css里面的color值定义是一样的

这里有一个关于color属性的问题需要注意,当我们改变一个图标的颜色时,我们改变的是什么呢?

改变的其实是它的所有像素的颜色。因为本质上图标它是一个像素的结合,为了更好的说明这个问题,我们看一段代码。

<icon type="success" size="100rpx"/><icon style="background:grey;" type="success" size="100rpx"/>

片3

上面是代码,下面是运行效果。第一行代码,当我们没有给组件设置背景样式的时候,图标中间那个对勾是白色的,但其实这个白色不是图标的颜色。第2行代码,当我们设置了背景颜色为灰色时,我们看到那个中间的对勾变成了灰色。也就是说,图标它中间那个部分是镂空的,我们说color改变的是图标所有像素的颜色,其中是不包括中间镂空的那个部分的。

接下来我们看相关问题。

1,图标能否与文本同行,放在一个段落中?

片4

这是开发者社区上的一个问题,答案是可以的。图标之所以作为一个独立的组件存在,就是方便它和文本放在一起布局。具体的代码及运行效果,可以查看这节课的源码。

2,自定义实现icon图标的方案有哪些,原理是什么?

片5

在html中是没有icon标签的,小程序基于浏览器引擎渲染,那么它的icon组件是怎么实现的呢?

简单总结一下,大概有五个方案

第一种方案,使用图片。这是最简单粗暴的方法,每个图标对应一个图片。但是这种方法有三个明显的缺点:一,如果图标多的话,会造成大量http请求;二,不方便修改颜色;三,图标放大会变虚。

第二种方案,使用精灵图。

什么是精灵图?

这是一个字译。精灵图的英文叫Sprites,Sprite有精灵的意思,所以翻译成中文就是精灵图了。更确切的意译,应该是连续图片集。

精灵图是把一组图片以非重叠、最小化分布的方式,排列成一张图片,在加载的时候只加载一次,这就减少了http请求。

片6

看一下,这就是一张精灵图。它的信息描述的是一个爆炸效果,通过控制每次显示的纵横起点坐标及区域大小,就可以展示一个爆炸动画了。将这种技术应用于图标也是可以的。

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-05-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 艺述论 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档