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

大家好，这是小程序系列的第十篇文章，在这一个阶段，我们的目标是 由简单入手，逐渐的可以较为深入的了解组件化开发，并且实践积累一些后续项目也就是原神资料站中用得着的组件：
1.《微信小程序-基础篇》带你了解小程序中的生命周期（二）
2.《《微信小程序-基础篇》小程序中的事件与冒泡
3.《微信小程序-进阶篇》组件封装-Icon组件的实现（一）
——
求关注，求收藏，求点赞，这是一个系列文章，建议专栏收藏，肯定分享的都是跟小程序相关的，旨在能提高在小程序中的能力，谢谢～
——
希望疫情早日过去～

前言

上一篇我们主要分享了关于 Icon组件前期的准备工作，也就是 字体源文件的来源，如何安装加进小程序 ，了解后其实也并不复杂的，说到底就是从一些免费的网站上 找到字体文件，然后 下载并转换，最后 放进组件库中，只要是能正常显示，那么上一篇的目的就已经达到了；

这一篇我们主要的目的是来实现上一篇中的预期功能，其实也挺简单的，因为不涉及复杂逻辑，我们仅要求组件能按我们的期望进行使用就行～耐心看完，你一定有所收获～

阅读对象与难度

本文难度属于：初级，适合 了解完小程序基础知识的小伙伴，本组件分为 上下两篇，本篇为 下篇，主讲Icon组件的实现阶段，主要实现的功能为预期的三个属性：icon，color，size，完成后的组件得可以被业务页面正常使用，本组件的 主要知识点 在于以下两点：

• 小程序父子组件之间属性的传递；
• 双花括号语法，也就是mustache语法中使用三元表达式进行简单的逻辑处理；

本文大致思维导图如下

Icon组件

属性说明

先来回顾一下我们要实现的三个属性吧，就如上一章所说，分别是：icon，color，size

icon属性

icon属性，这个属性值为一个字符串，当用于显示当前的icon图标，其实我们在上一章中已经有涉及到了这一块，就在这里：

上一章这里是写的静态值，因此只显示加载中的图标，我们需要将静态值换成动态值即可

• 首先要做的肯定是 在Icon组件里添加一个属性icon 了，用于父向子传递消息

// TElement/Icon/icon.ts
Component({
  externalClasses: ["t-class"],
  options: {
    addGlobalClass: !0
  },
  /**
   * 组件的属性列表
   */
  properties: {
    icon:String
  },
})

这样，当我们使用的时候就可以获取到父组件中icon的值

// 获取icon的值
<t-icon icon="jiazai"></t-icon>

• 第二步，获取到之后我们还需要 将对应的值放到html里，由于在小程序的html中可以使用双括号的语法，这也就代表我们可以直接在html中书写简单的判断逻辑，如下

<!--TElement/Icon/icon.wxml-->
<view class="t-class t-icon {
    {icon===''?'':'icon-'+icon}}"></view>

对比一下原来的静态的代码

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

最大的区别只是将icon-jiazai这个类名中的jiazai改为了从属性获取，测试一下

没问题，可以正常显示

color属性

color属性，这个属性的 主要目的是能修改图标的颜色，根据需求默认是#333333，那么其实是同样的，默认 接收一个string类型的值作为参数，并且默认值是#333333

• 第一步，在icon.ts文件中加上属性color，用于父子组件之间的属性传递

// TElement/Icon/icon.ts
Component({
  externalClasses: ["t-class"],
  options: {
    addGlobalClass: !0
  },
  /**
   * 组件的属性列表
   */
  properties: {
    icon:String,
    color:{
      type:String,
      default:"#333333"
    }
  },
})

• 第二步，修改icon.wxml中的html部分，利用html的style属性，为其添加上css中color的值

<!--TElement/Icon/icon.wxml-->
<view 
      class="t-class t-icon {
    {icon===''?'':'icon-'+icon}}" 
      style="{
       {
        color ? 'color:' + color+';' : '' }}">
</view>

注意是的，这里我们利用的是 原生CSS的style属性，因此style中color支持的组件都是支持的，比如

// 属性1
<t-icon icon="more" color="#e1e1e1"></t-icon>

// 属性2
<t-icon icon="more" color="red"></t-icon>

最后，测试一下

size属性

size属性，主要设置icon图标的大小，根据需求默认是38rpx，接收的 类型是一个字符串 ，是不是发现和上面的color属性很相像…其实原理是一样的，再来一次

• 首先，在icon.ts文件中加入size属性，默认值为38;

// TElement/Icon/icon.ts
Component({
  externalClasses: ["t-class"],
  options: {
    addGlobalClass: !0
  },
  /**
   * 组件的属性列表
   */
  properties: {
    icon:String,
    color:{
      type:String,
      default:"#333333"
    },
    size:{
      type:String,
      default:"38"
    }
  },
})

• 第二步：修改.wxml中的样式，同样利用CSS的原生属性style以及双花括号语法；

<!--TElement/Icon/icon.wxml-->
<view 
      class="t-class t-icon {
    {icon===''?'':'icon-'+icon}}" 
      style="{
       {
        color ? 'color:' + color+';' : '' }}{
       {
        size ? 'font-size:' +size+'rpx;' : '' }}">
</view>

最后再测试一下

没有问题，符合需求

小结

在本文中，我们实现了 一个icon组件，这个组件的核心其实是在于 字体源文件的导入，解决了字体源文件病完成导入之后其实难点就在于两个了：

1. 父子组件之间的属性传递；
2. 利用双花括号语法以及CSS原生属性style实现需求；

解决了这两个问题，icon组件还是非常简单的，因为其 并没有什么复杂的交互逻辑在里面需要处理，只要了解了小程序的基本语法还是可以独立完成的；

到这里，Icon组件就已经算是完成了，预期的3个属性已实现，用法也符合我们之前的期望，完成～~~（PS：都已经看到这里了，给个赞吧，谢谢）~~

转载：https://blog.csdn.net/zy21131437/article/details/125697547