【微信小程序入门到精通】— 这篇看完直接拿下 text 和 rich-text 组件！

前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

本文主要讲解 text 和 rich-text 组件，我将逐一进行讲解，如果后文有什么错误的地方，期待您的指正！

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、text组件

1. text 是一种文本组件
2. text类似于HTML中span标签，是一种作用于行内元素

selectable属性值

我相信大家在使用手机的过程中最常用的就是复制一段文字或者数字到我们的聊天框，而且现在可以做到长摁目标然后手机将自动选中目标，这时候我们就可以复制了，那么在我们的微信小程序是如何实现的呢？

话不多说，直接操作！

• 在微信小程序的 .wxml 文件内添加 text 组件

   <view>
   <text > 阿酱的生日是：12.25 </text>
   </view>
  

• 效果展示

  

  此时我们还未添加属性值，所以我们可以试一下左键长按数字12.25，发现没啥效果。

• 添加 selectable 属性值

   <view>
   <text selectable> 阿酱的生日是：12.25 </text>
   </view>
  

• 效果展示

  

  此时我们添加了属性值 selectable ，当我们左键长按12.25 的时候，我们会发现 12.25这段数字会被自动选中。

二、rich-text

1. rich-text 是一种富文本组件
2. rich-text 可以将 HTML中字符串渲染成 WXML 格式

rich-text 组件的作用简单来讲就是渲染内容为某种格式，比如我们想要设置h1标题，我们直接利用 rich-text 组件，然后添加属性值nodes，nodes属性值的功能是设置我们渲染的格式，话不多说，开始操作！

• 先构建 rich-text组件

   <view>
   <rich-text >一碗黄豆酱的博客 </rich-text>
   </view>
  

• 效果展示

  

• 渲染内容为 h1 标题的格式

   <view>
   <rich-text nodes=" <h1 style='color:red'>一碗黄豆酱的博客</h1> "></rich-text>
   </view>
  

  我们需要注意我们需要渲染的内容是要放在我们的nodes内部，简单来说nodes内部就是写上我们HTML内容，然后我们微信小程序利用 rich-text 渲染成 wxml 格式。

• 效果展示

  

至此我们的 text 和 rich-text就讲解完毕！

总结

大家每天都要开开心心的喔，让我们一起快乐的学习吧！