大家好，這是小程序系列的第十篇文章，在這一個階段，我們的目標是 由簡單入手，逐漸的可以較為深入的了解組件化開發，并且實踐積累一些后續項目也就是原神資料站中用得著的組件：
1.《微信小程序-基礎篇》帶你了解小程序中的生命周期（二）
2.《《微信小程序-基礎篇》小程序中的事件與冒泡
3.《微信小程序-進階篇》組件封裝-Icon組件的實現（一）
——
求關注，求收藏，求點贊，這是一個系列文章，建議專欄收藏，肯定分享的都是跟小程序相關的，旨在能提高在小程序中的能力，謝謝～
——
希望疫情早日過去～

《微信小程序-進階篇》組件封裝-Icon組件的實現（二）

• 前言
• 閱讀對象與難度
• Icon組件
• • 屬性說明
  • icon屬性
  • color屬性
  • size屬性
• 小結

前言

上一篇我們主要分享了關于 Icon組件前期的準備工作，也就是 字體源文件的來源，如何安裝加進小程序 ，了解后其實也并不復雜的，說到底就是從一些免費的網站上 找到字體文件，然后 下載并轉換，最后 放進組件庫中，只要是能正常顯示，那么上一篇的目的就已經達到了；

這一篇我們主要的目的是來實現上一篇中的預期功能，其實也挺簡單的，因為不涉及復雜邏輯，我們僅要求組件能按我們的期望進行使用就行～耐心看完，你一定有所收獲～

閱讀對象與難度

本文難度屬于：初級，適合 了解完小程序基礎知識的小伙伴，本組件分為 上下兩篇，本篇為 下篇，主講Icon組件的實現階段，主要實現的功能為預期的三個屬性：icon，color，size，完成后的組件得可以被業務頁面正常使用，本組件的 主要知識點 在于以下兩點：

• 小程序父子組件之間屬性的傳遞；
• 雙花括號語法，也就是mustache語法中使用三元表達式進行簡單的邏輯處理；

本文大致思維導圖如下

Icon組件

屬性說明

先來回顧一下我們要實現的三個屬性吧，就如上一章所說，分別是：icon，color，size

屬性名說明類型可選值默認值

icon	具體icon的名字	String	-	-
color	字體圖標的顏色	String	-	#333333
size	圖標大具體大小，單位是rpx	String	-	38rpx，單位為rpx

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組件，這個組件的核心其實是在于 字體源文件的導入，解決了字體源文件病完成導入之后其實難點就在于兩個了：

父子組件之間的屬性傳遞；

利用雙花括號語法以及CSS原生屬性style實現需求；

解決了這兩個問題，icon組件還是非常簡單的，因為其 并沒有什么復雜的交互邏輯在里面需要處理，只要了解了小程序的基本語法還是可以獨立完成的；

到這里，Icon組件就已經算是完成了，預期的3個屬性已實現，用法也符合我們之前的期望，完成～~~（PS：都已經看到這里了，給個贊吧，謝謝）~~

總結

以上是生活随笔為你收集整理的《微信小程序-进阶篇》组件封装-Icon组件的实现（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。