大家好，这是小程序系列的第十六篇文章，在这一个阶段，我们的目标是 由简单入手，逐渐的可以较为深入的了解组件化开发，从本文开始，将记录分享lin-ui的源码分析，期望通过对lin-ui源码的学习能加深组件化开发的能力：
1.《微信小程序-进阶篇》Lin-ui组件库的安装与引入
2.《微信小程序-进阶篇》Lin-ui组件库源码分析-Button组件（一）
3.《微信小程序-进阶篇》package.json必须掌握的字段知识（二）
——
求关注，求收藏，求点赞，这是一个系列文章，建议专栏收藏，肯定分享的都是跟小程序相关的，旨在能提高在小程序中的能力，谢谢～

《微信小程序-进阶篇》Lin-ui组件库源码分析-Icon组件

前言
阅读对象与难度
Icon组件
- 用法
- - name属性
  - size属性
  - color属性
- 源码分析
- - icon图标
  - name属性
  - size属性和color属性
  - 注意
小结

前言

上两篇我们分析了在Lin-UI中 Button组件 的实现，难度还是可以接受，这一篇主要分析的组件为 Icon组件（如果看过博主的另外一篇：《微信小程序-进阶篇》组件封装-Icon组件的实现（一），那么 本文其实可以跳过，因为当初写的时候就一定程度的参考了Lin-UI中的实现），虽然这个组件的难度与Button接近，但是其 复用度非常高，它承载了组件库中 所有Icon的显示，包括 Button组件，Button组件我们其实在源码中已经看到了Icon组件的引入，它承担了Button组件的3个属性的实现，分别是：icon，icon-size，icon-color，这一篇我们就来看一下Icon组件是如何实现的；

阅读对象与难度

本文难度属于：初级，通过本文你可以了解到 Lin-ui的Icon组件的用法，以及这些对应的用法在其背后是如何实现的，本文主要内容参考以下思维导图：

Icon组件

用法

name属性

通过标签的方式直接在html中引入代码，注意的是 name属性 为 必填属性，其值为对应的图标名，比如想要显示添加的图标那么name值设置为add，如下

<l-icon name="add"/>

效果如下：

size属性

除此之外，Icon组件还有另外两个属性可设置，分别为：size 和 color，size的含义如单词含义就是尺寸，它 控制icon的大小，单位为小程序的官方 默认单位rpx，假设现在要将图标设置成80rpx大小，那么代码如下：

<l-icon name="add" size="30"/>

效果如下：

color属性

最后一个属性为 color，作用是 设置icon的颜色，如果我们要将icon设置成黑色那么代码如下：

<l-icon name="add" size="30" color="#000000"/>

效果图如下：

源码分析

由于icon组件并没有绑定事件，因此可以说组件的 实现几乎完全靠的是CSS以及HTML，其中最复杂的部分应该是icon的导入了；

icon图标

我们先看一下Lin-Ui中icon下的less文件，如下

从中我们可以看出，Lin-UI的做法是将全部图标转成了base64内置在了组件中，这么做的好处就是所有的图片资源已经存在了组件里，用的时候只需要直接使用就行，另外，在图片的上方有一段这种代码：

.l-icon {font-family            : "l-iconfont";font-size              : 40rpx;color                  : @theme-color;font-style             : normal;-webkit-font-smoothing : antialiased;-moz-osx-font-smoothing: grayscale;
}

这段代码是核心，它的作用是 将base64中的字体文件和CSS类名进行了关联，我们进行分析说明一下：

.l-icon {// 关联字体文件，它的值l-iconfont和下方的字体文件中的font-family是相同的font-family            : "l-iconfont";// 图标大小默认的尺寸是40rpxfont-size              : 40rpx;// 默认的颜色color                  : @theme-color;// 默认的大小font-style             : normal;// 抗锯齿，这是一个css3的新特性-webkit-font-smoothing : antialiased;// 火狐浏览器内核的抗锯齿写法，做兼容-moz-osx-font-smoothing: grayscale;
}

大致说明如上，我们可以看到 在css中icon的默认尺寸是40rpx，并且加上了css3中一个叫做 抗锯齿 的新特性；
接下来我们看看属性的实现

name属性

name属性 实际上就是icon在字体文件中的名字，如果不明白什么时候字体文件可以进行搜索一下，通过这个名字可以将字体文件中对应的图标引入到css中，实现代码非常简单，如下

<view class="l-class l-icon {{ name === '' ? '' : 'l-icon-' +  name }}" />

这就一行代码，对name属性做了一个三元表达式的判断，如果存在name属性，就进行一个拼接，加入name的值是add，拼接后的html代码就会变成如下：

<view class="l-class l-icon l-icon-add }}" />

