关于图标icon

微信小程序中的 icon 组件只有 9 种类型 success、success_no_circle、info、warn、waiting、cancel、download、search、clear。
只有9个类型的图标往往是不够的，需要拓展更多的icon组件图标。

第一种方案直接使用图片（简单粗暴）

缺点:

图片在文本里面不方便布局；
图片不方便修改颜色；
图片不能伸缩，放大之后会变模糊，不美观；
图片需要在本地或者网络上存储，使用起来不如图标一个名称方便；
如果图标太多，产生大量大HTTP请求；

第二种方案使用精灵图Sprite

精灵图是以非重叠、最小化分布的方式排列成一张图片，加载的时候只加载一次，减少HTTP请求

第三种方案使用CSS样式绘制

缺点

工作量大；
绘制时，需要统一一个中心点，否则控制位置比较麻烦；
不方便控制大小、颜色；

第四种方案使用矢量字体（最简单有效）

矢量字体分为三类

Adobe 的 Type1
Apple 和 Microsoft 主导的 TrueType
Adobe Apple Microsoft 共同主导的开源字体 OpenType

阿里巴巴的图标网站： Iconfont-阿里巴巴矢量图标库
提供常用图标下载，还提供自定义矢量图标字体的生成与下载

第五种方案使用矢量SVG文件

SVG（Scalable Vector Graphics）是基于 XML 的一种矢量图形格式，它即可以作为单独的图形文件使用也可以嵌入到网页中并由 JavaScript 来操作，非常方便和灵活。

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)

SVG 用来定义用于网络的基于矢量的图形

SVG 使用XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失

SVG 是万维网联盟的标准

SVG 与诸如 DOM 和XSL 之类的 W3C 标准是一个整体

关于微信小程序图标icon的五种实现方案相关推荐

微信小程序隐藏元素的五种方法
转载地址:http://www.lanrenmb.com/xiaochengxujiaocheng/8896.html 一.使用wx:if指令. <view wx:if="{{3> ...
微信小程序学习：（五）swiper塌陷问题解决
微信小程序学习:(五)swiper塌陷问题解决 github地址: https://github.com/leoricding/- (一)问题分析需求:实现tab切换,内容切换:内容切换,tab也切 ...
微信小程序（第十五章）- 我的页面的实现
微信小程序(第十五章)- 我的页面的实现登录页面实现效果页面结构实现页面样式实现个人中心列表项的实现页面结构实现页面样式实现登录页面实现效果通过效果图,有两个登录页面.一个未登录效 ...
小程序引入icon的三种方式
小程序引入icon的三种方式(原生图标.WeUI图标组件.iconfont图标) 原生图标小程序里原生图标是通过icon标签来引入的: <icon type="success&quo ...
微信小程序运营推广的几种常见方法
微信小程序运营推广的几种常见方法主流推广方式:公众号引流.截流,由于涉及一些不合常规的内容,本文只说常规操作,剩下的自己领悟,或者可以下方扫码联系我~ 首先小程序的名字至关重要,一个好的名字可以带来 ...
微信小程序版本自动更新用户感知提示方案总结
微信小程序版本自动更新用户感知提示方案总结需求背景最近基于uniapp开发微信小程序上线后,在迭代版本后期望自动更新提示. 使感知. 解决方案使用全局唯一的对象: updateManager. ...
微信小程序使用icon图标
项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标第二步:转换tt ...
微信小程序图标不支持html,微信小程序实现自定义加载图标功能
效果图实现思路 1.首先通过HTML+CSS实现加载动画的静态效果: 2.根据需求给每个动画设计不同的动画效果. 例如第一个加载图标的静态绘制 1.首先确定动画的盒子宽高: 2.设置盒子中每一个长方 ...
微信小程序微商城（五）：动态API实现商品详情页（下）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序微商城(四):动态API实现商品详情页(上) 看效果加入购物车.gif 开发计划 1.加入购物车悬浮框.商品数量.价 ...
微信小程序周报（第五期）
印度同事说起他信教的经历:他梦见自己前世是名叫某某的禅师,醒来后上网查这个名字,居然真有这个人,而且确实是个禅师,从此他就皈依佛祖了. 我一边点头一边想的是:科技改变生活真不是白说的. 最近微信官方一 ...

关于微信小程序图标icon的五种实现方案

关于图标icon

第一种方案直接使用图片（简单粗暴）

第二种方案使用精灵图Sprite

第三种方案使用CSS样式绘制

第四种方案使用矢量字体（最简单有效）

第五种方案使用矢量SVG文件

关于微信小程序图标icon的五种实现方案相关推荐

最新文章

热门文章

关于微信小程序图标icon的五种实现方案

关于图标icon

第一种方案 直接使用图片（简单粗暴）

第二种方案 使用精灵图Sprite

第三种方案 使用CSS样式绘制

第四种方案 使用矢量字体（最简单有效）

第五种方案 使用矢量SVG文件

关于微信小程序图标icon的五种实现方案相关推荐

最新文章

热门文章

第一种方案直接使用图片（简单粗暴）

第二种方案使用精灵图Sprite

第三种方案使用CSS样式绘制

第四种方案使用矢量字体（最简单有效）

第五种方案使用矢量SVG文件