文本和图标组件
# 文本和图标组件
前言
在 uni-app 中，组件是视图层的基本组成单元，也是一个独立且可复用的功能模块封装。简单来说，组件就类似网页中的标签元素，但 uni-app 对常用的视图和交互进行了进一步的封装，使得跨平台开发更加便捷。
# 一、文本组件（text）
# 1.1 基本介绍
text 组件用于包裹文本内容，并提供了一些额外的属性，用于控制文本的选择、空格显示、HTML 实体解析等。
# 1.2 常用属性
| 属性名 | 类型 | 默认值 | 说明 | 平台差异说明 |
|---|---|---|---|---|
| selectable | Boolean | false | 文本是否可被选择（即长按是否能出现复制菜单） | -- |
| user-select | Boolean | false | 文本是否可选，功能同上 | 微信小程序支持 |
| space | String | -- | 显示连续空格的处理方式 | 钉钉小程序不支持 |
| decode | Boolean | false | 是否将 HTML 实体进行解码 | 百度、钉钉小程序不支持 |
space 属性详解
space 属性用于控制连续空格的显示格式，可根据值来决定空格大小。常见取值说明：
| 值 | 说明 |
|---|---|
| ensp | 中文字符空格的一半大小 |
| emsp | 中文字符空格的标准大小 |
| nbsp | 根据字体设置的空格大小 |
例如，当 space 为 ensp 时，在文本中连续输入的空格会显示成半个汉字的宽度。
# 1.3 效果展示
下面演示了在不同情况下配置 text 组件的表现，示例仅供参考，实际使用可根据项目需求自行设置 selectable、decode 等属性。
提示
selectable在不同平台的兼容情况略有差异，若在某平台不生效，可检查平台文档或使用相应兼容属性（如微信小程序的user-select）。- 使用
decode可以让形如 等 HTML 实体在文本中被真实解析显示出来。
# 二、图标组件（icon）
在移动应用或 Web 开发中，图标是 UI 设计中非常重要的一部分。uni-app 提供了内置的 icon 组件，使用默认图标非常方便。同时，项目中也常需要自定义图标，可通过“字体图标”（iconfont）等方式来实现。
# 2.1 使用默认图标
icon 组件支持多种 type 来显示系统内置的图标，常用的如“success”、“info”、“search”等。以下为它的常用属性说明：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | String | -- | 指定 icon 的类型（如 success, info, search 等） |
| size | Number | 23 | icon 的大小，单位是 px |
| color | Color | -- | icon 的颜色，类似于 CSS 中的 color 属性 |
由于不同平台的图标库支持的类型不尽相同，所以实际可用的
type值也会有平台差异。
# 2.1.1 不同平台可用的 type 值
| 平台 | type 有效值 |
|---|---|
| App、H5、微信、QQ 小程序 | success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
| 支付宝小程序 | info, warn, waiting, cancel, download, search, clear, success, success_no_circle, loading |
| 百度小程序 | success, info, warn, waiting, success_no_circle, clear, search, personal, setting, top, close, cancel, download, checkboxSelected, radioSelected, radioUnselect |
# 2.1.2 效果演示
下图演示了在不同平台下，通过传入不同 type 来展示 icon 组件的效果（仅供参考，不同平台或版本实际显示可能会略有差异）：
提示
如果某些平台下的 type 无效或显示为空白，可能是该平台暂未支持对应的图标类型。可以更换其他 type 或使用字体图标来解决兼容性问题。
# 2.2 引入自定义图标（字体图标）
uni-app 默认内置图标数量有限，为了满足更多样化的需求，自定义图标就非常重要。常见做法是使用“字体图标”方案（如阿里 Iconfont），相较于图片图标，它具有矢量可缩放、样式可控等优点。
# 2.2.1 字体图标的使用方式
- 引入字体文件：可以是网络字体（需带
https）、本地字体（小程序端需转换为 base64 或使用自动转码）等。 - 在 CSS 中声明：通过
@font-face语法指定font-family。 - 在 HTML 中引用：用
<text>或<i>等标签，并应用对应的 CSS 类名来显示图标。 - 控制样式：使用普通 CSS 来控制图标的大小、颜色等。
小程序限制
- 小程序不支持在 CSS 中直接使用本地文件路径的字体文件，需要转换为 base64 或放到网络服务器上以
https路径引用。 - 如果自动转换不成功，可能需要手动将字体文件转换为 base64。 :::
# 2.2.2 演示：从 Iconfont 引入字体图标
- 前往 iconfont.cn (opens new window) 选择并下载所需图标集。
- 解压后通常得到如下文件结构（包含
.css、.woff或.ttf等字体文件，以及示例demo_index.html）：
1. 将字体文件与 CSS 引入项目。在 uni-app 项目中，可在 static 目录或自建 assets 目录存放这些文件，并引用或转换为 base64。
2. 使用示例：打开下载文件的 demo_index.html 查看哪些类名对应哪些图标，例如 .icon-xxx。在 uni-app 中使用时，需要去掉开头的 “.”，只使用类名（或直接复制参考样式到你的 CSS/less/scss 中）。
自定义图标的颜色和大小
- 通过修改
font-size,color等 CSS 属性可灵活控制字体图标的外观。 - 可使用媒体查询或其他响应式设计手段，为不同屏幕大小设置不同的图标尺寸。
# 三、常见问题及总结
- 在浏览器端可显示，而小程序端不显示
- 可能是小程序端不支持本地引用方式，需使用 https 网络字体 或 base64 字体文件；
- 检查控制台报错信息，如“无法加载字体”或“路径非法”，则需修改引用路径或转换为 base64。
- 字体文件超过 40kb
uni-app默认自动转 base64 的限制为 40kb 以下，如超过会导致无法自动转码；- 解决方案：自行压缩字体文件（在 iconfont 网站里只勾选必要图标），或手动将字体转换为 base64，再引用。
- 在小程序端需要选择自定义路径
App/H5平台可直接引用本地字体路径，而小程序端通常需将字体放在网络地址（带 https）或转为 base64。
- 平台自带 icon 的 type 不够用
- 建议直接使用字体图标来丰富项目的图标库，统一管理更便捷。
- onLoad / onReady 阶段使用图标不显示
- 检查
CSS是否正确引入；确保@font-face已加载完毕（通常不会有明显延迟，但一些平台或网络状况特殊时需要注意）。
- 检查
提示
- **文本组件（text）**在
uni-app中主要用于展示文字，还可控制文字是否可被选择、是否解析 HTML 实体、以及空格的处理方式，帮助我们更好地排版和布局。 - **图标组件（icon）**则为我们带来了系统内置图标的便捷使用方式，但由于平台差异，内置图标类型有限；对于更丰富的图标需求，自定义字体图标（iconfont）是主流方案，可以灵活地调整图标外观并兼容多平台。
- 在实际开发中，需要根据目标平台（App、H5、小程序）的特性来选择合适的引用方式（本地、网络或 base64），并注意文件体积限制、https 协议以及路径问题。如遇到显示异常或报错情况，大多数是路径引用或平台兼容方面的原因。
- 如果遇到无法显示或报错，建议查看小程序/浏览器控制台日志，确认是否有“资源加载失败”的提示，并结合文档或社区资源进行排查。