微信小程序官方提供了一个icon标准组件,但是该组件只有10种类型(success, success_no_circle, info, warn, waiting, cancel, download, search, clear),并且只能控制大小和颜色。
在日常实际开发中,这个组件就显得非常不够用了,大家难免会需要自定义一些icon组件。这里告诉你实现四种自定义icon组件的方式
一、image图片
利用小程序的image标签就自定义的icon。
优势:这种方式通过图片,然后对其设置宽高便能实现想要的icon。
劣势:这种图片修改icon颜色只能换图,并且图片缩放过大后容易失真,并且图片会占用一次http请求
二、svg方式
通过svg图片实现自定义icon。
优势:相比上一种方式,svg图片可以修改颜色,并且缩放的失真率也比较低。劣势:小程序wxss并不支持加载本地的svg图片。但我们可以通过在线(https://www.sojson.com/image2base64.html)svg转base64的方式在wxss中加载svg图片
三、css方式
小程序wxss原生支持css3。所以可以通过css3方式实现自己想要的自定义icon。
优势:仅用css代码便可以绘制一些基础的图形icon,网上可参考的代码也不少
劣势:这种方式实现一些比较复杂的icon比较困难,代码量较大
四、字体文件方式
微信小程序wxss支持加载远程字体文件,然后通过字体图标实现自定义icon。
优势:这种方式比较便捷,图标种类繁多,而且修改样式也比较灵活。比如我们可以选择阿里巴巴矢量图标库(iconfont.cn)可以在线选择想要的icon图片,并且可以修改样式,然后生成cdn的字体文件。也可以选择fontawesome字体库(https://fontawesome.com/)生成字体文件,然后再通过css加载改字体文件便能实现自定义icon。
劣势:需要字体文件支持,会增大小程序体积。如果使用外链字体,对外链稳定有要求
以上几种方法也同样适用于uni-app小程序的开发。
这几种方法,追格小程序系列产品中均有应用,结合不同使用场景,使用适合的方式即可。
-
担心WordPress REST API暴露用户名?这里有一个简单的屏蔽方法!在深入探讨WordPress REST API的利用与功能时,追格小编虽已分享了多篇相关内容,但我们依然理解,部分用户可能仍对网站用户名暴露的问题心存顾虑,尤其是当他们并不需要使用到如古腾堡编辑器或小程序等特定功能时。针对这一关切,今天小编特地为大家介绍一种有效的屏蔽方法。
-
wx.getDeviceBenchmarkInfo 获取设备性能得分和机型档位数据APIwx.getDeviceBenchmarkInfo是微信小程序获取设备性能得分和机型档位数据API。
-
wx.openHKOfflinePayView 拉起WeChat Pay HK付款码APIwx.openHKOfflinePayView是微信小程序拉起WeChat Pay HK付款码API。
-
追格小程序建圈、发帖、商城发布商品报错 Warning: Undefined variable $result in追格小程序建圈、发帖、商城发布商品报错Warning: Undefined variable $result in /www/wwwroot/xly/wp-content/plugins/zhuige-xcx/public/class-zhuige-xcx-public.php on line 159
-
【重要通知】追格小程序更新提示因uni组件更新,追格小程序部分模块样式出现异常。我们已定位问题并正优化中,给您带来不便敬请谅解。感谢支持与理解!追格团队将持续努力,优化产品体验,期待更快与您相见。
-
微信小程序打开任意公众号文章 wx.openOfficialAccountArticlewx.openOfficialAccountArticle是微信小程序通过小程序打开任意公众号文章api,不包括临时链接等异常状态下的公众号文章,必须有点击行为才能调用成功。
暂无评论,抢个沙发...