uni-app – 富文本处理方案

一个群里看到有人问uni-app 怎么解析html的富文本?

(心想:v-html不就行了? 但又想这么简单别人问了干嘛...)

查了一下uni-app只有App端（vue页面V3编译模式）和H5端支持v-html，其他端不支持v-html。

然后看了下uni-app社区写的富文本/渲染/显示/图文混排方案以及rich-text、uparse、v-html的区别,顺便抄过来做下笔记

图文混排的界面，常见于新闻、帖子的详情页渲染。
由于小程序端的限制，uni-app的富文本的处理与普通网页不同。
有rich-text组件、v-html、和uParse三类方案。

1. rich-text

rich-text是uni-app的内置组件，提供了高性能的富文本渲染模式。
API参考https://uniapp.dcloud.io/component/rich-text
rich-text的优势是全端支持、高性能。有个缺陷是只能整体设点击事情，无法对富文本中的图片、超链接单独设点击事件。
如果是图片，可以把内容拆成多个rich-text解决。rich-text不支持内嵌视频也可以通过拆分多个rich-text，中间插入video来实现。
注：h5和app-nvue无此限制，支持链接等单独点击。

2. v-html

v-html指令，是web开发中很常用的。可惜由于小程序不支持html，使用场景受限。
在uni-app中，h5端和app-vue的v3编译器下可以使用v-html。其他环境无法支持。

3. uParse

由于小程序的rich-text组件在一些场景不满足需求，于是业内出现了wxparse等三方方案，把HTML或markdown格式的服务器数据源转为view来渲染。
但wxparse许久不更新，且不跨端，在uni-app插件市场出现了更多改进版的parse插件。
它们功能更强，支持直接渲染markdown或html的数据源为富文本，也支持其中的图片和超链接的点击处理，有的还支持表格和视频的处理。
但这些parser解决方案的性能不如rich-text。

注：app-nvue只能使用rich-text。

几种方案的特点讲清楚了，大家在开发中根据自己的需求选择合适的富文本渲染方案吧。

至于富文本编辑，即在输入框里图文混排内容，解决方案如下：

• 在h5、app-vue、微信小程序，支持editor组件
• 在h5中，传统的富文本编辑仍可使用
• 在非微信的其他小程序中，其官方没有提供解决方案，目前只能使用web-view组件套一个远程网页来满足这方面的需求。web-view组件是全端可用的解决方案。
• 还有一种方案，不再编辑区直接预览效果，而是采用markdown编辑器方案，输入区输入markdown语法，预览区提供预览。这种方案是跨端的。插件市场搜富文本编辑，有不少插件。http://ext.dcloud.net.cn/search?q=%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91