rich-text 无法撑满宽度需预处理html：清理img宽高属性并设max-width:100%；video/iframe/svg被过滤，须提取替换；点击放大需dom拦截绑定事件；多端样式用tagstyle而非全局style。
rich-text 无法撑满宽度？先处理 img 和内联样式
直接传 HTML 字符串给 <rich-text></rich-text>，图片常溢出容器、文字换行异常——这不是 bug，是它默认不接管样式控制。必须预处理字符串，否则 iOS 和小程序端表现差异极大。
- 用正则批量清理
img标签里的width、height、style属性，避免原生限制干扰 - 统一补上
style="max-width:100%;height:auto;"，注意是max-width而非width，否则在窄屏下会拉伸变形 - 别只替换
style="..."，还要处理width="300"这类属性写法，否则 H5 端正常、小程序端仍溢出 - 对
p、div标签加word-break: break-word;，防止长英文或数字不换行
video / iframe / svg 怎么办？rich-text 根本不认它们
<rich-text></rich-text> 在所有平台（包括微信小程序）都明确过滤 <video></video>、<iframe></iframe>、<svg></svg>，控制台静默丢弃，连 warning 都不抛。硬塞进去只会留白。
微信公众平台开发入门教程 中文WORD版
下载
由于微信的大热，为了更好的方便使用微信的用户查询一些信息，这篇文章是入门级的微信公众平台开发教程，需要的朋友可以参考下 这篇入门教程将引导你完成如下任务： 创建百度云平台应用启用微信公众平台开发模式获取订阅、文字、图片、语音、视频消息回复文本、图文及音乐消息程序开发
- 后端返回的 HTML 若含
<video src="xxx.mp4"></video>，前端需用正则提前提取src，替换成带封面图 + 播放按钮的<view></view>结构 - 播放逻辑单独用
<video></video>组件承载，通过ref或uni.createVideoContext控制，不能混在nodes里 -
<svg></svg>同理，转成<image></image>或内联 base64 图片；<iframe></iframe>只能降级为链接卡片 - 若业务强依赖这些标签，
mp-html是目前唯一全端支持的替代方案，但体积增加约 25KB
要像微信那样点击图片放大？rich-text 不支持事件绑定
<rich-text></rich-text> 的 nodes 是只读渲染流，@tap、@longpress 对内部 img 完全无效。所谓“点击预览”必须靠 DOM 拦截实现。
- 用正则给每个
<img>加唯一data-src属性，再用querySelectorAll('img[data-src]')批量绑定click事件 - 在事件回调里调用
uni.previewImage，传入current和urls数组 - 注意：H5 端可用
document.addEventListener，但小程序端必须用uni.$on或组件mounted时机执行绑定，否则节点未挂载会失败 - 如果用了
u-parse或mp-html，它们内置了@preview事件，无需手动绑
多端样式不一致？别靠全局 style，用 tagStyle 精准控制
微信小程序的 <rich-text></rich-text> 渲染结果和 H5 差异大，比如 font-size 默认继承父级、line-height 行高压缩、blockquote 无缩进。全局 style 属性作用有限。
- 优先用
u-parse的tagStyle参数，例如：{ p: 'font-size: 28rpx; line-height: 1.6;', img: 'border-radius: 8rpx;' } -
mp-html支持更细粒度的customStyle，可按 class 名或标签名注入样式，比正则替换稳定得多 - 避免在
<rich-text></rich-text>外层套view并设font-family——小程序端该样式常被忽略，H5 端又可能污染其他内容 - 测试时务必真机验证：iOS 微信、安卓微信、App、H5 四端分别跑一次，
rich-text的盒模型计算逻辑各不相同
<rich-text></rich-text> 的限制做补位。最省事的路径是直接切到 mp-html，但若已有大量 rich-text 逻辑，就得在预处理和 DOM 拦截上多花两倍调试时间。
