VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动

浅析如何在小程序中实现图标图标?(微信小程序图标字体)

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

如何在小程序中实现图标icon?下面的文章将与您分享小程序图标的几种实现方案,希望对您有所帮助!

浅析如何在小程序中实现图标图标?(微信小程序图标字体)

小程序原生提供的图标组件的属性类型的默认值必须表明typestring是图标的类型,有效值为success、success _ no _ circle、info、warn、waiting、cancel、download、search、clearsize number/string 23 No Icon size colorstring No Icon color,与css的颜色描述组件的size属性的长度单位相同默认为px,从2.4.0开始支持传入单位(rpx/PX)PX值类型,默认使用,没有

RPX(响应像素)屏幕自适应单元,它将屏幕分成750个单元,每个单元是1/750。【相关学习推荐:小程序开发教程】

1.gif

例如iphone6的屏幕宽度为350px,每个rpx为0.5px .也就是说,如果我们在iphone6机器上将size的值设置为60rpx,则与设置为30或30px具有相同的效果。

组件颜色属性是改变图标所有像素的颜色。常见问题:图标和文本可以放在同一行吗?是的,图标本身就是为了更好的布局和更方便的使用而诞生的。代码如下:

我是一行文本,我包含图标!有时真机上的图标是空白的。首先,这个问题肯定不是因为字体文件链接没有添加小程序的安全域名。WXSS加载图片和字体以允许外来字段!如果图标是自定义的,则需要检查型号和嵌入的字体文件类型,这可能是由兼容性引起的。小程序推荐使用TTF和WOFF字体。如果使用这两种字体,这种情况仍然存在,您可以考虑将数据嵌入更改为SVG格式。