另外，通过这个判断可以见由，所有在字体文件中的icon名都是以 l-icon 开头的，name的值只是拼接上了icon名中缺失的那一部分，一旦补齐了即可显示icon图标；

size属性和color属性

这两个属性的 实现非常接近，因此就放在一起说，在.js文件中的 properties 设置了这两个属性，之后 在template中引用，先看js文件，代码如下：

Component({externalClasses: ['l-class'],options: {addGlobalClass: true},properties: {name: String,color: {type: String,value: '#3963bc'},size: {type: String,value: '40'},},ready: function () {if (!this.properties.name) {console.error('请传入Icon组件的name属性');}},methods: {}
});

我们可以看到，在源码中就是设置了 color 和 size 这2个属性，默认值分为是 默认颜色：#3963bc ，默认尺寸大小：40 ，在看wxml部分

<view style="{{ size ? 'font-size:'+size+'rpx;':''}}{{ color ? 'color:' + color+';' : '' }}" />

和 name属性 一样，通过三元表达式的判断，来确定是否将 font-size 和 color 属性绑定到style属性上，实现就是如此的简单；

注意

值得注意的是，在源码中还有这么一段代码，如下

 ready: function () {if (!this.properties.name) {console.error('请传入Icon组件的name属性');}
},

它代表 name属性 在 icon组件被加载的时候会进行一次检测，如果name属性缺失，组件将会在控制台中输入报错，错误信息为：请传入Icon组件的name属性，这一判断也符合我们上方说的name属性为必传这个操作；

小结

通过本文，我们知道了 在Lin-UI中如何使用icon组件，并且知道了它的几个属性是如何使用，之后我们分析了 icon组件 的源码，看到了它 对应的三个属性的实现，这三个属性其实没有过多的涉及到js的逻辑代码，就只是使用了一个 三元表达式 来进行判断属性是否会被添加，仅此而已～
(PS：都已经看到这里了，点个赞，求个关注吧，万分感谢～)

《微信小程序-进阶篇》Lin-ui组件库源码分析-Icon组件相关推荐

《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
《微信小程序-进阶篇》组件封装-Icon组件的实现（一）
大家好,这是小程序系列的第九篇文章,从这篇开始我们将进入提高篇,在这一个阶段,我们的目标是可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序 ...
《微信小程序-进阶篇》package.json版本说明及各类版本符号详解（一）
大家好,这是小程序系列的第十一篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序-基础 ...
python 自动化微信小程序_干货 | 微信小程序自动化测试最佳实践（附 Python 源码）...
原标题:干货 | 微信小程序自动化测试最佳实践(附 Python 源码) 本文为霍格沃兹测试学院测试大咖公开课<微信小程序自动化测试>图文整理精华版. 随着微信小程序的功能和生态日益完善, ...
基于微信小程序的springboot客运汽车票购票系统源码和论文
在客运公司工作 7 年之余,对客运管理的难度深有感触.特别是在春运期间购票难依旧是长途汽车订票的一大难题.长途汽车和火车的订票管理虽然有差异,但大体上是相同的.长途汽车在售票的过程中需要对旅客的起 ...
微信小程序之授权登录（附完整源码）
个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~ 个人博客地址:http://zwd596257180.gitee.io/blog/2019/04/15/wec ...
微信小程序：云开发表情包制作源码
该款小程序是一个表情包制作内容毕竟丰富,另外自定义制作方面也是特别的自由支持自主上传图片,自定义文章,另外拥有多种素材模板以供选择这是一款云开发的小程序,但是安装还是挺简单的搭建教程: 首先使 ...
微信小程序：笑话与趣图框架源码下载
这是一款以笑话和趣味图为主的一款微信小程序源码或者也可以说是一个框架吧里面的内容是内置在小程序里面的,所以说是一款框架也可以因为内置的内容,所以内容数量有限! 大家可以用来养账号,或者有能力的二 ...
asp.net+sqlserver+微信小程序社区型果蔬配送平台-计算机毕业设计源码11635
摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区型果蔬配送平台小程序被用户普遍使用,为方 ...
springboot基于微信小程序的校园外卖系统毕业设计-附源码091024
Springboot基于微信小程序的校园外卖系统摘要随着生活质量的日益改善以及生活节奏的日益加快,人们对餐饮需求的质量以及速度也随之发生着变化.为了满足社会需求,餐饮的高质量和快节奏也渐渐使电话订 ...

《微信小程序-进阶篇》Lin-ui组件库源码分析-Icon组件

《微信小程序-进阶篇》Lin-ui组件库源码分析-Icon组件

前言

阅读对象与难度

Icon组件

用法

name属性

size属性

color属性

源码分析

icon图标

name属性

size属性和color属性

注意

小结

《微信小程序-进阶篇》Lin-ui组件库源码分析-Icon组件相关推荐

最新文章

热门文章