小程序 Text 组件踩坑记录

今天在写小程序的练手项目时，发现一个小程序 Text 组件的有意思的注意点，就是在书写 Text 组件的时候内容和标签之间如果有换行的话换行也会显示在页面上。单纯描述有些抽象，代码和图示如下：

<view>
  <text>{{ name }}</text>
  <text>aaaaa</text>
</view>

当我们未对 text 组件换行时，它所显示出的页面和 DOM 结构：

当我们将 text 组件中标签和内容之间添加一个前换行时：

<view>
  <text>{{ name }}</text>
  <text>
    aaaaa</text>
</view>

它所显示的 页面与 DOM 结构：


我们可以看到第二个 text 组件换行了，同时它的 DOM 结构也发生了改变，在 text 组件中我们自己的内容前面添加了一个空内容，并且这个空内容是不可操作的。

最后看一下这个：

<view>
  <text>{{ name }}</text>
  <text>

    bbb
    
    aaaaa</text>
</view>

我们可以得出：在 text 组件中换行是会被原样输出的。

结语：之所以会絮絮叨叨讲一大堆主要是因为在写一个小程序的练手项目时出现过一两次下面这种状况，按照我的习惯给代码排了下格式

当时还是困扰了我挺久的，怎么也不明白为什么会多出两个空内容，百度、谷歌也找不到答案，自己调试了好久才找到问题出在哪，所以记录一下提醒自己以后别犯同样的错。