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

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

前言

上两篇我们分析了在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";
  // 图标大小默认的尺寸是40rpx
  font-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：都已经看到这里了，点个赞，求个关注吧，万分感谢～)