天天看點

Taro開發遇到的問題1:給富文本添加綁定事件

背景

  1. 技術棧:Taro
  2. 端:微信小程式
  3. 營運會在背景使用富文本編輯器配置活動詳情。

    一段富文本中,有若幹a連結,将其渲染至小程式,需要在點選a連結的時候做一些操作,比如複制該連結,或者是在小程式中打開該連結。

難題

渲染富文本使用

dangerouslySetInnerHTML

或者

RichText

,最終都會變成taroelement,然後生成對應平台的元素。無法從這些元素中直接找出哪個是一個a連結,也就沒辦法綁定點選時間

解決

  1. 找到a連結對應的元素
  2. 綁定點選事件
Taro開發遇到的問題1:給富文本添加綁定事件

觀察渲染到頁面的元素,可以發現連結渲染的元素,類名都是h5-a。那麼我們可以通過類名定位到元素。然後在給這個元素綁定事件即可。

參考官方文檔:

Taro官方文檔-渲染HTML

transformElement

:該函數第一個參數的值為 Taro 預設處理好的 TaroText,第二個參數是 HTML

解析器解析好的 Text,最後傳回的 TaroText 對象參與 HTML 中的字元串渲染。

TaroText

的結構是這樣的

Taro開發遇到的問題1:給富文本添加綁定事件

其中,

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

中做自己想做的