[WeChat applet entry to proficient] — After reading this article, you can directly win the text and rich-text components!

---

foreword

For the current form, WeChat mini-programs are a hot topic, so how do we learn and master them and then do practical projects?
For this reason, I specially set up this column to share it with you as I study!

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

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

---

First, the text component

1. text is a text component
2. text is similar to the span tag in HTML and is an inline element

selectable property value

I believe that the most common use of people in the process of using mobile phones is to copy a piece of text or numbers to our chat box, and now we can do a long press on the target and the mobile phone will automatically select the target, then we can copy it, then in our How is the WeChat applet implemented?

话不多说，直接操作！

• Add the text component to the .wxml file of the WeChat applet

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

• Show results

  

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

• Add selectable attribute value

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

• Show results

  

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

---

2. rich-text

1. rich-text is a rich text component
2. rich-text can render strings in HTML into WXML format

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

• Build the rich-text component first

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

• Show results

  

• Render content as h1 header format

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

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

• Show results

  

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

---

Summarize

Everyone should be happy every day, let's study happily together!