imtoken钱包安卓app|微信小程序icon图标
imtoken钱包安卓app|微信小程序icon图标
作者： imtoken钱包安卓app
2024-03-08 19:54:47
微信小程序开发 | 如何在小程序中使用自定义 icon 图标 - 知乎
微信小程序开发 | 如何在小程序中使用自定义 icon 图标 - 知乎首发于效率工具指南切换模式写文章登录/注册微信小程序开发 | 如何在小程序中使用自定义 icon 图标彭宏豪题图：来自 Unsplash.com本文是微信小程序开发学习笔记。微信小程序 icon 组件（标签）只提供了 9 种类型的图标，不能满足开发或设计的个性化需求。为了解决这个问题，我们可以使用自定义的 icon 图标，来丰富原有的图标类型。在微信小程序中使用自定义 icon 图标有 6 种方法：1.使用 icon 图标（特指位图）2.使用 Sprite（精灵图）3.使用 CSS 样式绘制（这种方法工作量大）4.使用矢量字体5.使用 SVG 矢量文件6.使用 Canvas本文只对第 4 种方法进行说明，因为除了第 1 种方法，其他方法我暂时还都不会。使用矢量字体来自定义 icon 图标，需要用到阿里巴巴图标库网站 Iconfont。题外话，以前我一直以为这个网站只能用于设计，直到接触了一些前端的知识，才知道它也能运用到编程中。打开网站，选择一个自己喜欢的图标，将其添加到购物车，类似购物时将商品添加到购物车的操作，重复操作，将你喜欢的图标一一添加到购物车中。选择好需要的所有图标后，点击右上角的「购物车」图标。浏览器右侧会弹出一个面板，选择「添加至项目」，如果你之前未曾创建过项目，这里就需要新建一个项目，新建项目其实就是新建一个文件夹。将鼠标移动到网页顶部的导航栏「图标管理」，在弹出的菜单中，点击「我的项目」。在我的项目中，点击「查看在线链接」。下方会出现一长串代码，其中的 url 链接指向的就是存放在阿里云服务器的矢量字体，这些字体有不同的格式，如 ttf、woff、woff2，之所以需要用到不同的字体格式，是为了兼容不同的设备或系统。接着点击「点此复制代码」，将代码复制到系统剪贴板中。回到微信小程序开发者工具中，将代码粘贴到小程序页面的 wxss 文件中，wxss 文件可以类比为普通网页的 css 文件。接着在 wxss 文件中进一步定义 icon 图标的样式，输入以下的代码：.iconfont{
font-family: 'iconfont';
color: red;
font-size: 30px;
}
.icon-heart::before{
content: '\e8ab';
}
.icon-like::before{
content: '\e8ad';
}font-family 指定我们嵌入的字体名称，它需要与 @font-face 中 font-family 的值保持一致 ，color 设置图标的颜色，font-size 设置图标的大小。icon-heart 和 icon-like 是自定义的类选择器名称（简称类名），你可以根据自己的喜好进行命名，这里的 icon-heart 代表爱心图标，icon-like 代表点赞图标。content 指定图标的 unicode 编码，获取图标的编码还需要回到 iconfont，将鼠标移动到图标上方，在弹出的菜单中，选择「编辑图标」。在打开的页面中，左下角的 4 位字符——e8ab，就是爱心图标的 unicode 编码，将其粘贴到 wxss 文件中对应的位置，并在字符前面加上一个反斜杠 \。获取点赞图标的 unicode 编码，也需要进行同样的操作。至此，就算完成了 wxss 样式的编辑。为了在小程序中看到图标最终的渲染效果，我们还需要编辑一下 wxml 文件，wxml 相当于普通网页的 html 文件。在 wxml 中使用 icon 标签，输入如下代码：
微信小程序添加icon图标教程_微信小程序图标-CSDN博客
>微信小程序添加icon图标教程_微信小程序图标-CSDN博客
微信小程序添加icon图标教程
最新推荐文章于 2024-03-07 11:16:12 发布
林烈涛
最新推荐文章于 2024-03-07 11:16:12 发布
阅读量1.8w
收藏
81
点赞数
7
分类专栏：
小程序
文章标签：
微信小程序
小程序
前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Linlietao0587/article/details/122093905
版权
小程序
专栏收录该内容
34 篇文章
9 订阅
订阅专栏
1 官方自带
样式基于 v2 “style”: “v2”, app.json设置的v2，删除这个就没有呢
icon 官方地址 https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
iconType:['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'],
type一共有9个
2 自定义添加
阿里巴巴矢量图标库 地址 https://www.iconfont.cn/
2.1 使用
比如：我搜索 爱心 选择点击 购物车 点击右上方的 购物车 添加至项目 我随便选择 一个 demo项目，然后点确认
2.2 管理自己图标
点对应项目demo 代码 方式 这边目前用的是 Font class 点查看代码链接 然后 点此生成代码
双击这里，跳入这个页面 复制下来
2.3 在小程序使用
粘贴到 wxss文件中
在wxml 页面引用
目前，整个引用完毕，是不是很简单
2.4 进行简单的优化
由于写class 要同时写2个 iconfont iconxiai 比较麻烦，我们进行优化一下！
添加 这个代码
[class*="icon"] {
font-family: "iconfont";
font-size: inherit;/*继承父级*/
font-style: normal;
-webkit-font-smoothing: antialiased;/*抗锯齿，字体清晰*/
-moz-osx-font-smoothing: grayscale;/*抗锯齿，比较清晰*/
}
解释： font-family: 这个参数来自 @font-face中的 font-family中的 iconfont font-size：参数 inherit 继承父级
应用是简单一个 icon xiai
可以去掉多余的 iconfont 是不是很神奇
优惠劵
林烈涛
关注
关注
7
点赞
踩
81
收藏
觉得还不错?
一键收藏
知道了
2
评论
微信小程序添加icon图标教程
1 官方自带icon 官方地址 https://developers.weixin.qq.com/miniprogram/dev/component/icon.html <icon type="success"></icon>type一共有8个2 自定义添加阿里巴巴矢量图标库 地址 https://www.iconfont.cn/2.1 使用比如：我搜索 爱心选择点击 购物车点击右上方的 购物车添加至项目我随便选择 一个 demo项目，然后点确认
复制链接
扫一扫
专栏目录
微信小程序 icon组件详细及实例代码
12-29
属性：
效果图：
test.wxml
微信小程序icon图标素材大全 04-06 微信小程序icon图标素材大全 2 条评论 您还未登录，请先 登录 后发表或查看评论 微信小程序中使用自定义 icon 图标 luckywuxn的博客 01-21 452 参考博文：https://zhuanlan.zhihu.com/p/145464598。 微信小程序——引入第三方图标、图标组件 柠檬酸 09-26 2919 这里以Iconfont 为例https://www.iconfont.cn 一、直接引用 创建一个图标项目，名字自定义，我的是fontIcon， 注意项目的 前缀 和font family两处自己定义的名字 ，后面会用到； 选中Unicod,选择下载至本地，里面包含很多文件，找到iconfont.css,把里面的内容复制到全局里 app.wxss，如果不想放到app.wxss里，可以直接... 微信小程序icon图标使用详解 代码小疯子 12-03 1万+ icon 在微信小程序中用来显示图标。 微信小程序常用图标大全1 weixin_53000033的博客 05-22 4867 微信小程序常用图标大全1 微信小程序的按钮怎么添加图标icon？ 【猿来入此】 06-27 3641 1. 在你需要添加按钮的页面的json文件中，引入icon组件的自定义组件库。其中，`type`属性表示要显示的图标类型，具体的图标类型可以参考对应的icon组件库文档。`size`属性表示图标的大小，单位为rpx。2. 在页面的wxml文件中，使用``标签来表示图标。3. 将``标签放置在一个``标签内，即可实现一个带图标的按钮。在微信小程序中，可以使用icon组件来添加图标。其中，`/path/to/icon/icon`是你所引入的icon组件的路径。 【微信小程序】简洁好用的icon（94/100） lichong951的专栏 07-15 1499 简单的点胜过复杂的高明 【愚公系列】2022年08月 微信小程序-icon图标详解 热门推荐 时光隧道 07-30 55万+ 在小程序中经常会用到各种各样的图标，如果这些图标都使用图片的话，将会大大增加小程序打包后的体积，而小程序限制代码最大2MB，分包加载4MB，所以为了缩小体积，我们可以使用图标来缩小体积。自带图标外部图标（图片、精灵图、CSS绘图、矢量字体、SVG格式）属性类型默认值必填说明最低版本typestring是。 微信小程序-icon图标 汪汪的博客 01-31 3934 微信小程序-icon图标 demo.wxml 微信小程序开发常用的 1600 个 PNG 图标 03-17 小程序开发常用的 1600 个 图标。 图标 小程序 开发 常用 微信小程序开发常用的1600个PNG图标 03-08 微信小程序开发常用的1600个PNG图标 微信小程序tabbar图标素材 04-18 微信小程序tabbar图标素材 微信小程序icon图标素材PNG1500个 06-10 微信小程序icon图标素材PNG1500个，解压立即使用 微信小程序开发常用的 1700 个 PNG小图标.zip 08-06 打包的微信小程序icon图标，下载解压即可用，其他的移动应用、网页开发也可以用。 微信小程序用户登陆和获取用户信息功能实现 qq_33449977的博客 03-04 764 这里我们可以看到当我点击“获取用户信息”按钮之后，成功返回的用户信息。这说明测试成功了，这里还得提一下，现在新版本的都不会显示用户昵称和头像了，之前旧版本的会直接返回用户真实的头像和昵称，所以不必纠结这一点，这不是问题。当点击登陆按钮时，返回了code，这也说明咱们的代码是没问题的。 微信小程序 ---- 慕尚花坊 用户管理 每天都要努力学习哦~~ 02-29 848 什么是 TokenToken是服务器生成的一串字符串，用作客户端发起请求的一个身份令牌。当第一次登录成功后，服务器生成一个Token便将此Token返回给客户端，客户端在接收到Token以后，会使用某种方式将Token保存到本地。以后客户端发起请求，只需要在请求头上带上这个Token，服务器通过验证Token来确认用户的身份，而无需再次带上用户名和密码。**Token的具体流程**客户端向服务器发起登录请求，服务端验证用户名与密码验证成功后，服务端会签发一个Token，并将Token发送到客户端。 微信小程序python+django+uniapp公交路线查询系统 最新发布 QQ1304979694的博客 03-07 339 武汉市公交路线查询系统APP是在安卓操作系统下的应用平台。通过此方式促进武汉市公交路线查询系统APP信息流动和数据传输效率，提供一个内容丰富、功能多样、易于操作的武汉市公交路线查询系统APP。与PC端应用程序相比，武汉市公交路线查询管理的设计主要面向于公交公司，旨在为管理员和用户提供一个武汉市公交路线查询系统APP。作为一款武汉市公交路线查询系统APP，面向的是大多数学者，软件的界面设计简洁清晰，用户可轻松掌握使用技巧。（3）管理员具有权限，对用户信息、公交路线、系统信息进行添加、修改、删除等[11]。 微信小程序icon图标有哪些 01-08 微信小程序的icon图标有许多种类，下面列举一些常用的图标类型： 1. 功能图标：如搜索、收藏、分享、设置等，用于表示对应功能的图标。 2. 操作图标：如添加、删除、编辑、刷新等，用于表示对应操作的图标。 3. 提示图标：如警告、成功、错误、信息等，用于表示不同类型的提示信息。 4. 分类图标：如衣物、饮食、交通、娱乐等，用于表示不同分类的图标。 5. 地图图标：如地点标记、导航指示等，用于在地图上标示位置或展示导航方向。 6. 社交图标：如微信、微博、QQ等，用于表示不同社交平台的图标。 7. 广告图标：如广告位、推广链接等，用于展示广告相关的图标。 8. 音频图标：如播放、暂停、停止、快进等，用于音频播放相关的图标。 除了以上常见的图标类型外，还可以根据自己的需求定制或设计特定的icon图标，以满足不同小程序的个性化需求。需要注意的是，为了保证小程序图标的清晰度和可识别性，建议使用简洁明了的图标风格，并保持统一的设计风格。 “相关推荐”对你有帮助么？ 非常没帮助 没帮助 一般 有帮助 非常有帮助 提交 林烈涛 CSDN认证博客专家 CSDN认证企业博客 码龄4年 暂无认证 142 原创 12万+ 周排名 1万+ 总排名 30万+ 访问 等级 1894 积分 63 粉丝 302 获赞 58 评论 746 收藏 私信 关注 热门文章 微信小程序反编译简易教程与wxappUnpacker使用 18847 微信小程序添加icon图标教程 18803 java.security.InvalidKeyException: Illegal key size 18313 微信小程序返回上一页各种方法 14875 微信小程序获取头像open-type=“chooseAvatar“ bind:chooseavatar方法 14607 分类专栏 Java 20篇 小程序 34篇 MySQL 10篇 Vue3 21篇 工具 8篇 Vue 1篇 JavaScript 1篇 wpsJs Tomcat 2篇 LayUI 1篇 项目设计 1篇 Redis 3篇 Spring 1篇 C#语法与应用 24篇 最新评论 java.security.InvalidKeyException: Illegal key size 2301_77614902: 我换了个高版本就没问题了 微信小程序投诉页面与交互设计 javanet001: 没有样式，大佬 java.security.InvalidKeyException: Illegal key size m0_61058451: WAS部署war启动出现这个，得怎么搞 微信小程序反编译简易教程与wxappUnpacker使用 大根哥: 分包路径不行，能给个例子不 微信小程序获取头像open-type=“chooseAvatar“ bind:chooseavatar方法 m0_74875453: 正确的 您愿意向朋友推荐“博客详情页”吗？ 强烈不推荐 不推荐 一般般 推荐 强烈推荐 提交 最新文章 java爬取深圳新房备案价 房贷计算器微信小程序原生语言 MySQL下载安装环境变量配置，常用命令 2024年2篇 2023年8篇 2022年70篇 2021年59篇 2020年3篇 目录 目录 分类专栏 Java 20篇 小程序 34篇 MySQL 10篇 Vue3 21篇 工具 8篇 Vue 1篇 JavaScript 1篇 wpsJs Tomcat 2篇 LayUI 1篇 项目设计 1篇 Redis 3篇 Spring 1篇 C#语法与应用 24篇 目录 评论 2 被折叠的 条评论 为什么被折叠? 到【灌水乐园】发言 查看更多评论 添加红包 祝福语 请填写红包祝福语或标题 红包数量 个 红包个数最小为10个 红包总金额 元 红包金额最低5元 余额支付 当前余额3.43元 前往充值 > 需支付：10.00元 取消 确定 下一步 知道了 成就一亿技术人! 领取后你会自动成为博主和红包主的粉丝 规则 hope_wisdom 发出的红包 实付元 使用余额支付 点击重新获取 扫码支付 钱包余额 0 抵扣说明： 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。 余额充值 icon | 微信开放文档 小程序 小程序 小游戏 小商店 公众号 智能对话 开放平台 企业微信 微信支付 视频号 腾讯小微 开发 介绍 设计 运营 数据 社区 中文 EN 取消 查看更多 在小程序下暂无结果，查看其它业务相关内容 > 指南 框架 组件 API 平台能力 服务端 工具 云开发 云托管 更新日志 开发 开发 介绍 设计 运营 数据 社区 中文 EN 中文EN 取消 组件 视图容器 cover-image cover-view match-media movable-area movable-view page-container root-portal scroll-view swiper swiper-item view 基础内容 icon progress rich-text text 表单组件 button checkbox checkbox-group editor form input keyboard-accessory label picker picker-view picker-view-column radio radio-group slider switch textarea Skyline 手势系统 double-tap-gesture-handler force-press-gesture-handler horizontal-drag-gesture-handler long-press-gesture-handler pan-gesture-handler scale-gesture-handler tap-gesture-handler vertical-drag-gesture-handler draggable-sheet grid-view list-builder list-view nested-scroll-body nested-scroll-header share-element snapshot span sticky-header sticky-section XR-FRAME 概述 概述 特性 示例 限制和展望 核心 架构(ECS) 组件(Component) 组件数据解析(DataParse) 元素(Element) 事件(Event) 场景(Scene) 节点(Node) 可见性与图层(Visible&Layer) Shadow元素(ShadowElement) Slot 资源 资源系统(AssetsSystem) 资源加载器(AssetLoader) 资源加载元素(AssetLoad) 渲染 渲染系统(RenderSystem) 画布透明配置(Alpha) 几何数据(Geometry) 效果(Effect) 材质(Material) 网格(Mesh) 纹理和图像(Texture) 立方体纹理(CubeTexture) 视频纹理(VideoTexture) Beta 纹理使用约定 相机(Camera) 渲染到纹理(RenderTexture) 图集(Atlas) 环境(EnvData) 天空盒与背景(Skybox) 灯光(Light) 阴影(Shadow) 后处理(PostProcess) Beta GLTF GLTF入门 使用说明 画廊 AR AR系统(ARSystem) 识别模式 深度遮挡(DepthMask) Beta AR相机(ARCamera) AR场景事件 不同AR追踪器的坐标系差异 AR追踪器(ARTracker) 2D Marker(Marker) 3D Marker(Marker) OSD Marker(OSD) 平面识别(Plane) 平面识别结合Marker(Plane) 3自由度(threeDof) 人脸识别(Face) 躯体识别(Body) 人手识别(Hand) 获取追踪状态(TrackState) 动画 动画系统(AnimationSystem) 动画实现(Animation) 动画组件(Animator) 帧动画(KeyframeAnimation) gltf动画(ModelAnimation) 交互和物理 物理系统(PhysicSystem) 轮廓(Shape) 刚体(Rigidbody) Beta 轮廓交互(interact) Beta 粒子 粒子系统(Particles) 发射器(Emitter) 其他属性和动画 分享 分享系统(ShareSystem) 截取画布(Capture) 录制画布(Record) 内置资源 内置环境数据 内置几何数据 内置纹理资源 内置效果资源 Simple效果 Standard效果 内置图集 内置后处理 工具 真机调试 环境数据生成 gltf优化 导航 functional-page-navigator navigator 媒体组件 audio camera channel-live channel-video image live-player live-pusher video voip-room 地图 map 画布 canvas 开放能力 ad ad-custom official-account open-data web-view 原生组件说明 native-component 无障碍访问 aria-component 导航栏 navigation-bar 页面属性配置节点 page-meta # icon 基础库 1.0.0 开始支持，低版本需做兼容处理。 微信 Windows 版：支持 微信 Mac 版：支持 渲染框架支持情况：WebView # 功能描述 图标组件 # 属性说明 属性 类型 默认值 必填 说明 最低版本 type string 是 icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear 1.0.0 size number/string 23 否 icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。 1.0.0 color string 否 icon的颜色，同css的color 1.0.0# 示例代码 在开发者工具中预览效果 The translations are provided by WeChat Translation and are for reference only. In case of any inconsistency and discrepancy between the Chinese version and the English version, the Chinese version shall prevail.Incorrect translation. Tap to report. 关于腾讯 文档中心 辟谣中心 客服中心 Copyright © 2012-2024 Tencent. All Rights Reserved. 复制 问题反馈 反馈 微信小程序内容组件图标 icon使用及自定义 - 掘金 首页 首页 沸点 课程 直播 活动 竞赛 商城 APP 插件 搜索历史 清空 创作者中心 写文章 发沸点 写笔记 写代码 草稿箱 创作灵感 查看更多 会员 登录 注册 微信小程序内容组件图标 icon使用及自定义 专注前端开发的蒲蒲同学 2022-04-26 801 本文已参与「新人创作礼」活动，一起开启掘金创作之路。 使用小程序内置图标 小程序内置了很多图标可以用 基础库 1.0.0 开始支持，低版本需做兼容处理。 小程序内置图标使用示例 参数说明： 属性名类型默认值说明typeString icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clearsizeNumber23icon的大小，单位pxcolorColor icon的颜色，同css的color 效果： wx.showToast 中的icon showToast的icon没有内置的icon那么多，类型也有稍许差异，需要注意 合法值说明success显示成功图标，此时 title 文本最多显示 7 个汉字长度error显示失败图标，此时 title 文本最多显示 7 个汉字长度loading显示加载图标，此时 title 文本最多显示 7 个汉字长度none不显示图标，此时 title 文本最多可显示两行，1.9.0及以上版本支持 使用自定义图标 内置图标不够用，又不想引入太多图片，可以试试自定义图标。 小程序不能识别外部字体文件，但是转换成Base64就可以使用字体图标了。 以阿里巴巴的iconfont为例： 1.下载图标 先去官网下载喜欢的图标==》 下载解压后的文件夹==》 2.在线转换 打开transfonter.org/这个网站，将ttf格式的图标文件转换为base64的 完成之后，下载 3.添加css文件 下载好之后的css文件 复制到需要引用的wxss文件中（全局调用就放到app.wxss中）； 复制原始css文件中的以下内容到上面的相同文件中： 4.调用 在需要的地方通过class标签调用： 效果如下： 需要注意⚠️： 关于第三步： 不一定全局引用复制；也可以单独注册成wxss文件，@import引入； 关于第四步： 引用方式很多，不限于以上示例方式~ 专注前端开发的蒲蒲同学 88 文章 16k 阅读 12 粉丝 目录 收起 使用小程序内置图标 小程序内置图标使用示例 wx.showToast 中的icon 使用自定义图标 友情链接： 爱似星光浪漫时百度云卷二 第一风水师听小说 黑暗初生 沙雕动画全球动物时代 过气官二代的科举路 路云青 jquery knockoutjs 微信小程序开发实践：基础内容icon，关于图标的4个实现方案等 - 知乎首发于微信小程序切换模式写文章登录/注册微信小程序开发实践：基础内容icon，关于图标的4个实现方案等艺述论著有《微信小游戏开发》等，公众号同名1）原生支持哪些类型小程序的icon支持以下类型：'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'对应图像效果依次为：主要失败、成功状态的提示，加三个下载、搜索、关闭图标。2）示例与属性图标使用的代码示例为： 我们可以通过color属性随意改变图标颜色：但是中间对勾的颜色同时改变不了，因为它是由背景决定的。下面看一下与图标有关的问题：1）图标能否与文本同行，放在段落中？可以。效果：代码： 文本文本文本 文本与图标只能同时放在view标签下，放在text标签内是不行的。text不是容器类组件。如果文本是从后台动态取出来的，穿插的图标的类型也是动态取出来的，能否实现解析、渲染？这个问题留给读者朋友们思考。2）icon图标是怎么实现的，原理是什么？在html中是没有原生的icon标签的，小程序基于浏览器引擎渲染，它的icon组件是怎么实现的？A）最简单粗暴的方法，是使用img标签，每个图标对应一个图片。但是这种方法有三个明显的缺点：造成大量http请求；不方便修改颜色；放大图片会虚。B）后来有聪明的工程师发明了精灵图，什么是精灵图？这是一个字译。英文叫Sprites，Sprite有精灵的意思，所以翻译成中文就是精灵图了。更确切的意译，应该是连续图片集。精灵图是把一组图片以非重合、最小化的方式排列成一张图片，在加载的时候只加载一次，这就减少了http请求。在使用的时候，能过背景图片的定位与裁剪呈现某一块区域的图标，代码如下：精灵图解决了http请求过多的问题，但是它的颜色不能改变，放大会图片会变虚。C）这两个问题由矢量字体图标方案解决了。当浏览器渲染一个汉字（英文字符也是一样）的时候，首先看font-family样式，确定字体名，由字体名确定使用电脑里的哪个字体文件；接着以汉字的unicode在字体文件里查找对应的字符信息。每个字符都有一个唯一的unicode编码，例如“小程序”这三个汉字的unicode为“\u5c0f\u7a0b\u5e8f”。每个unicode编码在字体文件中都对应一个唯一的字符描述信息。字体类型有两类：点阵字体和矢量字体。现在使用最广泛的是矢量字体。矢量字体又为分为Type1（Adobe）、TrueType（Apple+Microsoft）、OpenType（Adobe+Apple+Microsoft）三种。在矢量字体文件里，每个unicode仅是编码的索引。每个字符描述信息是一堆矢量绘图描述信息，以Type1为例，它使用三次贝塞尔曲线来描述字形，TrueType则使用二次贝塞尔曲线描述字形。由于矢量字体是绘制出来的，所以它可以实时填充任意颜色，可以无极缩放而没有锯齿。回到我们的矢量字体图标方案上来。既然字符可以在字体文件里定义，图标为什么不可以呢？我们可以定义任何一个矢量图形，与一个unicode对应，哪怕这个unicode在其它字体中已被使用也没有关系。只要使用的是这个字体，这个文件，渲染出来就是我们提交的矢量图形效果。阿里巴巴的图标网站http://iconfont.cn，不仅提供常用图标下载，还提供自定义矢量图标字体的生成与下载。假如我们搜索“sun”，查找到如下所示“晴”这个图标。是它的unicode编码，上面是生成的字体文件。这些字件文件除svn之外，都是矢量格式。eot是微软IE转用的OpenType类型；woff与woff2是移动开发专用的矢量字体格式，是对三种矢量字体格式的再封装；ttf是TrueType字体。之所以在css里链接这么多字体文件，是为了兼容不同的浏览器。把上面这段css代码拷贝至wxss样式文件中，再定义两个图标类，如下所示：@font-face { ... } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-sun:before { content: "\e603"; color: red; font-size: 20px; }其中iconfont是为了引用字体”iconfont”，icon-sun是为了定义unicode。在wxml文件内这样使用： 文本文本文本 在两个text组件上使用了两次自定义的图标样式。效果如下：假如我们想自定义图标怎么办？对于“晴”这个图标，在iconfont这个网站上可以直接进行简单的编辑，包装位移、大小、旋转、颜色等设置。如果想进行复杂的编辑，可以将矢量图下载下来，使用矢量图编辑软件，例如Sketch，进行编辑，编辑完成后导出svg格式，在上面这个位置上传，就可以替换原图标。这是使用矢量字体图标的方案。D）还有一个方案，是使用css3绘制。举个例子：/* 使用css3绘制图标 */ .icon-close { display: inline-block; width: 17px; height: 2px; background: red; transform: rotate(45deg); } .icon-close::after { content: ''; display: block; width: 17px; height: 2px; background: red; transform: rotate(-90deg); }这是一个简单的使用css3绘制的图标样式。wxml代码为： 文本文本文本 运行效果如下：这种方案每个图标都需要写css样式，劳动量大。即使是别人写好了样式，批量引入进来，也有不便控制的问题。它本身并不是字符，如果每个图标在绘制时没有一个统一的中心点，在使用时仅控制位置就比较麻烦。E）最后，还有一个方案，就是使用svg。svg是一种矢量格式，内容和矢量字体描述字符的信息类似，可以让图标随意缩放，没有锯齿。在前面我们从iconfont网站下载的css代码中，最后一行其实就是svg格式的文件：@font-face { ... url('//at.alicdn.com/t/font_1716930_zt7ou23vy.svg#iconfont') format('svg'); }svg可以赋值给img标签，也可以用作声明字体。并且它不需要合成字体转换格式，它是一个xml格式的文本文件，还可以在Sketch等矢量软件中直接编辑。查看一下上面这个svg文件的内容：主要内容是那一长串坐标信息。使用svg这种方案，避免了格式转换，svg信息可以作为文本直接内嵌于程序中，不存在浏览器加载字体文件格式兼容的问题。简单方便，依赖少，因此它是Web开发中图标方案的首选。这五种图标方案，你认为微信小程序采用的是哪种方案呢？欢迎留言讨论。3）微信小程序图标能不能自定义，如何使用阿里图标库？默认图标不够用，又不想用图片，有没有方法自定义图标？如前面问题2所讲，可以采用svg方案，在http://iconfont.cn网站上生成自己的svg文件，下载并在小程序中使用。甚至在上面的代码中，定义text标签上的图标： iPhone 6s直机上测试，可以，没有问题。没有这种问题的原因，可能有两个：a）css font-face样式里声明的字体文件，在安全域名里，在本地不校验域名的情况下可以访问，在真机或真实环境中不行。b）即使是真机，各种手机微信内嵌的浏览器内核也存有差异，不排除是字体文件的兼容性问题。可以将svg以外的字体格式全部删除，尤其是排在前面的。如果遇到了类似的问题，可以用这两个方法试一下，如果仍然有问题，欢迎找我讨论。5）weui组件库里的icon组件的图标，如何取出来，保存到本地？这是 http://weui.io/#icons 里的图标样式，有人觉得好看，想把文件拿出来用。有两个方法：a）通过谷歌浏览器开发者工具，定位到具体组件的样式：可以看到url指向的是一个内嵌的svg矢量图数据。在新的tab页中打开，可以直接保存为svg文件，在Sketch软件中编辑。b）weui的图标，微信团队给出了Sketch设计原稿，可以在这个页面下载：http://developers.weixin.qq.com/miniprogram/design/#设计关于icon，还有其它许多奇奇怪怪的问题。icon看以是一个小组件，却也让不少开发者头疼过。有什么问题，欢迎留言讨论，也可以在群内讨论。2020年03月26日编辑于 2022-06-11 16:11微信小程序小程序社区微信小程序（书籍）赞同 4添加评论分享喜欢收藏申请转载文章被以下专栏收录微信小程序微信小程序、小游戏全栈开发 微信小程序开发 | 如何在小程序中使用自定义 icon 图标-阿里云开发者社区 产品解决方案文档与社区权益中心定价云市场合作伙伴支持与服务了解阿里云售前咨询 95187-1 在线服务售后咨询 4008013260 在线服务其他服务 我要建议 我要投诉更多联系方式备案控制台开发者社区首页探索云世界探索云世界云上快速入门，热门云上应用快速查找了解更多问产品动手实践考认证TIANCHI大赛活动广场活动广场丰富的线上&线下活动，深入探索云世界任务中心做任务，得社区积分和周边高校计划让每位学生受益于普惠算力训练营资深技术专家手把手带教话题畅聊无限，分享你的技术见解开发者评测最真实的开发者用云体验乘风者计划让创作激发创新阿里云MVP遇见技术追梦人直播技术交流，直击现场下载下载海量开发者使用工具、手册，免费下载镜像站极速、全面、稳定、安全的开源镜像技术资料开发手册、白皮书、案例集等实战精华插件为开发者定制的Chrome浏览器插件探索云世界新手上云云上应用构建云上数据管理云上探索人工智能云计算弹性计算无影存储网络倚天云原生容器serverless中间件微服务可观测消息队列数据库关系型数据库NoSQL数据库数据仓库数据管理工具PolarDB开源向量数据库热门Modelscope模型即服务弹性计算云原生数据库物联网云效DevOps龙蜥操作系统平头哥钉钉开放平台大数据大数据计算实时数仓Hologres实时计算FlinkE-MapReduceDataWorksElasticsearch机器学习平台PAI智能搜索推荐人工智能机器学习平台PAI视觉智能开放平台智能语音交互自然语言处理多模态模型pythonsdk通用模型开发与运维云效DevOps钉钉宜搭支持服务镜像站码上公益 开发者社区 开发与运维 文章 正文 微信小程序开发 | 如何在小程序中使用自定义 icon 图标 2023-07-17 1559 版权 版权声明： 本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。 简介： 微信小程序开发 | 如何在小程序中使用自定义 icon 图标 效率工具指南 目录 热门文章 最新文章 为什么选择阿里云什么是云计算全球基础设施技术领先稳定可靠安全合规分析师报告产品和定价全部产品免费试用产品动态产品定价价格计算器云上成本管理解决方案技术解决方案文档与社区文档开发者社区天池大赛培训与认证权益中心免费试用高校计划企业扶持计划推荐返现计划支持与服务基础服务企业增值服务迁云服务官网公告健康看板信任中心关注阿里云关注阿里云公众号或下载阿里云APP，关注云资讯，随时随地运维管控云服务售前咨询：95187-1售后服务：400-80-13260法律声明及隐私权政策Cookies政策廉正举报安全举报联系我们加入我们阿里巴巴集团淘宝网天猫全球速卖通阿里巴巴国际交易市场1688阿里妈妈飞猪阿里云计算AliOS万网高德UC友盟优酷钉钉支付宝达摩院淘宝海外阿里云盘饿了么© 2009-2024 Aliyun.com 版权所有 增值电信业务经营许可证： 浙B2-20080101 域名注册服务机构许可： 浙D3-20210002 京D3-20220015浙公网安备 33010602009975号浙B2-20080101-4 小程序实现Icon组件的四种方式 | 微信开放社区 交流专区服务市场微信学堂文档小程序常用主页小程序小游戏企业微信微信支付服务市场微信学堂文档登录评论置顶小程序实现Icon组件的四种方式精选热门微盟2022-06-272371浏览1评论介绍小程序中自定义icon组件的四种方式介绍小程序中自定义icon组件的四种方式 小程序官方提供了一个icon组件，但是改组件只有10种类型。在日常开发中，难免会需要自定义一些icon组件。本文带你实现四种自定义icon组件的方式，并且概述每种方式的优劣点 一、image图片 利用小程序原生image标签就能实现一个自定义的icon组件。这种方式通过切图，然后对其设置宽高便能实现想要的icon组件。但这种图片方式无法方便的修改icon颜色，并且图片缩放过大后容易失真，并且图片会占用一次http请求 实现代码如下 .image { width: 25rpx; height: 25rpx; } 二、css3方式 小程序wxss原生支持css3。所以可以通过css3方式实现自己想要的自定义icon。但这种方式实现一些比较复杂的icon比较困难，且用css的方式实现需要耗费一定的工作量 实现代码如下 .icon-close { display: inline-block; width: 17rpx; height: 2rpx; background-color: red; transform: rotate(45deg); } .icon-close::after { content: ""; display: block; width: 17rpx; height: 2rpx; background-color: red; transform: rotate(-90deg); } 三、字体文件方式 小程序wxss支持加载远程字体文件。阿里巴巴矢量图标库(iconfont.cn)可以在线选择想要的icon图片，并且可以修改样式，然后生成cdn的字体文件。然后再通过css加载改字体文件便能实现自定义icon。这种方式比较便捷，图标种类繁多，而且修改样式也比较灵活 实现代码如下 @font-face { font-family: 'iconfont'; /* Project id 2361238 */ src: url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.woff2?t=1642320886173') format('woff2'), url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.woff?t=1642320886173') format('woff'), url('//at.alicdn.com/t/font_2361238_cxshqh1m3m7.ttf?t=1642320886173') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon_01::before { content: "\e6f1"; } 四、svg方式 通过svg图片的方式也能实现自定义icon。但是相比第一种方式，svg图片可以修改颜色，并且缩放的失真率也比较低。不过小程序wxss并不支持加载本地的svg图片。我们可以通过在线(https://www.sojson.com/image2base64.html)svg转base64的方式在wxss中加载svg图片。 实现代码如下 .close-icon { width: 20rpx; height: 20rpx; background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNjU2MjM5NjM4MDE2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwNDUgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjE4NDIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjA0LjEwMTU2MjUiIGhlaWdodD0iMjAwIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPkBmb250LWZhY2UgeyBmb250LWZhbWlseTogZmVlZGJhY2staWNvbmZvbnQ7IHNyYzogdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzEwMzExNThfdTY5dzh5aHhkdS53b2ZmMj90PTE2MzAwMzM3NTk5NDQiKSBmb3JtYXQoIndvZmYyIiksIHVybCgiLy9hdC5hbGljZG4uY29tL3QvZm9udF8xMDMxMTU4X3U2OXc4eWh4ZHUud29mZj90PTE2MzAwMzM3NTk5NDQiKSBmb3JtYXQoIndvZmYiKSwgdXJsKCIvL2F0LmFsaWNkbi5jb20vdC9mb250XzEwMzExNThfdTY5dzh5aHhkdS50dGY/dD0xNjMwMDMzNzU5OTQ0IikgZm9ybWF0KCJ0cnVldHlwZSIpOyB9Cjwvc3R5bGU+PC9kZWZzPjxwYXRoIGQ9Ik0yODIuNTE3MzMzIDIxMy4zNzZsLTQ1LjM1NDY2NiA0NS4xNjI2NjdMNDg5LjQ3MiA1MTIgMjM3LjE2MjY2NyA3NjUuNDYxMzMzbDQ1LjM1NDY2NiA0NS4xNjI2NjdMNTM0LjYxMzMzMyA1NTcuMzU0NjY3bDI1Mi4wOTYgMjUzLjI2OTMzMyA0NS4zNTQ2NjctNDUuMTYyNjY3LTI1Mi4yODgtMjUzLjQ0IDI1Mi4yODgtMjUzLjQ4MjY2Ni00NS4zNTQ2NjctNDUuMTYyNjY3TDUzNC42MTMzMzMgNDY2LjYyNGwtMjUyLjA5Ni0yNTMuMjI2NjY3eiIgcC1pZD0iMTg0MyI+PC9wYXRoPjwvc3ZnPg=='); background-position: unset; background-repeat: no-repeat; background-position: center; background-size: contain; } 五、总结 上述四种方式都能实现自定义icon。每种都有其利弊。如果四种方式都可以满足需求，建议优先使用第三种方式。 最后一次编辑于 2022-06-27 点赞 1收藏分享 扫描小程序码分享复制链接删除文章后，文章内容和评论将一并被删除，且不可恢复。删除取消评论关闭请选择投诉理由广告内容违法违规恶意灌水内容其他1 个评论赵健棋2022-07-22加粗标红插入代码插入链接插入图片上传视频 请 登录 后发表内容 关闭新增或编辑超链接链接地址确认取消关闭插入视频视频链接确认取消发表第三种方式已经挂了，阿里不提供【//at.alicdn.com】这个接口了。。。只能下载到本地，之后还有一堆的问题。。。你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。待楼主反馈2022-07-22赞同 回复 1壹叁肆2023-01-12加粗标红插入代码插入链接插入图片上传视频 请 登录 后发表内容 关闭新增或编辑超链接链接地址确认取消关闭插入视频视频链接确认取消发表如果是阿里图标库的svg，可以试试这个库，https://www.npmjs.com/package/uni-icon你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。待楼主反馈2023-01-12赞 回复关闭请选择投诉理由广告内容违法违规恶意灌水内容其他关闭请选择投诉理由广告内容违法违规恶意灌水内容其他加粗标红插入代码插入链接插入图片上传视频 请 登录 后发表内容 关闭新增或编辑超链接链接地址确认取消关闭插入视频视频链接确认取消关闭关注“微信开放社区”公众号关注后，可在微信内接收相应的重要提醒。请使用微信扫描二维码关注 “微信开放社区” 公众号作者介绍关注文章标签#微信开发者工具关于腾讯运营规范文档中心辟谣中心客服中心Copyright © 2012-2024 Tencent. All Rights Reserved. 微信小程序开发 | 如何在小程序中使用自定义 icon 图标_微信小程序_彭宏豪95_InfoQ写作社区 data: { iconSize: [20, 30, 40, 50, 60, 70], iconColor: [ 'red', 'orange', 'yellow', 'green', 'rgb(0,255,255)', 'blue', 'purple' ], iconType: [ 'success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear' ] } })复制 复制在这里插入图片描述二、实现图标的五种方案1.图片直接使用img标签实现图标会有以下三个缺点：造成大量http请求不方便修改颜色放大图片会虚2.精灵图精灵图是把一组图片以非重合、最小化的方式排列成一张图片，在加载的时候只加载一次，这就减少了http请求。在使用的时候，能过背景图片的定位与裁剪呈现某一块区域的图标。 display: block; width: 80px; height: 80px; /* 此处在wxss中，可以使用网络图片，不能使用本地图片 */ background: url("https://cdn.nlark.com/yuque/0/2020/png/1252071/1589205723989-7de580b9-c9fd-4485-8b5b-3768f2f31bd0.png") -180px -310px; }复制在这里插入图片描述 缺点：精灵图解决了http请求过多的问题，但是它的颜色不能改变，放大会图片会变虚。3.CSS绘图 display: inline-block; width: 17px; height: 2px; background: green; transform: rotate(45deg); } .icon-close::after { content: ''; display: block; width: 17px; height: 2px; background: red; transform: rotate(-90deg); } .scale2{ transform-origin: 0 0 0; transform:scale(2,2) }复制在这里插入图片描述4.矢量字体阿里图标库就是矢量字体的使用方案阿里图标库官网：https://www.iconfont.cn/ 在这里插入图片描述转换iconfont.ttf文件得网址：https://transfonter.org/ 在这里插入图片描述4.1 使用步骤下载到本地以后，解压出来有一个文件夹，里面有一个文件名字iconfont.css，和iconfont.ttf文件1、iconfont.ttf文件进行转换因为小程序的wxss文件的font-face的url不接受http地址作为参数,但可以接受base64,因此需将字体文件下载后,转换为base64，然后引用。进入https://transfonter.org/平台 点击Add fonts按钮，添加iconfont.ttf文件，如上图中我选中的 上传完ttf文件后，勾选上两个勾选项 在这里插入图片描述2.iconfont.ttf文件转换得内容并入iconfont.css文件中@font-face { font-family: 'iconfont'; src: url('data:font/woff2;charset=utf-8;base64,d09GMgABAAAAAARUAA0AAAAACfwAAAP/AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCQhEICodchkULDAABNgIkAxIEIAWFAgc8G3IIyB6FccNdYmjCElcYlvL/LYKntdd5u3sXBIWKXXQUO6TWsTEXWUW6yvYbV4Voq3M/5dm/QpNMirWYYiFc0w/zBC6A2z9Biv+rNdUBAGE2oONN7gII7l0IHVCRhKpQjfs6VgSOjO5UuGpbqbqY15hOwNcnPAgBb8/YCAEfo7VE0nsH+jEJJCErQkFCKRAvoCI9Y8/hOfbz8c9qCEFSZZAevv8gSglDz3g/6zzwvyG/1wAB6zOHhUx4ptK/eA1HYArXHFAUwU9+C37yWr07AUQNjS2MBCTIP0/A/pNoIYEK9GISxFOAeAVAAUBteM4MYw2RJiklSSwhSVJTUyqVSLrV68NGeoR6fd2IPbC25kkxGxvGnMHNTaLP4Pjopk8WYuYMTfecQYhZgtQsE0PqVVYeXPFGzDlt82ML6LgaAgQIyNOYuaGB4Xn14ujgyEJq6UXQXCQIu3PgAmJWWLeXFayfuQQk5eo7V0Fz5TZKjN+9xkLF6/eIRhTUJJGfyE7yXKjouJyTvIRoio/QRFbAT+8trkZ7Lh0q2qgv1vVmTkUVZJeJeho5oaDW6iB/Xv4o5onjM0tHMxNLs0p7noW5Z1txTGzCzeZUfo4OMbYO0SKVvV1sjP2JEIdYO/sYJHeAxzi4+GRdDrNIPRNywqIwrdmAImNt22xpm3KbYJtic3ZpPGGs35QeZJG24F3g5VVQoxk5Xw3bVWK1lhSftBbPtSnqsBlmYRmUmuubY9t2W7G8+jgl05cZhE+DjvuGrxYMbxpefy1xfnWIa28MbwWXS0iHQvmTZXji7rq0THIDSPbtwWYGUsqckuIEvgL7gi8zw2mUTN+82piUDWkNmYtk2JUyKyvCZtgNSwm/K46H2oyaMzcaCqm0HCdqiqVLpcinhqWGJh6OB48C4+aRsRp8N0e7IQ6RZj6M+P/HiLhb2xA8H4bhcR3W7wcQCD7PRjiXiAO/dhNcWCxvtt5+yR2OCYBuCQQL3OLrApA7qAFKcb4ahXVyLFT+GwZI6NWLFsCox2RmjK0ModsuJF0eQtbtllIYr6HS5w3Uur2DXisReH2fsdgBWRQRMA8wCMMCIRl0BtmwekphMFCZdBZqw6ah16kn5/WZjwqI0ESF1mLqK5mS6zSspFCvTtmeFvDgBm+geIOfAyVsydfCIZVyrWrQmsDf+QYtPjhueEqlSbPKflNunLmC6/qjuzm7VqXsHF9HpWmOb2nWppy7Fi3KmCrTpF4tU9FNECo1avyUqYb071RRUWjhDB4KVTa3lbu3tJTdCcDvP+MDufVP0SmAR+0TDfy5qLPKWk45U/TpgQs1T1llfNKxbaVb0QuUKh9SqBdzBA10ZVcFXS9QNbWrKmtpAA==') format('woff2'), url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAZcAA0AAAAACfwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGQAAAABoAAAAckjBRG0dERUYAAAYgAAAAHgAAAB4AKQALT1MvMgAAAaAAAABGAAAAYDw6SNVjbWFwAAAB/AAAAEIAAAFCAA/psWdhc3AAAAYYAAAACAAAAAj//wADZ2x5ZgAAAkwAAAJXAAAD3OLAzhhoZWFkAAABMAAAADAAAAA2H6tuD2hoZWEAAAFgAAAAHQAAACQHnAOFaG10eAAAAegAAAARAAAAEgxiAEJsb2NhAAACQAAAAAwAAAAMAKoB7m1heHAAAAGAAAAAHwAAACABHwEAbmFtZQAABKQAAAFGAAACgl6CAQJwb3N0AAAF7AAAACoAAAA877ujtnjaY2BkYGAAYremloR4fpuvDNwsDCBwz02UE047/X/IvI9ZHsjlYGACiQIA+w8I8HjaY2BkYGBu+N/AEMPCAALM+xgYGVABCwBVEAMqAAAAeNpjYGRgYGBl+MIgwAACTEDMBYQMDP/BfAYAIhUCIAB42mNgYWFgnMDAysDA1Ml0hoGBoR9CM75mMGLkAIoysDIzYAUBaa4pDAeesT5jY27438DAwHyHAUgyMCIpUWBgBABj6QyKAAB42mNhgAAWCHZiSAIAAcIAsQAAAHjaY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChED+M7b//4Ek6///kv+gKhkY2RhgTAZGJiDBxIAKGBmGPQAAQr8HpgAAAAAAAAAAAAAAqgHueNptUr1u02AUvddpnEqtndpOY5RfxcZ2iNsktV07UlsrlIG0EhJFYkEVKhUsqAhYQAw8AA+AEEKIMDAiyMZUKAsjA08AvACCuQn3i626qWLZ5/u595x7da6Bh83Rr9RhqgpV6MIVuAH34BEAOhWsokuoSjkRMzWtiZbkhbiGQcgFqq7xWRTRRo1flHJ5t+b4q5JnWrpmtrCJeoaYxCMWcVRNxFwFnRC9JmacfBlz+TV08jme0lc932BbzfR87qp1aTkzs2T3lrDRs4+P7C2bbVozvL1pvuvrPj/LSfO9eiewuJDh9pzMzfKefs3f9f3dAwa+ERpGuM3gtqDIAgqKItQ7Ch6IslxUlFRV2zALFy43hq8akTzuU51z5vp57C5r3nw2qA/fWCSOt6wOZudcvfk91iboxtoE9yPxgtKpC0qfVnqBngXYH/1MvSVPFXK1DevQg+twBx7CU3gGr2EAX+EH/IZ/kc9l5pTNvNpgbrljZ8hxMsRNkdGxXT5FTT3NgpTMgpaaHNJ5PqPzTfTdwMkbY4/HESL57thgPVI0Ek6gn9qnpnRSm3KXPttRbUqLE9VrZ874pNQqF1ulQaldooX7xKY0/MLw2wdJVRc+MsAXdCFqNDPh/Q4b4Y4o0wxRFhYFhTAnKscvGWdFoBTucSKCXYZ9Rt9j9Itj5cmaD6J1EN0O/56qe5jsh3BSAP8wbI/19xIhJjA8UgoystmPYh7Bc7lIf5uMSEChKvXMUlC+GQuSVCX6Ze7Sx1LjBT8njQ0m2mSnblIigV7c2cpJj7SD/0rMnhAAeNp9kM1Kw0AUhc/0T21BxILrWRVBSH+WpbtC3blwUddtOklbkkyYTAtdunXlA7j1MXwAn0Fw5YN4Gq8IFZqQyzfn3nNmJgAu8QmFn6eNa2GFU9wJV3CCWLhK/VG4Rn4RrqOFN+EG9Q/hJm7USLiFtnpmgqqdcdUp0/ascIGRcAXneBCuUrfCNfKTcB1XeBVuUH8XbmKKL+EWOmqJMRwMZvCsC2jMsWNdIWRuhqisHhg7M/Nmoec7vQptFtmM4r+pv9Y942JskDDacWniTTJzRy1HWlOmORQc2bc0+gjQo2xcsbKZ7ge9o/Zb2rMy4vCeBbY85oCqp1Hzc7SnpInEGF4hIWvkZW9NJaQeMNZkxv3+lWIbD7yPdORsqifc1iSJ1bmzaxN6Di/LPXIM0eUbHaQH5eFTjnmfD7vdSAKC0Kb4Bg9qcIcAAHjaY2BigAAuMMnIgA5YwaJMjEyMzOwFiZlVGYn57KlF5amZuYkAM6wGAQAAAAAAAf//AAIAAQAAAAwAAAAWAAAAAgABAAMABAABAAQAAAACAAAAAHjaY2BgYGQAgqtL1DlA9D03UU4YDQAzVQQuAAA=') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "iconfont"; /* Project id */ src: url('iconfont.ttf?t=1646290057738') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-paizhao:before { content: "\e605"; } .icon-erweima:before { content: "\e606"; }复制打开微信开发者工具，找打app.wxss，将刚才复制的内容粘贴至下面 在wxml中引用icon图标，使用如下 我是阿里扩展图标： 复制在这里插入图片描述5.SVG格式使用svg这种方案，避免了格式转换，svg信息可以作为文本直接内嵌于程序中，不存在浏览器加载字体文件格式兼容的问题。简单方便，依赖少，因此它是Web开发中图标方案的首选。 display: block; width: 200px; height: 200px; background-repeat: no-repeat; background: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNTg5MjEzNjE0NDc2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjggMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEzMDEiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNNTE0LjEzMzMzMyA1MDkuODY2NjY3bS0yNTYgMGEyNTYgMjU2IDAgMSAwIDUxMiAwIDI1NiAyNTYgMCAxIDAtNTEyIDBaIiBmaWxsPSIjZDQyMzdhIiBwLWlkPSIxMzAyIj48L3BhdGg+PHBhdGggZD0iTTUxNC4xMzMzMzMgMTcwLjY2NjY2N2MtMTkuMiAwLTMyLTE0LjkzMzMzMy0zMi0zMlYyOS44NjY2NjdjMC0xNy4wNjY2NjcgMTIuOC0yOS44NjY2NjcgMjkuODY2NjY3LTI5Ljg2NjY2N2gyLjEzMzMzM2MxNy4wNjY2NjcgMCAzMiAxNC45MzMzMzMgMzIgMzJ2MTA4LjhjMCAxNC45MzMzMzMtMTQuOTMzMzMzIDI5Ljg2NjY2Ny0zMiAyOS44NjY2Njd6TTUxNC4xMzMzMzMgMTAyNGMtMTkuMiAwLTMyLTE0LjkzMzMzMy0zMi0zMnYtMTA4LjhjMC0xNy4wNjY2NjcgMTQuOTMzMzMzLTMyIDMyLTMyaDIuMTMzMzM0YzE3LjA2NjY2NyAwIDMyIDE0LjkzMzMzMyAzMiAzMnYxMDguOGMtMi4xMzMzMzMgMTcuMDY2NjY3LTE3LjA2NjY2NyAzMi0zNC4xMzMzMzQgMzJ6TTg1My4zMzMzMzMgNTA5Ljg2NjY2N2MwLTE5LjIgMTQuOTMzMzMzLTMyIDMyLTMyaDEwOC44YzE3LjA2NjY2NyAwIDMyIDE0LjkzMzMzMyAzMiAzMnYyLjEzMzMzM2MwIDE3LjA2NjY2Ny0xNC45MzMzMzMgMzItMzIgMzJoLTEwOC44Yy0xNy4wNjY2NjctMi4xMzMzMzMtMzItMTcuMDY2NjY3LTMyLTM0LjEzMzMzM3pNMCA1MDkuODY2NjY3YzAtMTkuMiAxNC45MzMzMzMtMzIgMzItMzJoMTA4LjhjMTcuMDY2NjY3IDAgMzIgMTQuOTMzMzMzIDMyIDMydjIuMTMzMzMzYzAgMTcuMDY2NjY3LTE0LjkzMzMzMyAzMi0zMiAzMkgzMmMtMTcuMDY2NjY3LTIuMTMzMzMzLTMyLTE3LjA2NjY2Ny0zMi0zNC4xMzMzMzN6TTc0Mi40IDI0Ny40NjY2NjdjLTEyLjgtMTIuOC0xMi44LTMyLTIuMTMzMzMzLTQ0LjhsNzYuOC03Ni44YzEyLjgtMTIuOCAzMi0xMi44IDQ0LjggMFYxMjhjMTIuOCAxMi44IDEyLjggMzIgMCA0NC44bC03Ni44IDc2LjhjLTEwLjY2NjY2NyAxMC42NjY2NjctMzIgMTAuNjY2NjY3LTQyLjY2NjY2Ny0yLjEzMzMzM3pNMTM4LjY2NjY2NyA4NTEuMmMtMTIuOC0xMi44LTEyLjgtMzQuMTMzMzMzLTIuMTMzMzM0LTQ0LjhsNzYuOC03Ni44YzEyLjgtMTIuOCAzMi0xMi44IDQ0LjggMGwyLjEzMzMzNCAyLjEzMzMzM2MxMi44IDEyLjggMTIuOCAzMiAwIDQ0LjhMMTgzLjQ2NjY2NyA4NTMuMzMzMzMzYy0xMi44IDEwLjY2NjY2Ny0zMiAxMC42NjY2NjctNDQuOC0yLjEzMzMzM3pNNzQwLjI2NjY2NyA3MjcuNDY2NjY3YzEyLjgtMTIuOCAzNC4xMzMzMzMtMTIuOCA0NC44LTIuMTMzMzM0bDc2LjggNzYuOGMxMi44IDEyLjggMTIuOCAzMiAwIDQ0LjhsLTIuMTMzMzM0IDIuMTMzMzM0Yy0xMi44IDEyLjgtMzIgMTIuOC00NC44IDBsLTc2LjgtNzYuOGMtMTAuNjY2NjY3LTEyLjgtMTAuNjY2NjY3LTMyIDIuMTMzMzM0LTQ0Ljh6TTEzNi41MzMzMzMgMTIzLjczMzMzM2MxMi44LTEyLjggMzQuMTMzMzMzLTEyLjggNDQuOC0yLjEzMzMzM2w3Ni44IDc2LjhjMTIuOCAxMi44IDEyLjggMzIgMCA0NC44bC0yLjEzMzMzMyAyLjEzMzMzM2MtMTIuOCAxMi44LTMyIDEyLjgtNDQuOCAwTDEzNi41MzMzMzMgMTY4LjUzMzMzM2MtMTAuNjY2NjY3LTEyLjgtMTAuNjY2NjY3LTMyIDAtNDQuOHoiIGZpbGw9IiNGRkM0NDUiIHAtaWQ9IjEzMDMiPjwvcGF0aD48L3N2Zz4="); }复制在这里插入图片描述本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。 原始发表：2022-08-22，如有侵权请联系 cloudcommunity@tencent.com 删除前往查看httphttpscss网络安全编程算法本文分享自 作者个人站点/博客 前往查看如有侵权，请联系 cloudcommunity@tencent.com 删除。本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！httphttpscss网络安全编程算法评论登录后参与评论0 条评论热度最新登录 后参与评论推荐阅读LV.关注文章0获赞0目录文章目录前言一、自带图标二、实现图标的五种方案1.图片2.精灵图3.CSS绘图4.矢量字体4.1 使用步骤5.SVG格式相关产品与服务云开发 CloudBase云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。免费体验产品介绍产品文档2024新春采购节领券社区专栏文章阅读清单互动问答技术沙龙技术视频团队主页腾讯云TI平台活动自媒体分享计划邀请作者入驻自荐上首页技术竞赛资源技术周刊社区标签开发者手册开发者实验室关于社区规范免责声明联系我们友情链接腾讯云开发者扫码关注腾讯云开发者领取腾讯云代金券热门产品域名注册云服务器区块链服务消息队列网络加速云数据库域名解析云存储视频直播热门推荐人脸识别腾讯会议企业云CDN加速视频通话图像分析MySQL 数据库SSL 证书语音识别更多推荐数据安全负载均衡短信文字识别云点播商标注册小程序开发网站监控数据迁移Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档Copyright © 2013 - 2024 Tencent Cloud.All Rights Reserved. 腾讯云 版权所有登录 后参与评论00 基础组件 - Icon - 《微信小程序官方开发文档(全) - 20210305》 - 书栈网 · BookStack × 思维导图备注 关闭 微信小程序官方开发文档(全) - 20210305 首页 白天 夜间 小程序 阅读 书签 我的书签 添加书签 移除书签 Icon 来源:腾讯 浏览 974 扫码 分享 2021-03-05 22:09:39 Icon代码引入示例代码效果展示属性列表Icon 列表Icon图标 代码引入在 page.json 中引入组件 { "usingComponents": { "mp-icon": "weui-miniprogram/icon/icon" }}示例代码 属性列表属性类型默认值说明extClassstring组件类名typestringoutlineIcon类型，可选值 outline（描边），field（填充）iconstringIcon名字sizenumber20Icon的大小，单位 pxcolorstringblackIcon的颜色，默认黑色 Icon 列表 当前内容版权归 腾讯 或其关联方所有，如需对内容或内容相关联开源项目进行关注与资助，请访问 腾讯 . 上一篇: 下一篇: 指南起步开始小程序代码构成小程序宿主环境小程序协同工作和发布目录结构配置小程序sitemap 配置小程序框架场景值逻辑层注册小程序注册页面页面生命周期页面路由模块化API视图层WXMLWXSSWXS事件系统WXS 响应事件简易双向绑定基础组件获取界面上的节点信息响应显示区域变化动画初始渲染缓存小程序运行时运行环境JavaScript 支持情况运行机制更新机制自定义组件组件模板和样式Component 构造器组件间通信与事件组件生命周期behaviors组件间关系数据监听器纯数据字段抽象节点自定义组件扩展开发第三方自定义组件单元测试获取更新性能统计信息插件开发插件使用插件插件调用 API 的限制插件使用组件的限制插件功能页用户信息功能页支付功能页收货地址功能页发票功能页发票抬头功能页基础能力网络使用说明局域网通信存储文件系统画布分包加载使用分包独立分包分包预下载多线程 Worker服务端能力服务端 API消息推送自定义 tabBar周期性更新数据预拉取DarkMode 适配指南大屏适配指南硬件能力蓝牙NFCWi-Fi开放能力用户信息小程序登录UnionID 机制说明授权开放数据校验与解密获取手机号生物认证分享到朋友圈 Beta转发转发动态消息小程序私密消息收藏聊天素材打开多人音视频对话打开 App消息订阅消息统一服务消息客服消息概述接收消息和事件发送消息转发消息下发客服输入状态临时素材位置消息卡券概述会员卡组件获取小程序码URL Scheme打开小程序数据分析附近的小程序微信物流助手接口文档快递接口（商家查看）文档说明产品简介版本说明接口规则协议规则快递公司信息相关接口和事件下载打单软件常见问题沙盒测试联系我们快递接口（快递公司查看）即时配送接口（商家查看）概述版本说明配送公司信息开发必读相关接口和事件附录 1：品类表附录 2：order_status 枚举值沙盒测试常见问题联系我们广告Banner 广告激励视频广告插屏广告视频广告视频前贴广告格子广告原生模板广告广告预加载接口广告数据接口交易投诉处理安全指引健康运营指引企业微信兼容调试性能与体验启动性能运行时性能性能分析工具体验评分体验评分简介评分方法与规则评分方法性能体验最佳实践基础库版本分布低版本兼容实时日志小程序测速小程序搜索小程序搜索优化指南商品数据接 入（内测）小程序直播接入说明组件接口服务端接口直播间接口商品管理接口成员管理接口长期订阅相关接口其他能力版本更新日志行业能力乘车码仿原生模板仿原生跳转生码扫码支付用户注册签约（可选)用户解约（可选）用户签约状态查询欠费支付查询线路接口设置线路接口查询欠费用户列表城市服务城市服务接入安全检测城市服务消息通路接口城市服务快速填写组件城市服务实名信息校验交易组件交易组件介绍接入视频号指引标准版交易组件及开放接口标准版交易组件介绍标准版交易组件接入指引组件接口服务端接口开店接口接入指南上传图片异步状态查询注册小商店账号提交支付资质提交小商店基础信息服务市场接口接入服务市场必读登录验证获取用户购买的在有效期内的服务列表获取用户购买的服务订单列表装修服务启用/停用装修服务装修体验版接入商品前必需接口获取类目详情获取品牌列表获取运费模板获取商品分类SPU接口（修改需重新上架商品）商品接口使用场景指引添加商品删除商品获取商品获取商品列表搜索商品更新商品上架商品下架商品SKU接口（修改需重新上架商品）添加SKU批量添加SKU删除SKU获取SKU信息批量获取SKU信息更新SKU更新SKU价格更新库存获取库存订单接口获取订单列表获取订单详情搜索订单物流接口获取快递公司列表订单发货优惠券接口创建优惠券更新优惠券更新优惠券状态获取优惠券信息获取优惠券列表发放优惠券店铺接口获取基本信息客服接口直播接口返回码自定义版交易组件及开放接口自定义版交易组件介绍自定义版交易组件接入指引服务端接口申请接入接口接入申请/变更查询接入审核结果接入商品前必需接口获取类目详情上传图片上传品牌信息上传类目资质获取小程序提交过的入驻资质信息SPU接口商品接口使用场景指引添加商品删除商品获取商品获取商品列表更新商品免审更新商品（部分字段）上架商品下架商品订单接口检查场景值是否在支付校验范围内生成订单并获取ticket同步订单支付结果获取订单物流接口获取快递公司列表订单确认收货订单发货售后接口创建售后获取售后更新售后返回码事件回调事件回调接入流程商家接入回调商品审核回调类目审核回调品牌审核回调订单更新回调交易组件运营规范非个人主体 开放类目非个人主体 开放类目行业资质要求非个人主体 开放类目商品资质要求禁售商品列表资质证照示例说明框架小程序配置全局配置页面配置sitemap 配置场景值框架接口小程序 AppAppgetApp页面PagegetCurrentPages自定义组件ComponentBehavior模块化requiremoduleexportsrequirePluginrequireMiniProgram基础功能wxwx.envconsoleconsole.debugconsole.errorconsole.groupconsole.groupEndconsole.infoconsole.logconsole.warn定时器setTimeoutclearTimeoutsetIntervalclearIntervalWXML 语法参考数据绑定列表渲染条件渲染模板引用WXS 语法参考模块变量注释运算符语句数据类型基础类库组件视图容器movable-viewcover-imagecover-viewmatch-mediamovable-areascroll-viewswiperswiper-itemview基础内容iconprogressrich-texttext表单组件buttoncheckboxcheckbox-groupeditorforminputkeyboard-accessorylabelpickerpicker-viewpicker-view-columnradioradio-groupsliderswitchtextarea导航functional-page-navigatornavigator媒体组件audiocameraimagelive-playerlive-pushervideovoip-room地图map开放能力adad-customofficial-accountopen-dataweb-view原生组件说明native-component无障碍访问aria-component导航栏navigation-bar页面属性配置节点page-metaAPI基础wx.canIUsewx.base64ToArrayBufferwx.arrayBufferToBase64系统系统信息wx.getSystemInfoSyncwx.getSystemInfoAsyncwx.getSystemInfo更新wx.updateWeChatAppwx.getUpdateManagerUpdateManagerUpdateManager.applyUpdateUpdateManager.onCheckForUpdateUpdateManager.onUpdateFailedUpdateManager.onUpdateReady小程序生命周期wx.getLaunchOptionsSyncwx.getEnterOptionsSync应用级事件wx.onUnhandledRejectionwx.onThemeChangewx.onPageNotFoundwx.onErrorwx.onAudioInterruptionEndwx.onAudioInterruptionBeginwx.onAppShowwx.onAppHidewx.offUnhandledRejectionwx.offThemeChangewx.offPageNotFoundwx.offErrorwx.offAudioInterruptionEndwx.offAudioInterruptionBeginwx.offAppShowwx.offAppHide调试wx.setEnableDebugwx.getRealtimeLogManagerwx.getLogManagerconsoleconsole.debugconsole.errorconsole.groupconsole.groupEndconsole.infoconsole.logconsole.warnLogManagerLogManager.debugLogManager.infoLogManager.logLogManager.warnRealtimeLogManagerRealtimeLogManager.addFilterMsgRealtimeLogManager.errorRealtimeLogManager.infoRealtimeLogManager.setFilterMsgRealtimeLogManager.warnRealtimeLogManager.in定时器clearIntervalclearTimeoutsetIntervalsetTimeout环境变量env路由wx.switchTabEventChannelwx.reLaunchwx.redirectTowx.navigateTowx.navigateBackEventChannelEventChannel.emitEventChannel.offEventChannel.onEventChannel.once界面交互wx.showToastwx.showModalwx.showLoadingwx.showActionSheetwx.hideToastwx.hideLoadingwx.enableAlertBeforeUnloadwx.disableAlertBeforeUnload导航栏wx.showNavigationBarLoadingwx.setNavigationBarTitlewx.setNavigationBarColorwx.hideNavigationBarLoadingwx.hideHomeButton背景wx.setBackgroundTextStylewx.setBackgroundColorTab Barwx.showTabBarRedDotwx.showTabBarwx.setTabBarStylewx.setTabBarItemwx.setTabBarBadgewx.removeTabBarBadgewx.hideTabBarRedDotwx.hideTabBar字体wx.loadFontFace下拉刷新wx.stopPullDownRefreshwx.startPullDownRefresh滚动wx.pageScrollTo动画wx.createAnimationAnimationAnimation.leftAnimation.matrixAnimation.matrix3dAnimation.opacityAnimation.rightAnimation.rotateAnimation.rotate3dAnimation.rotateXAnimation.rotateYAnimation.rotateZAnimation.scaleAnimation.scale3dAnimation.scaleXAnimation.scaleYAnimation.scaleZAnimation.skewAnimation.skewXAnimation.skewYAnimation.stepAnimation.topAnimation.translateAnimation.translate3dAnimation.translateXAnimation.translateYAnimation.translateZAnimation.widthAnimation.bottomAnimation.exportAnimation.backgroundColorAnimation.height置顶wx.setTopBarText自定义组件wx.nextTick菜单wx.getMenuButtonBoundingClientRect窗口wx.setWindowSizewx.onWindowResizewx.offWindowResize键盘wx.onKeyboardHeightChangewx.offKeyboardHeightChangewx.hideKeyboardwx.getSelectedTextRange网络发起请求wx.requestRequestTaskRequestTask.abortRequestTask.offHeadersReceivedRequestTask.onHeadersReceived下载wx.downloadFileDownloadTaskDownloadTask.abortDownloadTask.offHeadersReceivedDownloadTask.offProgressUpdateDownloadTask.onHeadersReceivedDownloadTask.onProgressUpdate上传wx.uploadFileUploadTaskUploadTask.abortUploadTask.offHeadersReceivedUploadTask.offProgressUpdateUploadTask.onHeadersReceivedUploadTask.onProgressUpdateWebSocketwx.sendSocketMessagewx.onSocketOpenwx.onSocketMessagewx.onSocketErrorwx.onSocketClosewx.connectSocketwx.closeSocketSocketTaskSocketTask.closeSocketTask.onCloseSocketTask.onErrorSocketTask.onMessageSocketTask.onOpenSocketTask.sendmDNSwx.stopLocalServiceDiscoverywx.startLocalServiceDiscoverywx.onLocalServiceResolveFailwx.onLocalServiceLostwx.onLocalServiceFoundwx.onLocalServiceDiscoveryStopwx.offLocalServiceResolveFailwx.offLocalServiceLostwx.offLocalServiceFoundwx.offLocalServiceDiscoveryStopUDP 通信wx.createUDPSocketUDPSocketUDPSocket.bindUDPSocket.closeUDPSocket.offCloseUDPSocket.offErrorUDPSocket.offListeningUDPSocket.offMessageUDPSocket.onCloseUDPSocket.onErrorUDPSocket.onListeningUDPSocket.onMessageUDPSocket.send数据缓存wx.setStorageSyncwx.setStoragewx.removeStorageSyncwx.removeStoragewx.getStorageSyncwx.getStorageInfoSyncwx.getStorageInfowx.getStoragewx.clearStorageSyncwx.clearStorage周期性更新wx.setBackgroundFetchTokenwx.onBackgroundFetchDatawx.getBackgroundFetchTokenwx.getBackgroundFetchData媒体地图wx.createMapContextMapContextMapContext.addCustomLayerMapContext.addGroundOverlayMapContext.addMarkersMapContext.fromScreenLocationMapContext.getCenterLocationMapContext.getRegionMapContext.getRotateMapContext.getScaleMapContext.getSkewMapContext.includePointsMapContext.initMarkerClusterMapContext.moveAlongMapContext.moveToLocationMapContext.onMapContext.openMapAppMapContext.removeCustomLayerMapContext.removeGroundOverlayMapContext.removeMarkersMapContext.setCenterOffsetMapContext.toScreenLocationMapContext.translateMarkerMapContext.updateGroundOverlay图片wx.saveImageToPhotosAlbumwx.previewMediawx.previewImagewx.getImageInfowx.compressImagewx.chooseMessageFilewx.chooseImage视频wx.saveVideoToPhotosAlbumwx.openVideoEditorwx.getVideoInfowx.createVideoContextwx.compressVideowx.chooseVideowx.chooseMediaVideoContextVideoContext.exitFullScreenVideoContext.exitPictureInPictureVideoContext.hideStatusBarVideoContext.pauseVideoContext.playVideoContext.playbackRateVideoContext.requestFullScreenVideoContext.seekVideoContext.sendDanmuVideoContext.showStatusBarVideoContext.stop音频wx.stopVoicewx.setInnerAudioOptionwx.playVoicewx.pauseVoicewx.getAvailableAudioSourceswx.createMediaAudioPlayerwx.createInnerAudioContextwx.createAudioContextInnerAudioContextInnerAudioContext.destroyInnerAudioContext.offCanplayInnerAudioContext.offEndedInnerAudioContext.offErrorInnerAudioContext.offPauseInnerAudioContext.offPlayInnerAudioContext.offSeekedInnerAudioContext.offSeekingInnerAudioContext.offStopInnerAudioContext.offTimeUpdateInnerAudioContext.offWaitingInnerAudioContext.onCanplayInnerAudioContext.onEndedInnerAudioContext.onErrorInnerAudioContext.onPauseInnerAudioContext.onPlayInnerAudioContext.onSeekedInnerAudioContext.onSeekingInnerAudioContext.onStopInnerAudioContext.onTimeUpdateInnerAudioContext.onWaitingInnerAudioContext.pauseInnerAudioContext.playInnerAudioContext.seekInnerAudioContext.stopMediaAudioPlayerMediaAudioPlayer.addAudioSourceMediaAudioPlayer.destroyMediaAudioPlayer.removeAudioSourceMediaAudioPlayer.startMediaAudioPlayer.stopAudioContextAudioContext.pauseAudioContext.playAudioContext.seekAudioContext.setSrc背景音频wx.stopBackgroundAudiowx.seekBackgroundAudiowx.playBackgroundAudiowx.pauseBackgroundAudiowx.onBackgroundAudioStopwx.onBackgroundAudioPlaywx.onBackgroundAudioPausewx.getBackgroundAudioPlayerStatewx.getBackgroundAudioManagerBackgroundAudioManagerBackgroundAudioManager.onCanplayBackgroundAudioManager.onEndedBackgroundAudioManager.onErrorBackgroundAudioManager.onNextBackgroundAudioManager.onPauseBackgroundAudioManager.onPlayBackgroundAudioManager.onPrevBackgroundAudioManager.onSeekedBackgroundAudioManager.onSeekingBackgroundAudioManager.onStopBackgroundAudioManager.onTimeUpdateBackgroundAudioManager.onWaitingBackgroundAudioManager.pauseBackgroundAudioManager.playBackgroundAudioManager.seekBackgroundAudioManager.stop实时音视频wx.createLivePusherContextwx.createLivePlayerContextLivePlayerContextLivePlayerContext.exitFullScreenLivePlayerContext.exitPictureInPictureLivePlayerContext.muteLivePlayerContext.pauseLivePlayerContext.playLivePlayerContext.requestFullScreenLivePlayerContext.requestPictureInPictureLivePlayerContext.resumeLivePlayerContext.snapshotLivePlayerContext.stopLivePusherContextLivePusherContext.pauseLivePusherContext.pauseBGMLivePusherContext.playBGMLivePusherContext.resumeLivePusherContext.resumeBGMLivePusherContext.sendMessageLivePusherContext.setBGMVolumeLivePusherContext.setMICVolumeLivePusherContext.snapshotLivePusherContext.startLivePusherContext.startPreviewLivePusherContext.stopLivePusherContext.stopBGMLivePusherContext.stopPreviewLivePusherContext.switchCameraLivePusherContext.toggleTorch录音wx.stopRecordwx.startRecordwx.getRecorderManagerRecorderManagerRecorderManager.onErrorRecorderManager.onFrameRecordedRecorderManager.onInterruptionBeginRecorderManager.onInterruptionEndRecorderManager.onPauseRecorderManager.onResumeRecorderManager.onStartRecorderManager.onStopRecorderManager.pauseRecorderManager.resumeRecorderManager.startRecorderManager.stop相机wx.createCameraContextCameraContextCameraContext.onCameraFrameCameraContext.setZoomCameraContext.startRecordCameraContext.stopRecordCameraContext.takePhotoCameraFrameListenerCameraFrameListener.startCameraFrameListener.stop富文本EditorContextEditorContext.blurEditorContext.clearEditorContext.formatEditorContext.getContentsEditorContext.getSelectionTextEditorContext.insertDividerEditorContext.insertImageEditorContext.insertTextEditorContext.redoEditorContext.removeFormatEditorContext.scrollIntoViewEditorContext.setContentsEditorContext.undo音视频合成wx.createMediaContainerMediaContainerMediaContainer.addTrackMediaContainer.destroyMediaContainer.exportMediaContainer.extractDataSourceMediaContainer.removeTrackMediaTrack实时语音wx.updateVoIPChatMuteConfigwx.subscribeVoIPVideoMemberswx.onVoIPVideoMembersChangedwx.onVoIPChatSpeakersChangedwx.onVoIPChatMembersChangedwx.onVoIPChatInterruptedwx.offVoIPVideoMembersChangedwx.offVoIPChatMembersChangedwx.offVoIPChatInterruptedwx.joinVoIPChatwx.exitVoIPChat画面录制器wx.createMediaRecorderMediaRecorderMediaRecorder.destroyMediaRecorder.offMediaRecorder.onMediaRecorder.pauseMediaRecorder.requestFrameMediaRecorder.resumeMediaRecorder.startMediaRecorder.stop视频解码器wx.createVideoDecoderVideoDecoderVideoDecoder.getFrameDataVideoDecoder.offVideoDecoder.onVideoDecoder.removeVideoDecoder.seekVideoDecoder.startVideoDecoder.stop位置wx.stopLocationUpdatewx.startLocationUpdateBackgroundwx.startLocationUpdatewx.openLocationwx.onLocationChangewx.offLocationChangewx.getLocationwx.chooseLocation转发wx.updateShareMenuwx.showShareMenuwx.showShareImageMenuwx.onCopyUrlwx.offCopyUrlwx.hideShareMenuwx.getShareInfowx.authPrivateMessage画布wx.createOffscreenCanvaswx.createCanvasContextwx.canvasToTempFilePathwx.canvasPutImageDatawx.canvasGetImageDataCanvasCanvas.cancelAnimationFrameCanvas.createImageCanvas.createImageDataCanvas.createPath2DCanvas.getContextCanvas.requestAnimationFrameCanvas.toDataURLCanvasContextCanvasContext.arcCanvasContext.arcToCanvasContext.beginPathCanvasContext.bezierCurveToCanvasContext.clearRectCanvasContext.clipCanvasContext.closePathCanvasContext.createCircularGradientCanvasContext.createLinearGradientCanvasContext.createPatternCanvasContext.drawCanvasContext.drawImageCanvasContext.fillCanvasContext.fillRectCanvasContext.fillTextCanvasContext.lineToCanvasContext.measureTextCanvasContext.moveToCanvasContext.quadraticCurveToCanvasContext.rectCanvasContext.restoreCanvasContext.rotateCanvasContext.saveCanvasContext.scaleCanvasContext.setFillStyleCanvasContext.setFontSizeCanvasContext.setGlobalAlphaCanvasContext.setLineCapCanvasContext.setLineDashCanvasContext.setLineJoinCanvasContext.setLineWidthCanvasContext.setMiterLimitCanvasContext.setShadowCanvasContext.setStrokeStyleCanvasContext.setTextAlignCanvasContext.setTextBaselineCanvasContext.setTransformCanvasContext.strokeCanvasContext.strokeRectCanvasContext.strokeTextCanvasContext.transformCanvasContext.translateCanvasGradientCanvasGradient.addColorStopColorImageImageDataOffscreenCanvasOffscreenCanvas.getContextPath2DRenderingContext文件wx.saveFileToDiskwx.saveFilewx.removeSavedFilewx.openDocumentwx.getSavedFileListwx.getSavedFileInfowx.getFileSystemManagerwx.getFileInfoFileSystemManagerFileSystemManager.accessFileSystemManager.accessSyncFileSystemManager.appendFileFileSystemManager.appendFileSyncFileSystemManager.copyFileFileSystemManager.copyFileSyncFileSystemManager.getFileInfoFileSystemManager.getSavedFileListFileSystemManager.mkdirFileSystemManager.mkdirSyncFileSystemManager.readdirFileSystemManager.readdirSyncFileSystemManager.readFileFileSystemManager.readFileSyncFileSystemManager.removeSavedFileFileSystemManager.renameFileSystemManager.renameSyncFileSystemManager.rmdirFileSystemManager.rmdirSyncFileSystemManager.saveFileFileSystemManager.saveFileSyncFileSystemManager.statFileSystemManager.statSyncFileSystemManager.unlinkFileSystemManager.unlinkSyncFileSystemManager.unzipFileSystemManager.writeFileFileSystemManager.writeFileSyncStatsStats.isDirectoryStats.isFile开放接口登录wx.loginwx.checkSession小程序跳转wx.navigateToMiniProgramwx.navigateBackMiniProgram帐号信息wx.getAccountInfoSync用户信息wx.getUserProfilewx.getUserInfoUserInfo数据上报wx.reportMonitorwx.reportEventwx.getExptInfoSync数据分析wx.reportAnalytics支付wx.requestPayment授权wx.authorizeForMiniProgramwx.authorize设置wx.openSettingwx.getSettingAuthSettingSubscriptionsSetting收货地址wx.chooseAddress卡券wx.openCardwx.addCard发票wx.chooseInvoiceTitlewx.chooseInvoice生物认证wx.startSoterAuthenticationwx.checkIsSupportSoterAuthenticationwx.checkIsSoterEnrolledInDevice微信运动wx.getWeRunData性能wx.reportPerformancewx.getPerformanceEntryListEntryList.getEntriesEntryList.getEntriesByNameEntryList.getEntriesByTypePerformancePerformance.createObserverPerformance.getEntriesPerformance.getEntriesByNamePerformance.getEntriesByTypePerformance.setBufferSizePerformanceObserverPerformanceObserver.disconnectPerformanceObserver.observe订阅消息wx.requestSubscribeMessage微信红包wx.showRedPackage群工具wx.getGroupEnterInfo设备外围设备wx.onBLEPeripheralConnectionStateChangedwx.offBLEPeripheralConnectionStateChangedwx.createBLEPeripheralServerBLEPeripheralServerBLEPeripheralServer.addServiceBLEPeripheralServer.closeBLEPeripheralServer.offCharacteristicReadRequestBLEPeripheralServer.offCharacteristicSubscribedBLEPeripheralServer.offCharacteristicUnsubscribedBLEPeripheralServer.offCharacteristicWriteRequestBLEPeripheralServer.onCharacteristicReadRequestBLEPeripheralServer.onCharacteristicSubscribedBLEPeripheralServer.onCharacteristicUnsubscribedBLEPeripheralServer.onCharacteristicWriteRequestBLEPeripheralServer.removeServiceBLEPeripheralServer.startAdvertisingBLEPeripheralServer.stopAdvertisingBLEPeripheralServer.writeCharacteristicValueiBeaconwx.stopBeaconDiscoverywx.startBeaconDiscoverywx.onBeaconUpdatewx.onBeaconServiceChangewx.offBeaconUpdatewx.offBeaconServiceChangewx.getBeaconsIBeaconInfoNFCwx.stopHCEwx.startHCEwx.sendHCEMessagewx.onHCEMessagewx.offHCEMessagewx.getNFCAdapterwx.getHCEStateIsoDepIsoDep.closeIsoDep.connectIsoDep.getHistoricalBytesIsoDep.getMaxTransceiveLengthIsoDep.isConnectedIsoDep.setTimeoutIsoDep.transceiveMifareClassicMifareClassic.closeMifareClassic.connectMifareClassic.getMaxTransceiveLengthMifareClassic.isConnectedMifareClassic.setTimeoutMifareClassic.transceiveMifareUltralightMifareUltralight.closeMifareUltralight.connectMifareUltralight.getMaxTransceiveLengthMifareUltralight.isConnectedMifareUltralight.setTimeoutMifareUltralight.transceiveNdefNdef.closeNdef.connectNdef.isConnectedNdef.offNdefMessageNdef.onNdefMessageNdef.setTimeoutNdef.writeNdefMessageNfcANfcA.closeNfcA.connectNfcA.getAtqaNfcA.getMaxTransceiveLengthNfcA.getSakNfcA.isConnectedNfcA.setTimeoutNfcA.transceiveNFCAdapterNFCAdapter.getIsoDepNFCAdapter.getMifareClassicNFCAdapter.getMifareUltralightNFCAdapter.getNdefNFCAdapter.getNfcANFCAdapter.getNfcBNFCAdapter.getNfcFNFCAdapter.getNfcVNFCAdapter.offDiscoveredNFCAdapter.onDiscoveredNFCAdapter.startDiscoveryNFCAdapter.stopDiscoveryNfcBNfcB.closeNfcB.connectNfcB.getMaxTransceiveLengthNfcB.isConnectedNfcB.setTimeoutNfcB.transceiveNfcFNfcF.closeNfcF.connectNfcF.getMaxTransceiveLengthNfcF.isConnectedNfcF.setTimeoutNfcF.transceiveNfcVNfcV.closeNfcV.connectNfcV.getMaxTransceiveLengthNfcV.isConnectedNfcV.setTimeoutNfcV.transceiveWi-Fiwx.stopWifiwx.startWifiwx.setWifiListwx.onWifiConnectedwx.onGetWifiListwx.offWifiConnectedwx.offGetWifiListwx.getWifiListwx.getConnectedWifiwx.connectWifiWifiInfo低功耗蓝牙wx.setBLEMTUwx.readBLECharacteristicValuewx.onBLEConnectionStateChangewx.onBLECharacteristicValueChangewx.offBLEConnectionStateChangewx.offBLECharacteristicValueChangewx.notifyBLECharacteristicValueChangewx.makeBluetoothPairwx.getBLEDeviceServiceswx.getBLEDeviceRSSIwx.getBLEDeviceCharacteristicswx.createBLEConnectionwx.closeBLEConnectionwx.writeBLECharacteristicValue日历wx.addPhoneRepeatCalendarwx.addPhoneCalendar联系人wx.addPhoneContact无障碍wx.checkIsOpenAccessibility蓝牙wx.stopBluetoothDevicesDiscoverywx.startBluetoothDevicesDiscoverywx.openBluetoothAdapterwx.onBluetoothDeviceFoundwx.onBluetoothAdapterStateChangewx.offBluetoothDeviceFoundwx.offBluetoothAdapterStateChangewx.getConnectedBluetoothDeviceswx.getBluetoothDeviceswx.getBluetoothAdapterStatewx.closeBluetoothAdapter电量wx.getBatteryInfoSyncwx.getBatteryInfo剪贴板wx.setClipboardDatawx.getClipboardData网络wx.onNetworkStatusChangewx.offNetworkStatusChangewx.getNetworkType屏幕wx.setScreenBrightnesswx.setKeepScreenOnwx.onUserCaptureScreenwx.offUserCaptureScreenwx.getScreenBrightness电话wx.makePhoneCall加速计wx.stopAccelerometerwx.startAccelerometerwx.onAccelerometerChangewx.offAccelerometerChange罗盘wx.stopCompasswx.startCompasswx.onCompassChangewx.offCompassChange设备方向wx.stopDeviceMotionListeningwx.startDeviceMotionListeningwx.onDeviceMotionChangewx.offDeviceMotionChange陀螺仪wx.stopGyroscopewx.startGyroscopewx.onGyroscopeChangewx.offGyroscopeChange性能wx.onMemoryWarningwx.offMemoryWarning扫码wx.scanCode振动wx.vibrateShortwx.vibrateLongWorkerwx.createWorkerWorkerWorker.onMessageWorker.onProcessKilledWorker.postMessageWorker.terminate第三方平台wx.getExtConfigSyncwx.getExtConfigWXMLwx.createSelectorQuerywx.createIntersectionObserverIntersectionObserverIntersectionObserver.disconnectIntersectionObserver.observeIntersectionObserver.relativeToIntersectionObserver.relativeToViewportMediaQueryObserverMediaQueryObserver.disconnectMediaQueryObserver.observeNodesRefNodesRef.boundingClientRectNodesRef.contextNodesRef.fieldsNodesRef.nodeNodesRef.scrollOffsetSelectorQuerySelectorQuery.execSelectorQuery.inSelectorQuery.selectSelectorQuery.selectAllSelectorQuery.selectViewport广告wx.createRewardedVideoAdwx.createInterstitialAdInterstitialAdInterstitialAd.destroyInterstitialAd.loadInterstitialAd.offCloseInterstitialAd.offErrorInterstitialAd.offLoadInterstitialAd.onCloseInterstitialAd.onErrorInterstitialAd.onLoadInterstitialAd.showRewardedVideoAdRewardedVideoAd.destroyRewardedVideoAd.loadRewardedVideoAd.offCloseRewardedVideoAd.offErrorRewardedVideoAd.offLoadRewardedVideoAd.onCloseRewardedVideoAd.onErrorRewardedVideoAd.onLoadRewardedVideoAd.show服务端登录code2Session用户信息getPaidUnionId接口调用凭证getAccessToken数据分析访问留存getDailyRetaingetMonthlyRetaingetWeeklyRetaingetDailySummary访问趋势getDailyVisitTrendgetMonthlyVisitTrendgetWeeklyVisitTrendgetPerformanceDatagetUserPortraitgetVisitDistributiongetVisitPage客服消息getTempMediasendsetTypinguploadTempMedia模板消息（已废弃）addTemplatedeleteTemplategetTemplateLibraryByIdgetTemplateLibraryListgetTemplateListsend统一服务消息send动态消息createActivityIdsetUpdatableMsg插件管理applyPlugingetPluginDevApplyListgetPluginListsetDevPluginApplyStatusunbindPlugin附近的小程序adddeletegetListsetShowStatus小程序码createQRCodegetgetUnlimitedURL Schemegenerate内容安全imgSecCheckmediaCheckAsyncmsgSecCheck直播goodsDeleteaddAssistantaddGoodsaddRoleaddSubAnchorcreateRoomdeleteRoledeleteRoomdeleteSubAnchoreditRoomgetAssistantListgetFollowersgetLiveInfogetPushUrlgetRoleListgetSharedCodegetSubAnchorgoodsAddgoodsAuditgoodsInfogoodsListgoodsPushgoodsResetAuditgoodsSalegoodsSortgoodsUpdategoodsVideomodifyAssistantmodifySubAnchorpushMessageremoveAssistantupdateCommentupdateFeedPublicupdateKFupdateReplay广告getUserActionSetReportsgetUserActionSetsaddUserActionSetaddUserAction云开发getOpenDatagetStatisticsgetVoIPSignreportsendSmscreateSendSmsTask图像处理aiCropscanQRCodesuperresolution即时配送小程序使用abnormalConfirmaddOrderaddTipbindAccountcancelOrdergetAllImmeDeliverygetBindAccountgetOrdermockUpdateOrderonOrderStatusopenDeliverypreAddOrderpreCancelOrderrealMockUpdateOrderreOrder运力方使用onAgentPosQueryonAuthInfoGetonCancelAuthonMockUpdateOrderonOrderAddonOrderAddTipsonOrderCancelonOrderConfirmReturnonOrderPreAddonOrderPreCancelonOrderQueryonOrderReAddonPreAuthCodeGetonRiderScoreSetupdateOrder物流助手小程序使用addOrderbatchGetOrderbindAccountcancelOrdergetAllAccountgetAllDeliverygetOrdergetPathgetPrintergetQuotaonBindResultUpdateonPathUpdatetestUpdateOrderupdatePrinter运力方使用getContactonAddOrderonCancelOrderonCheckBusinessonGetQuotapreviewTemplateupdateBusinessupdatePathOCRbankcardbusinessLicensedriverLicenseidcardprintedTextvehicleLicense运维中心getFeedbackgetFeedbackmediagetJsErrDetailgetJsErrListgetJsErrSearchgetPerformancegetSceneListgetVersionListrealtimelogSearch安全风控getUserRiskRank小程序搜索imageSearchsiteSearchsubmitPages服务市场invokeService生物认证verifySignature订阅消息addTemplatedeleteTemplategetCategorygetPubTemplateKeyWordsByIdgetPubTemplateTitleListgetTemplateListsend工具概览界面项目页卡设置快捷键设置代码编辑项目配置文件编辑器扩展小程序调试特殊场景调试真机调试多帐号调试周期性数据调试数据预拉取调试开发模式第三方平台代开发小程序插件开发企业微信小程序开发PC 小程序开发开发辅助测试号小程序助手版本管理微信开发者·代码管理命令行调用HTTP 调用npm 支持代码片段代码编译文档搜索CPU Profile 支持API MockCI音视频处理骨架屏可视化编辑代码静态依赖分析小程序自动化快速开始脚本示例真机自动化APIAutomatorMiniProgramPageElement常用示例FAQ更新日志工具插件体验评分搜索回调调试sourceMap 匹配调试API 实现差异下载稳定版更新日志预发布版更新日志开发版更新日志云开发介绍快速开始小程序/小游戏公众号基础概念云开发能力重要概念环境插件支持跨账号环境共享未登录模式云托管权限设置服务商模式开发指引指引控制台初始化编辑器调试基础能力数据库上手数据类型权限管理简介安全规则简易权限配置增删查改 (SDK)初始化插入查询查询指令更新删除数据查询、更新数组/对象联表查询增删查改 (管理端)控制台数据库高级操作数据库脚本实时数据推送地理位置聚合能力说明示例事务索引Explain 查询分析数据迁移导入导出数据备份存储API管理文件文件名命名限制组件支持云函数我的第一个云函数获取小程序用户信息异步返回结果使用 npm使用 wx-server-sdk本地调试灰度/版本管理高级日志定时触发器运行机制注意事项管理云函数安全规则测试、日志与监控云托管介绍使用指南最佳实践JavaPHPPythonC#(.NET)云托管概念说明容器内微信信息容器内云调用静态网站简介H5 跳小程序短信跳小程序拓展插件内容管理介绍开通使用内容模型营销工具微信生态小程序环境共享介绍使用指南示例公众号环境共享使用指南Web SDK第三方 Cookie 限制说明使用云开发·示例简介HTMLecho 云函数cloudbase_auth 云函数云调用云调用微信支付支付分账运维监控图表告警工单计费相关支付方式按量付费资源包资源用量提醒与冻结欠费和停服处理预付费配额说明配额调整配额调整规则续费说明资源超限和到期停服规则发票管理代金券开发者资源HTTP API 文档云函数触发云函数数据库导入导出迁移状态查询更新索引新增集合删除集合获取集合信息插入记录删除记录更新记录查询记录聚合统计记录数量存储获取文件上传链接获取文件下载链接删除文件其他获取腾讯云API调用凭证SDK 文档(index)初始化小程序云函数Web常量DYNAMIC_CURRENT_ENV云函数callFunction云托管callContainer文件存储uploadFile小程序云函数downloadFile小程序云函数deleteFilegetTempFileURL工具类CloudgetWXContextloggerCDNgetCloudCallSign开放能力openapiCloudIDgetOpenDatagetVoIPSign微信支付统一下单支付结果回调查询订单关闭订单申请退款查询退款下载对账单分账能力请求单次分账请求多次分账查询分账结果添加分账接收方删除分账接收方完结分账分账回退回退结果查询Web APIcheckLoginstartLogingetJSSDKSignaturerefreshAuth数据库databaseDatabase(index)collectionserverDateRegExpcreateCollectionrunTransactionstartTransactionCollection(index)docaggregate构建查询条件wherelimitorderByskipfield请求getupdateremovecountaddwatchDocument(index)getsetupdateremoveAggregate(index)addFieldsbucketbucketAutocountgeoNeargrouplimitlookupmatchprojectreplaceRootsampleskipsortsortByCountunwindendGeoPointLineStringPolygonMultiPointMultiLineStringMultiPolygon类型GeoPointGeoLineStringGeoPolygonGeoMultiPointGeoMultiLineStringGeoMultiPolygonTransaction(index)collectionrollbackcommitCommand(index)查询·逻辑操作符andornotnor查询·比较操作符eqneqltltegtgteinninexistsmod查询·数组操作符allelemMatchsize查询·地理位置操作符geoNeargeoWithingeoIntersects查询·表达式操作符expr更新·字段操作符setremoveincmulminmaxrename更新·数组操作符pushpopunshiftshiftpullpullAlladdToSet聚合操作符 $(index)Expression算术操作符absaddceildivideexpfloorlnloglog10modmultiplypowsqrttrunc数组操作符arrayElemAtarrayToObjectconcatArraysfilterinindexOfArrayisArraymaprangereducereverseArraysizeslicezip布尔操作符andnotor比较操作符cmpeqgtgteltlteneq条件操作符condifNullswitch日期操作符dateFromPartsdayOfMonthdayOfWeekdayOfYearhourisoDayOfWeekisoWeekisoWeekYearmillisecondminutemonthsecondweekyearsubtract常量操作符literal对象操作符objectToArray集合操作符allElementsTrueanyElementTruesetDifferencesetEqualssetIntersectionsetIsSubsetsetUnion字符串操作符concatdateFromStringdateToStringindexOfBytesindexOfCPsplitstrLenBytesstrLenCPstrcasecmpsubstrsubstrBytessubstrCPtoLowertoUpper累计器操作符addToSetavgfirstlastmaxmergeObjectsminpushstdDevPopstdDevSampsum变量操作符let参考信息错误码兼容性问题更新日志Web SDK扩展能力WeUI组件库快速上手基础组件BadgeGalleryLoadingIcon表单组件FormFormPageCellCellsCheckbox-groupSlideviewUploader操作反馈DialogMsgToptipsHalfScreenDialogActionSheet导航组件NavigationTabbar搜索组件Searchbar其他组件扩展组件emojivideo-swiperrecycle-viewstickytabsgridvtabsindex-listbarrageselect-textwxml-to-canvasfile-uploader多端开发 kbone框架扩展computedmobx-miniprogram-bindings工具类库瘦身工具TypeScript 支持API Promise化threejs-miniprogramlottie-miniprogram国密算法国际化快速入门接口文档Gulp 插件配置文档插件服务微信同声传译OCR 支持服务平台能力简介API更新日志小程序基础库v2.x版本v1.x版本v0.x版本开发者工具小程序·云开发基础库wx-server-sdkIDE & 控制台 暂无相关搜索结果！ 本文档使用 BookStack 构建 × 分享，让知识传承更久远 取消分享 × 文章二维码 手机扫一扫，轻松掌上读 关闭 × 文档下载 普通下载 下载码下载(免登录无限下载) 你与大神的距离，只差一个APP 请下载您需要的格式的文档，随时随地，享受汲取知识的乐趣！ PDF文档 EPUB文档 MOBI文档 温馨提示 每天每在网站阅读学习一分钟时长可下载一本电子书，每天连续签到可增加阅读时长 下载码方式下载：免费、免登录、无限制。 免费获取下载码 下载码 文档格式 PDF EPUB MOBI 码上下载 关闭窗口 × 微信小程序阅读 您与他人的薪资差距，只差一个随时随地学习的小程序 关闭窗口 × 书签列表 关闭 × 阅读记录
阅读进度: 0.00% ( 0/0 )
重置阅读进度 关闭icon | 微信开放文档
微信小程序内容组件图标 icon使用及自定义 - 掘金
微信小程序开发实践：基础内容icon，关于图标的4个实现方案等 - 知乎
微信小程序开发 | 如何在小程序中使用自定义 icon 图标-阿里云开发者社区
小程序实现Icon组件的四种方式 | 微信开放社区
微信小程序开发 | 如何在小程序中使用自定义 icon 图标_微信小程序_彭宏豪95_InfoQ写作社区
【愚公系列】2022年08月 微信小程序-icon图标详解-腾讯云开发者社区-腾讯云
列】2022年08月 微信小程序-icon图标详解-腾讯云开发者社区-腾讯云愚公搬代码【愚公系列】2022年08月 微信小程序-icon图标详解关注作者腾讯云开发者社区文档建议反馈控制台首页学习活动专区工具TVP最新优惠活动文章/答案/技术大牛搜索搜索关闭发布登录/注册首页学习活动专区工具TVP最新优惠活动返回腾讯云官网愚公搬代码首页学习活动专区工具TVP最新优惠活动返回腾讯云官网社区首页 >专栏 >【愚公系列】2022年08月 微信小程序-icon图标详解【愚公系列】2022年08月 微信小程序-icon图标详解愚公搬代码关注发布于 2022-12-01 09:14:211.4K0发布于 2022-12-01 09:14:21举报文章被收录于专栏：历史专栏历史专栏文章目录前言一、自带图标二、实现图标的五种方案1.图片2.精灵图3.CSS绘图4.矢量字体4.1 使用步骤5.SVG格式前言在小程序中经常会用到各种各样的图标，如果这些图标都使用图片的话，将会大大增加小程序打包后的体积，而小程序限制代码最大2MB，分包加载4MB，所以为了缩小体积，我们可以使用图标来缩小体积。使用图标有两种方式：自带图标外部图标（图片、精灵图、CSS绘图、矢量字体、SVG格式）自带图标组件属性说明：属性类型默认值必填说明最低版本typestring是icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear1.0.0sizenumber/string23否icon的大小，单位默认为px，2.4.0起支持传入单位(rpx/px)，2.21.3起支持传入其余单位(rem 等)。1.0.0colorstring否icon的颜色，同css的color1.0.0一、自带图标Page({基础组件 - Icon - 《微信小程序官方开发文档(全) - 20210305》 - 书栈网 · BookStack