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

本文小编为大家详细介绍“微信小程序中rich-text组件在富文本解析器如何用”，内容详细，步骤清晰，细节处理妥当，希望这篇“微信小程序中rich-text组件在富文本解析器如何用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

为漯河等地区用户提供了全套网页设计制作服务，及漯河网站建设行业解决方案。主营业务为成都网站设计、成都网站制作、漯河网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

微信小程序富文本解析器

微信小程序在rich-text组件后开始支持富文本解析，但需要对照一套自定义规则的 JOSN 数据格式，API 返回的富文本需要前端做数据转换。

这个主要是用于某些需要 API 直接输出富文本的地方。比如后端输出title字段, 但 title 字段中有加重提示的几个文字是需要标红的。

这种情况下后端如果不返回富文本，前端去在小程序去处理是比较麻烦的，还得定个规则，前端再写好样式拼接起来。如果后端直接给你返回富文本，用这个去解析可以直接搞定。

如官网给的例子：

如何才能将 HTML 转为微信小程序组件支持的数据格式呢？

html2json 是一个将 HTML 解析为对应的 json 格式但 html2json 库转换出来的 JSON 与微信小程序要求不一致，且不支持解析 style，故在此库的基础上做的了扩展与调整。

使用方法：

import html2json from 'wxapp-rich-text';
// 或者下载该仓库
import html2json from './your/path/index.js';

const html =
  'sample
textsample text
';

const json = html2json(html);

this.setData({
    nodes: json,
});

目前只测试了一些简单的例子，如下图：

读到这里，这篇“微信小程序中rich-text组件在富文本解析器如何用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。