小程序 wxml selectable_小程序实践：基础内容之text

这篇内容是《2020年小程序开发实践》专栏的一部分，完整目录可以在这里查看：
www.yishulun.com/post/DwHiQLxx2/
或者单击原文链接查看

目录
1、主要属性
2、示例代码与最佳实践
​
相关问题：
1）页面如何才能显示多个空格，我输入多个空格渲染后只剩下一个空格了？
3）如何将text组件以及image放在同一行？
4）text嵌套image后，image不显示？
5）text换行之后，上下行文字之间的距离可以去掉吗？

文 / 石桥码农

本文3490字，阅读3分钟，实践15分钟

text是基础的文本组件。可能是除了icon以外，最基础的组件了。

1、主要属性

属性说明selectable文本是否可选中，默认否。添加该属性，只需要写属性名，无需赋值space是否显示连续空格。和rich-text一样，对内容中含有的空格采用怎样的显示策略。默认不显示连续空格，有ensp、emsp、nbsp三个值可选。中文环境一般选择emsp。Decode是否对文本内容解码

Html、WXML本身也是由字符定义的，定义Html标签的一些关键字符，包括其它一些特殊字符，在当作内容使用时，必须进行实体编码。这是一张小程序支持的实体编码对照表：

实体编码字符 非断行半角空格，英文全称No-Break Space。在HTML中，如果你用空格键产生此空格，空格是不会累加的，只算1个。>><<&&''（单引号） “半角空格”，英文全称是En Space，en是字体排印学的计量单位，为em宽度的一半，等同于字体度的一半。占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。 “全角空格”，英文全称是Em Space。概念与ensp类似。宽度正好是1个中文宽度，而且基本上不受字体影响。

这7个字符都是文本支持decode的字符。

从这张表格中，我们也可以看出space属性三个选项的意义。在中文环境，最好设置space属性为emsp。

在Html中，除了上述space属性的三个选项值之外，另外还有三种空格：

1.  :“瘦弱空格”，宽度点em六分之一。
2. ‌：零宽不连字空格，是一个不打印字符。放在两个字符之间，抑制本来发生的连字。
3. ‍：零宽连字，使两个不会发生连字的字符产生连字效果。放在某些需要复杂排版语言，例如阿拉伯语、印地语的两个字符之间。

这三个空格字符很少使用，也不在text组件space属性的支持之列，不需要考虑。

2、示例代码与最佳实践

Wxml:

<text decode selectable space="emsp">{{text}}</text>

一般在使用text组件时，开启space属性，显示连续空格，并且空格大小为一个中文字符。

打开decode属性，支持将特殊字符显示出来。例如，如果内容是编码的html文本，启用decode属性后，可以将html代码完整显示出来。

启用selectable，这样在手机上可以通过长按选择并复制文本。官方文档说，除了文本节点以外的其他节点都无法长按选中。这是不确准的，像前面讲过的rich-text，通过设置css样式，也可以长按选中。

text组件本身支持"n"换行。如果要给text组件文本换行，可以在文本尾部追回”n“。代码：

add: function(e) {
  this.extraLine.push('other line')
  this.setData({
    text: initData + 'n' + this.extraLine.join('n')
  })
},

效果见文首。

下面看一下相关问题：略

好了，我是石桥码农，今天的分享就到这里。有什么问题欢迎留言，也欢迎群内讨论。

2020年03月30日

阶段源码：略