《微信小程序-进阶篇》组件封装-Icon组件的实现（一）_微信小程序icon组件

大家好，这是小程序系列的第九篇文章，从这篇开始我们将进入提高篇，在这一个阶段，我们的目标是可以较为深入的了解组件化开发，并且实践积累一些后续项目也就是原神资料站中用得着的组件：
1.《微信小程序-基础篇》带你了解小程序中的生命周期（一）
2.《微信小程序-基础篇》带你了解小程序中的生命周期（二）
3.《《微信小程序-基础篇》小程序中的事件与冒泡
——
求关注，求收藏，求点赞，这是一个系列文章，建议专栏收藏，肯定分享的都是跟小程序相关的，旨在能提高在小程序中的能力，谢谢～
——
无锡疫情怎么加重了，这大热天的，医护和志愿者有点辛苦啊，加油，早日清零～

前言

从这篇开始，我们将逐步开始进入 提高篇，我感觉小程序的基础内容分享的差不多了，之前分享的这些都是小程序基础中的基础，如果不了解那些，那小程序的开发我们几乎无从下手；
从这篇开始，我们就不再干分享那些枯燥的，太基础的知识点了，虽然还会有很多基础知识在后续进行分享，但是我个人期望是遇到实际问题后才进行的，毕竟 实际遇到的问题并解决了才会让人更容易记住～

阅读对象与难度

本文难度属于：初级，适合 了解完小程序基础知识的小伙伴，Icon组件分为 上下两篇，本文主讲Icon组件的准备阶段，包括 字体源文件的来源，如何安装加进小程序，因为和web端不同，小程序中的字体文件引入还是有些小问题的，本文大致思维导图如下

Icon组件

简介

可能有很多小伙伴不大理解，为什么这个系列第一个组件会选择 Icon组件，说下理由吧，不知道小伙伴有没有看到过 其他的一些UI库，比如Element，比如Iview，再比如ant-design等等，这些组件库里面有许多的组件，很多组件里面都存在一个图标的功能，比如：

对于这些ICON的使用，其实在源码里都是借助于内部的 ICON的组件 复合实现的；所以，为了我们后续一些组件的实现，我也得先 封装一个ICON的组件以作复用；

需求

我们的ICON组件可能 不需要商用级的复杂程度，但是该有的功能还是必须都要有的，初版主要属性一共 有三个，由于我们没有直接的业务需求来源，因此博主直接参考了一些web端的组件库需求并整理了一下：

期望属性

期望用法

组件开发完后肯定是要被使用的，那么使用者 如何使用需要在开发前就要有一个预期，比如我们这个 icon组件，我们期望写完后用户是这么使用的

// 组件用法
<t-icon icon="user" color="#999999" size="30"/>
1
2

字体文件

既然是一个Icon组件，那么 图标文件 肯定这个 组件中最核心的东西，这里我推荐一个字体文件库：阿里的iconfont，这是一个 免费的字体文件库，地址在这里：阿里Iconfont，虽然前段时间好像维护了一下，耽误了点，但目前而言我还是觉得是一个相对非常不错的，当然除此之外还有 飞书的 等等；
其实不仅仅是组件，相信 实际小程序的开发中中多多少少肯定会用到图片资源，而字体文件的使用也一定会被用到；

转化（非必需）

本文中使用的字体文件源包暂时没有上传，有兴趣的小伙伴可以自行到iconfont上下载下来自己试试，或者留下邮箱联系博主，我看到后第一时间联系发送；

如何在小程序中使用Iconfont可以自行到CSDN上搜一下，我搜了一下有好多种方法，这里我就仅仅列一下我用的方法：

我喜欢 将字体文件包中的.ttf文件转成css，直接放在.wxss或者.scss文件中，具体步骤如下：

• 解压下载后的压缩包，iconfont上下载下来的安装包，通常下载下来的安装包名字为download，解压后会有一堆文件，如下：
  

• 这个文件并不能直接被使用，需要经过转化，转成Base64的代码，转化需要使用到一个网站，叫做：transfonter，官网地址如下：transfonter.org，打开后，选择上一步中的这个 .ttf文件
  

• 修改转化配置，勾选TTF选项，然后打开 Base64 encode；
  

• 点击 “convert”，执行转化，转换成功后，下方会出现一个下载按钮，之后点击 "Download" 进行下载；
  

• 解压下载的安装包，其中有一个叫做 stylesheet 的css文件，这个文件就是我们转换过后的所需的文件；
  

• 复制全部内容加入小程序中 icon组件的·.wxss或者.scss之类的样式文件中，这段代码就是转码成base64格式的字体文件，并修改 font-family 为 t-iconfont，这个属性用于关联默认属性；
  

• 源文件虽然加上去了，但是现在 还不能直接使用，还需要加一点点样式，在icon.scss文件（.wxss文件）中加上以下代码

.t-icon {
  font-family: 't-iconfont';
  font-size: 38rpx;
  color: #333333;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale
}
1
2
3
4
5
6
7
8

这段代码的作用有两个：

1. 第一个：指定了字体文件 默认的大小 和 颜色，我们在期望属性中有写到，期望尺寸默认为38rpx，默认颜色为#333333；
2. 第二个：通过font-familt关联上面字体文件的源码，比如这边的关联通过的是t-iconfont这个属性，翻看上一条，我们已经修改过base64的font-family了

• 接着，打开iconfont中的iconfont.css文件，将其中红框部分的代码拷贝进小程序的样式文件中，如下：
  
  拷贝完后的小程序.wxss或者.scss文件内容如下：
  
  到这里，字体文件也就全部导入小程序了

配置

想要在组件内部使用，还需要一步配置一个 externalClasses 与 addGlobalClass（官网地址如下：组件模版和样式），大致代码如下：

// TElement/Icon/icon.ts
Component({
  externalClasses: ["t-class"],
  options: {
    addGlobalClass: !0
  },
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {
  },
  /**
   * 组件的方法列表
   */
  methods: {

  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

这样配置就完成了，后面可以直接使用了；

示例使用

由于上面我们已经完全配置完成了，这边就可以直接使用了，以 加载中 图标为例

<!--TElement/Icon/icon.wxml-->
<view class="t-class t-icon icon-jiazai"></view>
1
2

示例组件写完后，那么我们必须要 导入到小程序页面中查看

<!--pages/welcome.wxml-->
<t-icon></t-icon>
1
2

效果如下：

图标正常显示，这就代表我们的导入与配置是成功的，下一节将实现Icon组件的具体功能编写；

小结

本文主要讲述了 Icon组件的准备阶段，通过本文知道 字体源文件可以从iconfont等免费的网站上来获取，这些网站的存在极大的便捷了我们这些开发者对于素材的整理与收集，另外，本文还具体的描述了如何将iconfont上下载下来的源文件安装加入小程序，虽然步骤比较多，也不是最优的方法，但是我感觉这种方法相对还是比较靠谱的；
PS：都已经看到这了，求关注，求点赞，求收藏，我会尽快更新分享下一章节的，谢谢～