富文本渲染测试页面

📋 概述

本目录包含两个富文本渲染测试页面，用于验证和对比 Taro 中不同富文本渲染方案的效果。

📁 文件说明

文件	渲染方案	说明
index.vue	v-html 指令	Taro 内置方案，基于 rich-text 组件
index1.vue	mp-html 组件	第三方富文本组件

🎯 测试功能

HTML 实体解析

•   → 空格
• & → &
• < → <
• > → >
• " → "

标签渲染

• ✅ 基础标签：<h1> ~ <h3>, <p>, <ul>, <li>, <strong>, <em>
• ❌ <a> 标签：v-html 不支持，需要替换为 <div data-href="">
• ✅ <img> 标签：支持，但 URL 可能被损坏

图片功能

• 长按预览（使用 @tarojs/extend 的 $ 选择器绑定）

文件链接功能

• PDF 文件链接渲染为卡片样式
• 点击打开 PDF（使用 useFileOperation.viewFile）

🔍 对比结果

特性	v-html (index.vue)	mp-html (index1.vue)
<a> 标签	❌ 不支持，需手动替换	✅ 原生支持
imgtap 事件	❌ 需手动绑定	✅ 内置支持
linktap 事件	❌ 需手动绑定	✅ 内置支持
HTML 实体	✅ 需手动解析	✅ 自动解析
URL 完整性	⚠️ 可能损坏	✅ 完整保留
组件大小	小（内置）	大（第三方）

🚀 使用方式

访问页面

# 启动开发服务器
pnpm dev:weapp

# 在微信开发者工具中访问
# 页面路径：pages/rich-text-test/index
# 或：pages/rich-text-test/index1

测试按钮说明

index.vue (v-html)：

• 测试1: 纯文本 - 基础 HTML 渲染
• 测试2: HTML标签 - 标题、列表、样式
• 测试3: 图片 - 图片渲染 + 长按预览
• 测试4: 链接 - 普通链接 + PDF 链接
• 清空内容 - 清空测试区域
• 模拟API加载 - 模拟异步数据加载
• 📄 真实API - 加载原始 <a> 标签数据
• 📄 真实API(a→div) - 加载 <a> 替换为 <div> 的数据

index1.vue (mp-html)：

• 测试1: 图片 - 图片点击预览
• 测试2: 链接 - 链接点击处理
• 测试3: PDF - PDF 链接点击

💡 结论

推荐使用 mp-html 组件 (index1.vue) 用于生产环境，原因：

1. 完整支持 <a> 标签
2. URL 不会被损坏
3. 内置事件处理（imgtap, linktap）
4. 更好的样式兼容性

v-html 方案 (index.vue) 仅适用于简单场景，复杂富文本建议使用 mp-html。

🔗 相关依赖

{
  "mp-html": "^2.5.0",
  "@tarojs/extend": "latest"
}

📝 注意事项

1. Taro v-html 限制：

   • 不支持 <a> 标签，需手动替换为 <div data-href="">
   • URL 可能被损坏（某些字符被替换）
   • data-* 属性可能被过滤

2. 文件链接处理：

   • 使用 useFileOperation.viewFile() 统一处理文件打开
   • PDF 文件会先下载到本地再预览

3. 图片事件绑定：

   • 使用 @tarojs/extend 的 $ 选择器
   • 在 nextTick 中绑定确保 DOM 已渲染