微信小程序text组件全解析与实战指南

以下是基于微信小程序官方文档 text 组件说明 的详细解析，包含 <text> 组件的完整使用示例、属性详解、可选项说明和总结表格。

---

一、基本结构与使用方法

<text> 是小程序中用于展示文本的基础组件，支持富文本内容（通过 decode 属性），并可用于显示动态数据。它不会自动换行，适合用于标题、段落、按钮文字等场景。

示例代码（WXML）

<!-- index.wxml -->
<view class="container">
  <!-- 基础文本展示 -->
  <text class="title">欢迎来到小程序</text>

  <!-- 动态绑定文本 -->
  <text>当前时间：{{currentTime}}</text>

  <!-- 富文本展示 -->
  <text decode="{{true}}">&lt;strong&gt;加粗&lt;/strong&gt; 和 &amp; 符号</text>

  <!-- 点击事件 -->
  <text class="link" bindtap="onLinkTap">点击我跳转</text>
</view>

---

二、JS 数据定义与事件处理（index.js）

Page({
  data: {
    currentTime: new Date().toLocaleTimeString()
  },

  onLinkTap() {
    wx.showToast({ title: '链接被点击' });
  }
});

---

三、WXSS 样式定义（index.wxss）

.container {
  padding: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.link {
  color: blue;
  text-decoration: underline;
}

---

四、<text> 属性详解与可选项说明

属性名	类型	默认值	可选值	描述
selectable	Boolean	false	true / false	是否可选中文本（长按复制）
space	String	“false”	"ensp" / "emsp" / "nbsp" / "false"	控制空格渲染方式
decode	Boolean	false	true / false	是否解码 HTML 实体字符（如 <、>）
bindtap	EventHandle	-	-	点击文本时触发的事件

---

五、space 属性可选项说明

space 值	效果描述
"ensp"	中文字符空格大小，即半个中文字符宽度
"emsp"	一个中文字符宽度的空格
"nbsp"	不换行的空格，相当于 HTML 中的  
"false" 或省略	不解析空格，连续多个空格只显示一个

---

六、注意事项

• <text> 不支持自动换行，如果需要换行请使用 [\n](file://D:\workspace\me\rbac2024\read\后台系统\shop-api\itmk-base-web\target\classes\META-INF\spring-configuration-metadata.json) 或嵌套在 <view> 中。
• 使用 decode="{{true}}" 可以渲染 HTML 转义字符，但不支持完整的 HTML 标签。
• <text> 支持 [class](file://D:\workspace\me\rbac2024\read\后台系统\shop-api\itmk-base-common\target\classes\com\itmk\Main.class) 和内联样式控制外观。
• 若需用户复制文本，建议设置 selectable="{{true}}"。

---

七、完整代码注释说明

<text 
  selectable="{{true}}"           <!-- 允许用户选择/复制文本 -->
  space="ensp"                    <!-- 设置中文字符空格大小 -->
  decode="{{true}}"               <!-- 启用 HTML 字符解码 -->
  bindtap="handleTextClick"       <!-- 点击事件 -->
>
  &lt;p&gt;这是一个段落&lt;/p&gt;&amp;符号会被解码
</text>

---

八、总结表格：<text> 标签常用属性一览

属性名	类型	默认值	可选值	描述
selectable	Boolean	false	true / false	是否允许用户选择文本
space	String	“false”	"ensp" / "emsp" / "nbsp" / "false"	控制空格渲染方式
decode	Boolean	false	true / false	是否解码 HTML 实体字符
bindtap	EventHandle	-	-	点击事件回调函数

---

九、结语

<text> 是微信小程序中最基础的内容组件，适用于展示静态或动态文本内容。通过 decode 可以安全地展示 HTML 转义字符，space 属性可以精确控制空格显示效果，而 selectable 则增强了用户的交互体验。

建议在开发过程中结合 wx:if、数据绑定等特性实现更灵活的文本展示逻辑，并注意 <text> 与 <view> 在布局行为上的差异。