小程序富文本样式怎么自定义？从基础到进阶的实操指南 - Web前端

做小程序开发时,有没有遇到过这种情况？后台传来的文章用富文本编辑器写的，到了小程序里要么排版乱糟糟，要么字体、颜色和小程序风格不搭，想改样式却不知道从哪下手？别担心，这篇把小程序富文本样式自定义的逻辑、技巧、避坑点全拆清楚，哪怕是刚入门的新手，也能跟着调出好看的排版。

先搞懂：小程序里的“富文本”是什么？

富文本不是简单的纯文字,而是带格式的文本——比如包含标题、加粗、列表、图片的文章，在小程序里，处理富文本主要有两种常见方式：

• 微信官方的 rich-text 组件：作用是把 html 格式内容转换成小程序可渲染的结构，在 wxml 里写 <rich-text nodes="{{HTMLContent}}"></rich-text> 就能展示富文本，优点是轻量、无需额外引入库；缺点是对 HTML 标签支持有限，样式自定义也有不少限制。

• 第三方解析库（如 wxParse、towxml）：原理是把 HTML“拆碎”后，转换成小程序的 wxml 和 wxss 结构，相当于重新“拼”出富文本内容，优点是能解析更复杂的 HTML 标签（如代码块、多层表格），样式自定义更灵活；缺点是需额外引入代码，会增加项目体积。

简单说：需求简单（如普通文章展示）用 rich-text 足够；需复杂排版（如技术博客带代码高亮）则选第三方库更合适。

为啥富文本样式不能直接用普通 CSS 改？

很多新手疑惑：小程序页面能写 wxss，为啥富文本里的文字、图片样式改不了？这得从渲染逻辑说起：

• 若用 rich-text 组件，它本质是把 HTML 转成小程序的“虚拟节点”，这些节点和小程序页面的样式作用域是隔离的，打个比方，页面里写的 .page-p { color: red; }，富文本里的 <p> 标签不会生效，因为 rich-text 的内容相当于“另一个世界”的元素。

• 若用第三方库（如 wxParse），虽把 HTML 转成了小程序的 wxml 结构，但这些结构有自己的类名（如 wxParse 自动给段落加 .wxParse-p），普通页面的样式也“管不到”这些“专属类”，得去改库自带的样式文件。

富文本样式自定义的核心逻辑是：找到富文本内容的“样式入口”，针对性写规则。

用 rich-text 组件改样式，关键步骤是什么？

rich-text 是官方组件，用法简单但样式需“特殊处理”，下面分步骤拆解：

给 HTML 内容加“标记”（class 或行内样式）

后台返回的 HTML，要么让运营在富文本编辑器里给需改样式的标签加 class（如给标题加 class="article-title"），要么前端自己处理 HTML 字符串、批量加 class，把所有 <h1> 改成 <h1 class="rich-h1">，后续才能用样式选中它们。

若需求紧急,也可给标签加行内样式（如 <p style="color: #333;">），但行内样式维护性差，优先用 class。

在小程序样式文件里写对应类

打开页面的 .wxss 文件，写针对富文本的样式。注意选择器要和 rich-text 里的 class 对应，且要考虑样式作用域，示例：

.rich-text .article-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #E64340;
  margin-bottom: 20rpx;
}
.rich-text p {
  line-height: 40rpx;
  margin-bottom: 24rpx;
  color: #666;
}

这里的 .rich-text 是给 rich-text 组件本身加的 class（<rich-text class="rich-text" nodes="{{html}}"></rich-text>），确保样式能“穿透”到组件内部节点。

处理特殊元素：图片、链接、列表

富文本里的图片最易出问题——要么太大溢出屏幕，要么间距不对，可统一给 img 加样式：

.rich-text img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20rpx auto;
}

链接（a 标签）默认样式丑，改成小程序风格：

.rich-text a {
  color: #409EFF;
  text-decoration: underline;
}

列表（ul/ol）默认的小圆点、数字可能和设计稿不符，重置后自定义：

.rich-text ul {
  list-style: none; /* 去掉默认圆点 */
  padding-left: 30rpx;
}
.rich-text ul li::before {
  content: "•";
  color: #E64340;
  margin-right: 10rpx;
}

案例：把后台文章改成“小程序风”

假设后台给的 HTML 是：

<h1>文章标题</h1><p>这是第一段...</p><img src="xxx" /><p>这是第二段...</p>

• 第一步：前端处理 HTML，给 h1 加 class="article-title"，变成 <h1 class="article-title">文章标题</h1>...（可用字符串替换实现）。

• 第二步：在 .wxss 写样式：

  .rich-text .article-title {
    font-size: 36rpx;
    color: #333;
    border-left: 10rpx solid #E64340;
    padding-left: 15rpx;
    margin-bottom: 24rpx;
  }
  .rich-text p {
    font-size: 28rpx;
    line-height: 44rpx;
    color: #666;
    text-indent: 56rpx; /* 首行缩进2字符 */
  }
  .rich-text img {
    max-width: 100%;
    border-radius: 16rpx;
  }

• 第三步：在 wxml 里渲染：

  <rich-text class="rich-text" nodes="{{处理后的HTML}}"></rich-text>

处理后,文章标题有左侧红色条、段落首行缩进、图片圆角，瞬间和小程序风格统一。

第三方库（以 wxParse 为例）改样式更自由？

