微信小程序 text组件和rich-text组件的用法和区别？

我们生活中小程序常用的基础内容组件有以下2种：

text

        他是文本组件

        类似于HTML中的span标签，是一个行内元素

rich-text

        富文本组件

        支持把HTML字符传渲染位WXML结构

综合上述讲解下面就来教大家使用以下这两个组件。

同样，我们先准备一个空项目进行测试

 我们先在.WXML文件上创建一个盒子view

在view盒子中加入text标签看看是上面效果

<view>
  <text>商家电话：18700000082</text>
</view>

 我们发现左边将文字渲染出来，可是有人就会问，我不加text效果不是一样嘛？

 没错如图所示 是一样的，但是我们别忘记了，text的属性他是我们html行内元素的span一样，但是view是块元素，如果我们在大量使用文字排版的时候可以合理匹配使用那种标签。

这时候有人在使用text标签的时候发现，我上面的电话如果有人想复制却复制不下来，如果用截图的方式就out了，所以这时候微信给出了一个属性

selectable

选择属性，让你选择的文案是可以复制的。

我们拿一段代码举例

<view>
  商家电话：<text selectable>18700000082</text>
</view>

 我们发现没有，当我们加入selectable属性后，他是可以被选择的，如果在这个属性外的标签文字是不能被选中复制的，所以这样就可以方便我们想别用户复制的文字加上这样一段属性

第二个组件

rich-text

这个组件是用来干嘛的呢？我们一般用它是为了渲染一些html语言的代码，来辅助我们实现一些我们想要的功能。

<view>
  商家电话：<text selectable>18700000082</text>
  <rich-text nodes="<h1>标题1号字体</h1>"/>
</view>

 我们发现没有，标题1号字体我们一般使用html语言进行编写的，可以使用rich-text去进行渲染，这样大大提高了我们编写前端的速度，所以说如果自己实在不知道WXML语言怎么写，可以选择这个组件进行尝试，但是这个组件并不是万能了，总有一些涉及不到的地方。所以大家还是努力学学WXML语言。目前功能就展示到这里。也欢迎大家加入我们一起讨论。