如何取出weui组件库中图标组件的图标并保存在本地?可以直接打开weui官网(https://weui.io/),然后通过浏览器开发者工具查看源代码,找到资源地址并下载。或者从微信官方文档下载(https://developers.weixin.qq.com/miniprogram/design/#% E5 % 9b % Be % E6 % A0 % 87)。

开箱即用的优势。

缺点仅支持success、success _ no _ circle、info、warn、waiting、cancel、download、search和clear,远远不能满足开发需求。

自定义图标直接使用图片的优点是简单粗暴,每个图标对应一张图片。

缺点图片不方便在文本中布局。不方便修改颜色。

图片不能放大或缩小,放大后会变得空洞和锯齿状。

图片需要存储在本地或网络上,这将导致大量的HTTP请求并减慢页面加载速度。

使用起来不如只有一个名字的图标方便。

使用Sprite,连续的图片集以不重叠和最小分布的方式排列成一幅图片。每次使用时,垂直和水平显示的初始坐标和面积大小用于实现动态切换的效果。

2.gif

使用示例通过向导图实现爆炸效果。图片大小为(650x650)像素;;所以每个小图标的大小为(130 x130)px;;这就是css样式的宽度和高度设置为130px的原因,也是js代码移动步长设置为130的原因。js中的left和top都是负数,因为这不是显示图标的坐标,而是背景图像应该向左上方移动的距离。

注意:wxss中只能使用网络图片,不能使用本地图片!

代码如下:

/* icon.wxss */。sprite { display:block;宽度:130px高度:130px背景:URL(“https://I。loli。net/2021/11/15/7bh 5 gdkblynrfm 3。png“)NO-重复;}.scale { transform -origin:0 0 0;转换:scale(2,2);}//icon . jspage({/* * * page */data的初始数据:{ left:& # 39;0px & # 39,顶部:& # 39;0px & # 39,},/* * *生命周期函数--监控页面加载*/onload:Function(){ var that = this;var left = 0;var top = 0;const step = 130const stop =(650-130);var I = setInterval(function(){ if(left》= stop & & top》= stop){ clearInterval(I)} else { left+= step;if(left》= 650){ left = 0;top+= step;} that . setdata({ left:& # 39;-'+left+& # 39;px & # 39,顶部:& # 39;-'+top+& # 39;px & # 39})},100)})优点加载时,只加载一次。减少了HTTP请求。

使用CSS样式进行绘制。icon -关闭{ display:inline -block;宽度:17px高度:2px背景:红色;变换:旋转(45度);}。icon -close::after { content:& # 39;';显示:块;宽度:17px高度:2px背景:红色;变换:旋转(-90度);缺点}每个图标都需要用CSS样式的代码编写,这需要大量的劳动。

这个图标不是字符,每个图标都要画一个中心点,否则使用时控制位置会比较麻烦。

大小和颜色都不好控制。所以这不是一个好的图标方案。

使用矢量字体(推荐)当浏览器渲染字符时,首先查看font -系列样式以确定要使用的字体名称。然后用该字符的Unicode在字体文件中查找相应的字符信息。

字体有两种类型,一种是点阵字体,另一种是矢量字体。矢量字体是现在使用最广泛的字体。矢量字体大致可以分为三类:Adobe主导的Type1、苹果和微软主导的TrueType以及Adobe、苹果和微软共同主导的开源字体OpenType。

在矢量字体中,每个Unicode只是每个字符的索引,每个字符描述信息是一个几何矢量绘图描述信息。以Type1为例,它使用三次贝塞尔曲线绘制字形。TrueType使用二次贝塞尔曲线来描述字形。因为矢量字体是绘制的,所以可以实时填充任何颜色,并且可以无限缩放而没有锯齿。

阿里巴巴的图标网站(https://iconfont.cn/),我们可以在那里搜索任何要在线编辑的图片,并下载用于小程序的样式文件。

字体源描述:

EOT是微软IE浏览器专用的OpenType字体类型。

TTF是一种TrueType字体。

WOFF和WOFF2是用于移动开发的特殊矢量字体格式。它是三种矢量字体格式的重新打包。

链接各种字体文件源可以与不同的浏览器托管环境兼容。浏览器将选择它支持的格式,并尝试从列表中的第一个格式加载。一旦有可用的字体格式,其余的字体格式将不会被加载。建议在小程序中使用TTF和WOFF。WOFF2在较低版本的IOS设备上将出现不兼容问题。

用例子来参考这篇文章https://www.jianshu.com/p/25db60f77531.

使用SVG矢量文件许多绘图软件可以导出SVG格式的矢量文件,例如草图,但其导出的SVG格式的矢量文件具有无用的垃圾信息。你可以在阿里巴巴的图标网站上编辑后下载SVG格式的矢量文件,该文件不包含任何垃圾信息。然后我们获取这个文件并找到一个Image2base64工具来将文件内容转换为base64字符串。然后你可以使用这个base64字符串作为小程序中的图像源来实现自定义图标。

例1。准备SVG图片

2.使用在线图像2base64将图片转换为:

数据:image/SVG+XML;base64,PD 94 bwwgdmvyc 2 lvbj 0 IMS 4 iibzdgfuzgsb 25 lpsjubyi/pjwhr 9 dvflqrsbzdmcgufvcteldicitly 9 XM 0 VL 0 rurcbtvcgms 4x ly 9 fti gimh 0 DHA 6 ly 93d 3 cudzmub 3 jnl 0 dyyxboawnzl 1 wry 8 xljevrfrel 3 N2 zzexlmr0zci+phn2 zyb 0 psixnjm 2 OTC Wnt k4 njayiibjbgfzc 0 iawnvbiigdml

。SVG -icon { display:block;宽度:200px高度:200pxbackground -重复:NO-重复;背景:URL(“data:image/SVG+XML;base64,PD 94 bwwgdmvyc 2 lvbj 0 IMS 4 iibzdgfuzgsb 25 lpsjubyi/pjwhr 9 dvflqrsbzdmcgufvcteldicitly 9 XM 0 VL 0 rurcbtvcgms 4x ly 9 fti gimh 0 DHA 6 ly 93d 3 cudzmub 3 jnl 0 dyyxboawnzl 1 wry 8 xljevrfrel 3 N2 zzexlmr0zci+phn2 zyb 0 psixnjm 2 OTC Wnt k4 njayiibjbgfzc 0 iawnvbiigdml它表明该方法仍然需要一张图片进行一次处理,然后在页面中引用。注意:样式文件中的宽度和高度属性的值需要与下载的svg文件的宽度和高度一致(可以在SVG标签中看到)。

使用Canvas绘制SVG对于动画来说是可以的,但是对于图标来说有点大材小用了。

更多编程相关知识请访问:编程入门!!

以上是小程序中如何实现图标Icon的简要分析。更多详情请关注主机参考其他相关文章!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:浅析如何在小程序中实现图标图标?(微信小程序图标字体) https://zhujicankao.com/106016.html

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 浅析如何在小程序中实现图标图标?(微信小程序图标字体)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!