微信小程序开发如何显示富文本（html标签）

在微信小程序中显示带 HTML 标签（如 <p>）的富文本，官方提供了两种主要方案：

方案一：使用 `rich-text` 组件（官方推荐）

这是最安全的方式，支持基础 HTML 标签解析。

<!-- WXML -->
<rich-text nodes="{{htmlContent}}"></rich-text>

// JS
Page({
  data: {
    htmlContent: [{
      name: 'p',
      attrs: { style: 'color: red;' },
      children: [{
        type: 'text',
        text: '这是红色段落文本'
      }]
    }, {
      name: 'p',
      children: [{
        type: 'text',
        text: '这是第二个段落'
      }]
    }]
  }
})

特点：

✅ 官方组件，安全稳定
❗️ 需要手动将 HTML 转换为节点对象格式
⚠️ 不支持所有 HTML 标签（仅支持基础标签）

方案二：使用第三方库（如 `towxml`）

适用于复杂 HTML 内容，自动转换 HTML 字符串。

安装 towxml：

npm install towxml

构建 npm（微信开发者工具：工具 → 构建 npm）

使用示例：

// JS
import Towxml from 'towxml';
const towxml = new Towxml();

Page({
  data: {
    renderedHtml: {}
  },
  onLoad() {
    const html = `<p>第一段<strong>加粗</strong></p><p style="color:blue;">蓝色段落</p>`;
    this.setData({
      renderedHtml: towxml.toJson(html, 'html')
    });
  }
})

<!-- WXML -->
<import src="../../miniprogram_npm/towxml/towxml.wxml"/>
<template is="towxml" data="{{...renderedHtml}}"/>

特点：

✅ 支持完整的 HTML 解析
✅ 自动处理样式和布局
✅ 支持 Markdown/LaTeX 等格式
⚠️ 需要引入第三方库

方案三：使用 `web-view` 组件（复杂场景）

适用于需要完整 HTML 支持的场景。

<web-view src="{{htmlUrl}}"></web-view>

// 将 HTML 内容转为 base64 数据 URL
Page({
  data: {
    htmlUrl: `data:text/html;base64,${btoa(`
      <!DOCTYPE html>
      <html>
        <body>
          <p style="font-size: 16px;">HTML 内容</p>
        </body>
      </html>
    `)}`
  }
})

特点：

✅ 完美支持所有 HTML/CSS/JS
⚠️ 需要单独的页面上下文
⚠️ 无法直接与小程序交互

微信小程序开发如何显示富文本（html标签）

方案一：使用 rich-text 组件（官方推荐）

特点：

方案二：使用第三方库（如 towxml）

特点：

方案三：使用 web-view 组件（复杂场景）

特点：

推荐方案选择：

方案一：使用 `rich-text` 组件（官方推荐）

方案二：使用第三方库（如 `towxml`）

方案三：使用 `web-view` 组件（复杂场景）