uni-app小程序(抖音)text组件使用踩坑

前情

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组件和文本