微信小程序显示 HTML 最全方案：从新手到实战，3 种方法直接用

在开发微信小程序时，你一定遇到过这个问题：后端返回的富文本 HTML 内容，无法直接在小程序里渲染（小程序不支持原生 <div>、<p>、<img> 等 HTML 标签）。

这篇文章就给大家整理小程序显示 HTML 的 3 种实用方案，包含官方推荐、开源组件、自定义解析，新手也能直接复制代码使用，覆盖绝大多数业务场景。

一、官方首选：小程序原生 rich-text 组件

微信小程序官方自带的 rich-text 富文本组件，零依赖、零引入、直接使用，是最简单、最稳定的方案，适合大部分基础 HTML 渲染。

1. 核心特点

• 无需安装任何插件 / 库
• 支持大部分常用 HTML 标签（p/div/img/span/ul/li/a 等）
• 性能好，官方维护，无兼容性问题
• 不支持复杂 JS、内联样式有限制

2. 直接使用代码

WXML 文件

xml

<!-- 直接绑定 html 字符串即可 -->
<rich-text nodes="{{htmlContent}}"></rich-text>

JS 文件

javascript

运行

Page({
  data: {
    // 后端返回的 HTML 内容
    htmlContent: `
      <div style="color:red; font-size:16px;">
        <p>这是一段富文本内容</p>
        <img src="https://xxx.com/xxx.jpg" style="width:100%;">
        <a href="https://www.baidu.com">点击跳转链接</a>
      </div>
    `
  }
})

3. 注意事项

1. 图片必须是 HTTPS 合法域名，且在小程序后台配置业务域名
2. 不支持 <script>、<style> 标签、iframe 等
3. 行内样式大部分支持，Class 样式不生效

二、最强兼容：开源组件 wxParse（老项目必备）

wxParse 是小程序早期最火的 HTML 解析库，支持极复杂的富文本（表格、代码块、嵌套样式、音频、视频），现在依然大量用在老项目、复杂文章详情页。

1. 核心特点

• 支持 99% 的 HTML 标签和样式
• 支持图片预览、表格、代码块
• 社区成熟，问题好查

2. 使用步骤

① 下载文件

直接下载 wxParse 文件夹，放入小程序根目录

下载地址：wxParse GitHub

② 引入文件

在页面 js 顶部引入：

javascript

运行

// 根据你的路径调整
const WxParse = require('../../wxParse/wxParse.js');

在页面 wxss 引入样式：

css

@import "../../wxParse/wxParse.wxss";

③ WXML 使用

xml

<import src="../../wxParse/wxParse.wxml"/>
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

④ JS 渲染 HTML

javascript

运行

Page({
  onLoad() {
    let html = `
      <h1>标题</h1>
      <p>支持复杂样式、表格、图片</p>
      <table><tr><td>表格内容</td></tr></table>
    `;
    // 参数：文章标识、html内容、this、图片自适应
    WxParse.wxParse('article', 'html', html, this, 5);
  }
})

三、现代高效：towxml 3.0（支持 Markdown + HTML）

如果你需要同时渲染 HTML 和 Markdown，towxml 是目前最好用的现代库，比 wxParse 更轻量、性能更好。

1. 核心特点

• 支持 HTML + Markdown 双解析
• 支持代码高亮、目录、锚点
• 体积小、适配新版小程序

2. 快速使用

1. 下载 towxml 放入项目
2. JS 引入并解析

javascript

运行

const Towxml = require('../../towxml/main');
const towxml = new Towxml();

Page({
  data: {
    article: ''
  },
  onLoad() {
    let html = '<p>测试内容</p>';
    this.setData({
      article: towxml.toJson(html, 'html')
    });
  }
})

3. WXML 使用

xml

<import src="../../towxml/towxml.wxml"/>
<template is="towxml" data="{{...article,base:''}}"/>

四、3 种方案怎么选？（直接照抄）

表格

一句话总结：

• 简单需求 → 直接用 rich-text（官方原生）
• 复杂 HTML → 用 wxParse
• 要支持 Markdown → 用 towxml

五、常见坑与解决方案

1. 图片不显示→ 必须是 HTTPS 域名，且在小程序后台配置 downloadFile 域名
2. 样式错乱→ rich-text 只支持行内样式，不支持 class
3. 富文本太宽超出屏幕→ 给图片加 style="width:100%;height:auto;"
4. a 标签无法跳转→ rich-text 支持，需在 bindtap 里手动处理跳转

总结

1. 小程序不能直接渲染 HTML，必须用富文本组件解析
2. 新手优先用 rich-text，零成本直接用
3. 复杂 HTML 用 wxParse，Markdown 用 towxml
4. 图片域名、样式格式是最常见的两个坑，提前处理即可

这就是小程序显示 HTML 的全部实用方案，你在开发中遇到的绝大多数富文本场景，用这三种方法都能完美解决。