2022微信小程序rich-text组件:富文本解析器的应用

 所属分类:php教程

 浏览:269次-  评论: 0次-  更新时间:2022-10-08
描述:更多教程资料进入php教程获得。 本篇文章给大家带来的内容是关于微信小程序rich-text组件:富文本解析器的应用,有一定的参考价值,有需要...
更多教程资料进入php教程获得。 本篇文章给大家带来的内容是关于微信小程序rich-text组件:富文本解析器的应用,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

微信小程序富文本解析器

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

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

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

如官网给的例子:

1070005028-5b83adfc3da1f_articlex.png

程序员必备接口测试调试工具:立即使用
Apipost = Postman + Swagger + Mock + Jmeter
Api设计、调试、文档、自动化测试工具
后端、前端、测试,同时在线协作,内容实时同步

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

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

使用方法:

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

const html =
  '

sample
text

sample text

'; const json = html2json(html); this.setData({ nodes: json, });
登录后复制

源码见Github: https://github.com/treadpit/w...

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

test.png

相关推荐:

微信小程序富文本支持HTML及markdown解析wxParse Alpha0.1

微信小程序之rich-text教程详解

以上就是微信小程序rich-text组件:富文本解析器的应用的详细内容,更多请关注zzsucai.com其它相关文章!

积分说明:注册即送10金币,每日签到可获得更多金币,成为VIP会员可免金币下载! 充值积分充值会员更多说明»

讨论这个素材(0)回答他人问题或分享使用心得奖励金币

〒_〒 居然一个评论都没有……

表情  文明上网,理性发言!