微信小程序-text组件

合集 - 微信小程序(60)

1.小程序开发概述2023-04-022.创建第一个小程序2023-04-023.微信小程序app.json文件2023-04-024.微信小程序-sitemap.json文件2023-04-025.微信小程序app.js文件2023-04-026.微信小程序app.wxss文件2023-04-027.微信小程序-project.config.json文件2023-04-068.微信小程序-页面.json文件2023-04-059.微信小程序-页面.js文件2023-04-0510.微信小程序-组件创建和使用2023-04-0611.微信小程序-组件-.json文件2023-04-0612.微信小程序-组件-.js文件2023-04-0613.微信小程序-WXSS学什么2023-04-0714.微信小程序-WXSS的书写格式2023-04-0715.微信小程序-新增RPX响应式单位2023-04-0716.微信小程序-什么是WXML2023-04-0917.微信小程序-WXML数据绑定2023-04-0918.微信小程序-WXML条件渲染2023-04-0919.微信小程序-WXML的hidden属性2023-04-0820.微信小程序-WXML列表渲染2023-04-0921.微信小程序-WXML列表渲染Key2023-04-0922.微信小程序-WXML包装元素2023-04-0923.微信小程序-WXS的作用和使用2023-04-1424.微信小程序-WXS独立文件2023-04-1425.微信小程序-WXS支持的语法2023-04-1426.微信小程序-小程序事件绑定2023-04-1627.微信小程序-小程序事件冒泡和事件捕获2023-04-1628.微信小程序-事件传递数据2023-04-1629.微信小程序-data和mark2023-04-2030.微信小程序-touches和changedTouches2023-04-2131.微信小程序-案例练习2023-04-2132.微信小程序-view组件2023-04-22

33.微信小程序-text组件2023-04-22

34.微信小程序-icon组件2023-04-2235.微信小程序-button组件2023-04-2236.微信小程序-image组件2023-04-2437.微信小程序-scrollview2023-05-1338.微信小程序-image组件-选择相册资源案例2023-04-2439.微信小程序-自定义组件2023-05-1340.微信小程序-自定义组件样式隔离2023-05-1441.微信小程序-自定义组件外部样式2023-05-1442.微信小程序-传递数据父传子2023-05-1443.微信小程序-传递数据子传父2023-05-1444.微信小程序-页面访问组件数据和方法2023-05-1445.微信小程序-组件通讯练习2023-05-1446.微信小程序-单个插槽2023-05-1547.微信小程序-多个插槽-具名插槽2023-05-1648.微信小程序-behaviors2023-05-1749.微信小程序-双线程渲染模型2023-05-1850.微信小程序-页面生命周期2023-05-2051.微信小程序-页面生命周期方法2023-05-2152.微信小程序-组件生命周期方法2023-05-2153.微信小程序-应用程序生命周期方法2023-05-2154.微信小程序-页面跳转Tabbar2023-05-2155.微信小程序-页面跳转navigator组件2023-05-2156.微信小程序-页面跳转wxAPI2023-05-2157.微信小程序-页面跳转数据传递2023-05-2158.微信小程序-常用弹窗2023-05-2159.微信小程序-Storage2023-05-2160.微信小程序-获取用户位置2023-05-21

收起

text

官方文档地址：https://developers.weixin.qq.com/miniprogram/dev/component/text.html

text 组件：相当于 span，行内元素

行内元素，我在 view(块级元素)当中编写了两个 text 组件，发现都在一行当中进行显示，证明了是行内元素。

<view>
  <text>我是 text 组件</text>
  <text>我是 text 组件</text>
</view>

属性

?> user-select: 文本是否可选，该属性会使文本节点显示为 inline-block(selectable:文本是否可选 (已废弃))

index.wxml:

<view>
  <text>我是 text 组件</text>
  <text user-select="{{true}}"
  >我是 text 组件</text>
</view>

!> 注意点：

• 在小程序中，如果属性的取值是 boolean 类型, 如果要赋值为 true(真), 直接写上属性名称即可

index.wxml:

<view>
  <text>我是 text 组件</text>
  <text user-select
  >我是 text 组件</text>
</view>

?> space: 显示连续空格

• ensp：中文字符空格一半大小
• emsp：中文字符空格大小
• nbsp：根据字体设置的空格大小

index.wxml:

<view>
  <text space="ensp">我是 text组件</text>
</view>
<view>
  <text space="emsp">我是 text组件</text>
</view>
<view>
  <text space="nbsp">我是 text组件</text>
</view>

?> decode: 是否解码

index.wxml:

<view>
  <text decode>我是&nbsp;text组件</text>
</view>

Bug & Tip

1. tip: decode可以解析的有  、<、>、&、'、 、 
2. tip: 各个操作系统的空格标准并不一致。
3. tip:text 组件内只支持 text 嵌套。
4. tip: 除了文本节点以外的其他节点都无法长按选中。
5. bug: 基础库版本低于 2.1.0 时， text 组件内嵌的 text style 设置可能不会生效。

组件差异

!> 内联文本只能用 text 组件，不能用 view，如 foo bar

错误示例：

index.wxml:

<view>
  <text>
    <view>我是view</view>
  </text>
</view>