Rich text html,小程序 rich-text 富文本的解析显示

☪ 背景

最近在开发学习 Uniapp 的过程中遇到了富文本的显示，对比了 微信小程序 中生成的代码，才发现原来微信官方早就开发了 标签，可以很方便的拿来使用

所以，在此对 小程序 rich-text的使用方法进行一点整理

♘ 使用技巧

❶ . 首先，是 wxml 页面元素的最简单使用

❷. js 通常的处理逻辑为：

根据文章 ID，网络请求其文章内容；然后将 "html" 格式的代码进行转化；最后赋值于 article_content变量.

其实核心的处理代码就是下面这句：

/**

* 此代码段处理目的为，匹配富文本代码中的 标签，并将其图片的宽度修改为适应屏幕

* max-width:100% --- 图片宽度加以限制，避免超出屏幕

* height:auto --- 高度自适应

* display:block --- 此代码，可以去掉图片之间的空白间隔，个人觉得好用

*/

article_content.replace(/

一般而言，我们使用的富文本编辑器(比如：UEditor)，生成的 HTML节点及属性 大多数都可以进行解析

测试中，发现对 标签不支持

可参考文章： 小程序 rich-text 不支持 section 标签的情况

那么前面的代码片段，可对应修改为：

article_content = article_content.replace(/

.replace(/

.replace(/\/section>/g, '\div>');

❸. 效果展示

☠ 附录

一般而言，我们使用的富文本编辑器(比如：UEditor)，生成的 HTML节点及属性 都可以进行解析

在这之前，我使用的是 wxParse解析富文本

最大的缺点就是代码配置多，并且无疑多出了一部分源码资源