Taro开发遇到的问题1：给富文本添加绑定事件

蘑菇李

于 2022-09-08 15:10:05 发布

阅读量2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：小程序文章标签： taro 微信小程序前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/jiamiao66/article/details/126671672

在Taro微信小程序中，当运营使用富文本编辑器配置活动详情时，遇到一个问题：如何在点击富文本中的a链接时执行特定操作。解决方案是通过识别渲染后的元素类名为'h5-a'的链接，利用Taro的transformElement函数来绑定点击事件。在处理函数中，可以实现如复制链接或在小程序内打开链接等功能。通过修改TaroText结构并添加tap事件，成功解决了这个问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

背景

技术栈：Taro
端：微信小程序
运营会在后台使用富文本编辑器配置活动详情。
一段富文本中，有若干a链接，将其渲染至小程序，需要在点击a链接的时候做一些操作，比如复制该链接，或者是在小程序中打开该链接。

难题

渲染富文本使用dangerouslySetInnerHTML或者RichText，最终都会变成taroelement，然后生成对应平台的元素。无法从这些元素中直接找出哪个是一个a链接，也就没办法绑定点击时间

解决

找到a链接对应的元素
绑定点击事件

在这里插入图片描述

观察渲染到页面的元素，可以发现链接渲染的元素，类名都是h5-a。那么我们可以通过类名定位到元素。然后在给这个元素绑定事件即可。

参考官方文档：
Taro官方文档-渲染HTML

transformElement:该函数第一个参数的值为 Taro 默认处理好的 TaroText，第二个参数是 HTML
解析器解析好的 Text，最后返回的 TaroText 对象参与 HTML 中的字符串渲染。

TaroText的结构是这样的

最低0.47元/天解锁文章

200万优质内容无限畅学

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。