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组件和文本
posted @   !win !  阅读(62)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
· 程序员转型AI:行业分析
· 重磅发布!DeepSeek 微调秘籍揭秘,一键解锁升级版全家桶,AI 玩家必备神器!
点击右上角即可分享
微信分享提示