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

发布时间:2022-04-20 14:13:17 作者:iii
来源:亿速云 阅读:520

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

微信小程序富文本解析器

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

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

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

如官网给的例子:

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

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

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

使用方法:

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

const html =
  '<p id="this-id" class="this-class">sample<br/>text<h3 style="color: red;font-size:48rpx;">sample text</h3></p>';

const json = html2json(html);

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

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

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

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

推荐阅读:
  1. 微信小程序示例_微信小程序组件/接口大全测试
  2. 微信小程序中怎么解析富文本

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

微信小程序 rich-text

上一篇:小程序中的block包装元素怎么用

下一篇:怎么开发的第一个小程序

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》