背景
- 技術棧: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
中做自己想做的