《微信小程序-进阶篇》组件封装-Icon组件的实现（二）
大家好，这是小程序系列的第十篇文章，在这一个阶段，我们的目标是 由简单入手，逐渐的可以较为深入的了解组件化开发，并且实践积累一些后续项目也就是原神资料站中用得着的组件：
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组件的实现（二）相关推荐
- 《微信小程序-进阶篇》组件封装-Icon组件的实现（一）
大家好,这是小程序系列的第九篇文章,从这篇开始我们将进入提高篇,在这一个阶段,我们的目标是可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序 ...
- 《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是 由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
- 《微信小程序-进阶篇》package.json版本说明及各类版本符号详解（一）
大家好,这是小程序系列的第十一篇文章,在这一个阶段,我们的目标是 由简单入手,逐渐的可以较为深入的了解组件化开发,并且实践积累一些后续项目也就是原神资料站中用得着的组件: 1.<微信小程序-基础 ...
- 微信小程序把玩（十一）icon组件
为什么80%的码农都做不了架构师?>>> 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml <!--成功图标--> ...
- 微信小程序实战篇：商品属性联动选择（案例）
本期的微信小程序实战篇来做一个电商网站经常用到的-商品属性联动选择的效果,素材参考了一点点奶茶. 效果演示: 商品属性联动.gif 代码示例 1.commodity.xml <!-- <v ...
- 前端微信小程序实战篇
电商底部导航栏的制作 我想大家对电商一定不陌生,一般电商的底部导航栏有以下几个首页.分类.购物车.个人中心. app.json是用来配置page路径以及导航栏属性的,那我们要做首页.分类.购物车.个人 ...
- 微信小程序开发学习5（自定义组件）
微信小程序开发学习5(自定义组件) 1.学习目标 能够知道如何自定义小程序组件 能够知道小程序组件中behaviors的作用 能够知道如何安装和配置vant-weapp组件库 能够知道如何使用MobX ...
- 《微信小程序-基础篇》初识微信小程序
大家好,好久不见了,前段时间各种原因分享不稳定,后面一段时间内参与了主站的原力计划,请麻烦各位支持一下,万分感谢- 本系列将从零开始介绍微信小程序的开发,介绍完基础以后会实际同步开发一个微信小程序的项 ...
- 微信小程序 wx.request 的封装
自学转行到前端也已近两年,也算是简书和掘金的忠实粉丝,但是以前一直惜字如金(实在是胆子小,水平又低),现在我决定视金钱如粪土(就只是脸皮厚了,水平就那样),好了废话不多说,切入主题,最近自己尝试了一下 ...
- 微信小程序实战篇-下拉刷新与加载更多
下拉刷新 实现下拉刷新目前能想到的有两种方式 调用系统的API,系统有提供下拉刷新的API接口 下拉刷新API.png 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一 ...
最新文章
- java 的lambda表达式
- 公司c语言面试题目,c语言面试最必考的十道试题,求职必看!!!
- java方法执行的时间_计算Java中任意一个方法的执行时间的工具类
- Thinkphp3.2版本Controller和Action的访问方法
- java x509certificate2_ASP.NET使用X509Certificate2出现一系列问题的解决方法
- 40 个 常用的 SpringBoot 注解，你知道几个？
- python selenium 关闭窗口_Selenium快速上手实战 | 上篇
- F5 APM针对Vmware view7.3 VDI业务发布测试问题分析
- 多节点 devstack 部署
- .Net_asp.net页面的生命周期
- 买车，给点建议和意见
- Atitit prj tek dfkt 项目常见技术难点目录第一章 开发效率 2第一节 更加简单的语言 2第二节 简单
- 【优化求解】基于matlab差分进化算法求解函数极值问题【含Matlab源码 1199期】
- lldp协议代码阅读_LLDP - 小蚂蚁_CYJ - 博客园
- Matlab画图技巧： 不需要敲代码的傻瓜式操作流程
- 苹果电脑网速怎么测试软件,macbookpro怎么检测网速？
- 德州农工大学计算机硕士申请,德州农工大学硕士申请
- CCF 201903-5 317号子任务(60分)
- python报错：SyntaxError: Missing parentheses in call to ‘exec‘
- book mac pro怎么重装系统_macbook pro怎么重装mac系统？