背景
- 技术栈:Taro
- 端:微信小程序
- 运营会在后台使用富文本编辑器配置活动详情。
一段富文本中,有若干a链接,将其渲染至小程序,需要在点击a链接的时候做一些操作,比如复制该链接,或者是在小程序中打开该链接。
难题
渲染富文本使用dangerouslySetInnerHTML
或者RichText
,最终都会变成taroelement,然后生成对应平台的元素。无法从这些元素中直接找出哪个是一个a链接,也就没办法绑定点击时间
解决
- 找到a链接对应的元素
- 绑定点击事件
观察渲染到页面的元素,可以发现链接渲染的元素,类名都是h5-a。那么我们可以通过类名定位到元素。然后在给这个元素绑定事件即可。
参考官方文档:
Taro官方文档-渲染HTML
transformElement
:该函数第一个参数的值为 Taro 默认处理好的 TaroText,第二个参数是 HTML
解析器解析好的 Text,最后返回的 TaroText 对象参与 HTML 中的字符串渲染。
TaroText
的结构是这样的
其中,handlers
是绑定的事件。此处需要绑定点击事件:tap
。注意,此处tap的值是一个数组,数组第一个值是改点击事件tap
要触发的函数。
代码实现
//渲染html
<View dangerouslySetInnerHTML={{__html: desc}}>
{
//富文本的H5,有统一的类名h5-a,给它添加自定义事件,将当前的href属性传入
//@ts-ignore
Taro.options.html.transformElement = (el) => {
console.log(el);
//链接添加点击自动复制功能
if (el.props.class == 'h5-a') {
//给它添加自定义事件,将当前配置的链接属性传入
el.__handlers.tap = [() => this.h5Click(el.props)]
}
//将view标签替换成text标签,则可以添加select属性,实现长按选择
if (el.tagName === 'VIEW') {
el.tagName = 'TEXT';
el.h5tagName = 'span';
el.nodeName = 'text';
el.props = {class: "h5-span", selectable: true, userSelect: true};
}
return el;
}
}
</View>
在h5Click
中做自己想做的