微信小程序中rich-text组件在富文本解析器如何用

# 微信小程序中rich-text组件在富文本解析器如何用

## 一、rich-text组件基础介绍

微信小程序的`rich-text`组件是用于渲染富文本内容的核心组件，能够解析包含HTML节点的字符串并渲染为小程序视图。与Web环境的`innerHTML`不同，它通过安全过滤机制保障内容安全性。

### 1.1 基本属性
```javascript
<rich-text nodes="{{htmlContent}}" />

• nodes：必填属性，接收字符串或对象数组
• space：可选，处理连续空格（支持ensp/emsp/nbsp）

1.2 支持节点类型

二、富文本解析方案对比

2.1 原生解析方案

Page({
  data: {
    htmlContent: `
      <div style="color:red;">
        <p>安全解析示例</p>
        <img src="https://example.com/1.jpg" />
      </div>
    `
  }
})

优点：无需额外依赖，性能最佳
缺点：不支持所有HTML标签（如iframe）

2.2 第三方解析库

推荐使用wxParse或mp-html：

npm install mp-html

import mpHtml from 'mp-html'

Component({
  properties: { content: String },
  ready() {
    this.setData({ nodes: mpHtml(this.data.content) })
  }
})

优势： - 支持表格、视频等复杂内容 - 提供图片预览等扩展功能

三、实战开发技巧

3.1 动态内容处理

// 处理API返回的富文本
function processHTML(html) {
  return html.replace(/<img/g, '<img style="max-width:100%"')
}

3.2 安全防护建议

1. 使用trusted-domains白名单校验图片链接
2. 过滤onerror等危险属性
3. 对用户提交内容进行XSS检测

3.3 性能优化方案

• 大文本分片渲染
• 图片懒加载实现

<rich-text 
  nodes="{{nodes}}" 
  lazy-load 
  binderror="imgError" 
/>

四、常见问题解决方案

4.1 样式失效问题

现象：外部CSS类不生效
解决：使用内联样式或通过nodes对象传样式对象

nodes: [{
  name: 'div',
  attrs: { style: 'color: #f00;' }
}]

4.2 图片自适应

/* app.wxss */
rich-text img {
  max-width: 100%;
  height: auto !important;
}

4.3 交互事件处理

通过data-*属性实现：

nodes: [{
  name: 'span',
  attrs: { 'data-id': '123' },
  children: [{ type: 'text', text: '可点击文本' }]
}]

Page({ handleTap(e) { console.log(e.currentTarget.dataset.id) } })

五、高级应用场景

5.1 混合渲染方案

<view wx:for="{{compoundNodes}}">
  <template wx:if="{{item.type==='text'}}">
    <text>{{item.content}}</text>
  </template>
  <template wx:else>
    <rich-text nodes="{{item.nodes}}" />
  </template>
</view>

5.2 自定义组件集成

通过slot实现富文本插槽：

Component({
  options: {
    multipleSlots: true
  },
  properties: {
    nodes: Array
  }
})

六、总结建议

1. 简单内容优先使用原生rich-text
2. 复杂场景推荐mp-html等成熟方案
3. 生产环境必须做好内容安全过滤
4. 长列表需配合virtual-list优化

最佳实践示例：

// 安全解析流程
async function loadSafeContent() {
  const res = await getHTMLFromAPI()
  const sanitized = sanitizeHTML(res.content) // 使用DOMPurify等库
  this.setData({
    nodes: mpHtml(sanitized, {
      domainWhitelist: ['trusted.com']
    })
  })
}

通过合理运用rich-text组件，开发者可以在保证安全性的前提下，实现媲美Web端的富文本展示效果。 “`