uniapp 渲染html

在uniapp中，可以使用rich-text组件来渲染html内容。可以通过将html内容转换成富文本格式来实现渲染。具体操作步骤如下：

1. 安装并引入第三方库html-parse，用于解析html内容。

2. 在页面中使用rich-text组件，并将解析后的html内容赋值给rich-text的nodes属性。

3. 在解析html内容时，需要注意一些标签和属性在rich-text中不支持，需要进行过滤或转换，比如img标签需要转换成image标签。

示例代码如下：

<template>
  <view>
    <rich-text :nodes="nodes"></rich-text>
  </view>
</template>

<script>
import htmlParse from 'html-parse';

export default {
  data() {
    return {
      htmlContent: '<p>这是一段html内容</p><img src="http://example.com/image.jpg">',
      nodes: [],
    };
  },
  mounted() {
    this.parseHtml();
  },
  methods: {
    parseHtml() {
      const ast = htmlParse.parse(this.htmlContent);
      const nodes = this.transformNodes(ast.childNodes);
      this.nodes = nodes;
    },
    transformNodes(nodes) {
      const result = [];
      for (let i = 0; i < nodes.length; i++) {
        const node = nodes[i];
        if (node.type === 'text') {
          result.push({
            type: 'text',
            text: node.text,
          });
        } else if (node.type === 'tag') {
          if (node.name === 'img') {
            result.push({
              name: 'image',
              attrs: {
                src: node.attrs.find(attr => attr.name === 'src').value,
              },
            });
          } else {
            const children = this.transformNodes(node.childNodes);
            result.push({
              name: node.name,
              attrs: node.attrs.reduce((attrs, attr) => {
                attrs[attr.name] = attr.value;
                return attrs;
              }, {}),
              children,
            });
          }
        }
      }
      return result;
    },
  },
};
</script>

在以上示例代码中，使用了html-parse库对html内容进行解析，然后将解析后的内容转换成了rich-text的nodes属性所需的格式，并赋值给了nodes属性，最终在页面中渲染出了html内容。