前情
uni-app是我比較喜歡的跨平臺框架，它能開發小程式/H5/APP(安卓/iOS)，重要的是對前端開發友好，自帶的IDE讓開發體驗也挺棒的，公司專案就是主推uni-app。
坑位
最近在開發一個需求，就是一段文字，其中有些文字需要做特殊標籤樣式顯示，而對於文字我一般習慣性用text元件包裹。但今天不知道是手抖，還是心血來潮，我在text標籤裡包裹了一個view元件，於是出現如下程式碼：
<view class="good-title ellipsis-2">
<text style="font-size: 28rpx;color: #2D2D2D;font-weight: 500;">
<text class="good-text">99新</text>
<view class="good-text !zhs-bg-[#4D955D] !zhs-text-white">可換新</view>
<text class="good-name-long">抖音 iphone11 99新 64G</text>
</text>
</view>
上述程式碼會在快手小程式上報一個警告，提示text元件不允許巢狀其它元件，但是顯示是正常，而在抖音小程式上最終渲染的結果如下：
Why?
我猜是抖音小程式的限制，text元件中只允許巢狀text元件和文字，其它元件會直接暴力丟棄渲染。
於是查詢抖音小程式的官方文擋，有一條說明應該是想說明支援巢狀的元件，但可能是文擋有錯誤，並沒有說明只支援巢狀什麼，我想它的正確內容應該是：元件內只支援巢狀text元件和文字
解決方案
把view標籤換成text標籤或者把父級text換成view標籤即可，程式碼如下：
<view class="good-title ellipsis-2">
<view style="font-size: 28rpx;color: #2D2D2D;font-weight: 500;">
<text class="good-text">99新</text>
<text class="good-text !zhs-bg-[#4D955D] !zhs-text-white">可換新</text>
<text class="good-name-long">抖音 iphone11 99新 64G</text>
</view>
</view>
總結
在使用text元件的時候，有如下使用tip是我們應該知道的，以便更好的使用它
- 除了文字元件以外的其他元件內的文字都無法長按選中
- 是個元件，效能不如文字節點，如無必要，請優先使用純文字節點
- 文字中的
\n會換行 - 元件內只支援巢狀text元件和文字