Taro3.5.11版本微信小程序端v-html依然無法解析video為中心的問題解決方案

該問題的解決是通過使用 Taro3.5.11 版本自定義組件進行處理，具體解決方案如下：

一、自定義組件

首先，我們需要創建一個自定義組件 VideoComponent，該組件的主要目的是將 v-html 內的 video 標籤轉換成 Taro 可識別的 video 標籤，示例代碼如下：

import Taro, { Component } from '@tarojs/taro';
import { View, Video } from '@tarojs/components';

class VideoComponent extends Component {
  static defaultProps = {
    videoSrc: '',
    videoTitle: ''
  };

  constructor(props) {
    super(props);
  }

  render() {
    const { videoSrc, videoTitle } = this.props;
    return (
      
        
      
    );
  }
}

export default VideoComponent;

二、v-html 內 video 標籤轉換

接下來，在需要使用 v-html 屬性的組件內引入 VideoComponent 組件，並使用正則表達式將 video 標籤轉換成 VideoComponent 組件的形式，示例代碼如下：

import Taro, { Component } from '@tarojs/taro';

import { View, RichText } from '@tarojs/components';

import VideoComponent from '../../components/video-component';
class TestPage extends Component {
 constructor(props) {
 super(props);
 }
 convertVideoTagToComponent = (html) => {
 return html.replace(/<video([\s\s]*?)/g, function (match) {
 const videoSrc = match.match(/src="([\S\s]*?)"/)[1];
 const videoTitle = match.match(/title="([\S\s]*?)"/)[1];
 return ` `;
 });
 }
 render() {
 const html = '
原創文章，作者：ANZSR，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/374025.html