若 rich-text 满足不了需求（如解析 markdown、代码块），需用第三方库，以wxParse为例，看如何改样式：

wxParse 的原理：把 HTML 拆成小程序组件

wxParse 会把 HTML 里的每个标签（如 <p>、<img>、<Code>）转换成小程序的 <view>、<image> 等组件，还会给这些组件加固定类名（如段落是 .wxParse-p，图片是 .wxParse-img），改样式，本质是改这些“固定 class”的样式。

怎么找到并修改 wxParse 的默认样式？

引入 wxParse 后，项目里会有 wxParse.wxss 文件，里面定义了所有解析后元素的默认样式。

.wxParse-p {
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
.wxParse-img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

要改段落行间距,就把 .wxParse-p 的 line-height 改成 8；要让图片有阴影，给 .wxParse-img 加 box-shadow。

注意：修改 wxParse.wxss 后，所有用 wxParse 解析的富文本都会生效，若多个富文本模块样式不同，需用“作用域”技巧（如给 wxParse 最外层加独特 class，再写嵌套样式）。

rich-text 和 wxParse 怎么选？

• 选 rich-text：项目轻量，仅展示简单文章（标题、段落、图片），追求性能。

• 选 wxParse：需解析复杂 HTML（如带 iframe、代码高亮、多层嵌套表格），或要极致自定义样式。

towxml 这类支持 markdown 解析的库，原理和 wxParse 类似，改样式也是改其默认样式文件。

富文本样式常见“坑”怎么避？

实际开发中,这些问题易踩雷，提前避坑能省大量时间：

图片自适应失败

原因：rich-text 里的 img 没加 max-width:100%，或第三方库的 img 样式被覆盖。
解决：不管用哪种方式，强制给 img 加 max-width:100%; height:auto;，确保图片不溢出。

文字样式“窜”到其他组件

原因：富文本的样式选择器太宽泛，如写了 p { color: red; }，导致页面其他 <p> 也变红。
解决：给富文本最外层加唯一 class（如 <rich-text class="article-rich"></rich-text>），再用 .article-rich p {} 这类嵌套选择器，限制样式作用域。

列表符号不显示/错位

原因：rich-text 对 ul/ol 支持有限，或第三方库的列表样式被重置。
解决：用自定义符号代替默认列表样式，如给 li 加 ::before 伪元素，设置内容为“-”或图标。

富文本和小程序主题冲突

场景：小程序有浅色/深色模式，富文本颜色没同步。
解决：用 css 变量 + 媒体查询，先在 APP.wxss 定义变量：

:root {
  --text-color: #333; /* 浅色模式文字色 */
  --bg-color: #fff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #eee; /* 深色模式文字色 */
    --bg-color: #111;
  }
}

再让富文本样式用变量：

.rich-text p {
  color: var(--text-color);
}

这样切换主题时,富文本颜色会自动变化。

进阶：让富文本样式更“智能”

若想让富文本体验更专业,这些进阶技巧能加分：

响应式排版：适配不同设备

小程序用 rpx 单位，富文本样式也用 rpx，可自动适配手机、平板，比如标题用 36rpx，段落 28rpx，图片 max-width:100%，在 Pad 上也不会变形。

代码块高亮：技术类小程序必备

若富文本里有 <code> 或 <PRe> 标签，可用第三方库（如 wxParse 配合 highlight.JS）给代码加高亮样式，步骤：

1. 在 wxParse 解析前，用 highlight.js 给代码字符串加高亮 class；

2. 在 wxParse.wxss 里写 .code-pre { background: #282c34; color: #abb2bf; padding: 20rpx; } 这类样式；

3. 解析后代码块自动带高亮效果。

动态切换富文本主题

比如用户点击“切换风格”按钮，富文本从“简约风”变“阅读风”，做法：

1. 给富文本最外层加 data-theme 属性，如 <rich-text data-theme="simple" class="rich-text"></rich-text>；

2. 在 .wxss 里写不同主题的样式：

   .rich-text[data-theme="simple"] p {
     font-size: 28rpx;
     line-height: 44rpx;
   }
   .rich-text[data-theme="reading"] p {
     font-size: 32rpx;
     line-height: 48rpx;
     letter-spacing: 2rpx;
   }

3. 点击按钮时,用 setData 修改 data-theme 的值，样式自动切换。

结合 UI 组件库的样式

若小程序用了 vant Weapp 这类组件库，可把富文本样式和组件库风格统一，Vant 的主题色是 #1989fa，富文本里的链接、标题也用这个颜色，让整体风格更一致。

富文本样式自定义的核心逻辑

不管用 rich-text 还是第三方库，本质是“找到样式入口→针对性写规则→处理特殊元素→适配场景”，记住这几点：

• rich-text 靠给 HTML 加 class + 嵌套选择器改样式；

• 第三方库靠修改它们的默认样式文件 + 作用域控制；

• 特殊元素（图片、列表、代码）要单独处理；

• 进阶需求（响应式、主题切换）用 CSS 变量、媒体查询、动态 class 实现。

现在再看开头的问题——“小程序富文本样式怎么自定义？”其实就是先理解渲染逻辑，再选对工具（rich-text 或第三方库），最后针对性写样式，多实操几个案例（比如把一篇杂乱的富文本文章改成和小程序 ui 一致的排版），练几次就熟练了～

标签：进阶自定义样式文本基础指南