您当前的位置: 首页 > 解决方案

富文本解析-微信小程序 rich-text 组件

  • 作者: admin
  • 发布于 2018-08-30 14:11:56
  • 来源:  
  • 栏目:解决方案

导语: 微信小程序富文本解析器 微信小程序在rich-text组件后开始支持富文本解析,但需要对照一套自定义规则的 JOSN 数据格式,

 

微信小程序富文本解析器

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

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

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

如官网给的例子:

18.jpg

=

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

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

使用方法:

import html2json from 'wxapp-rich-text'; // 或者下载该仓库 import html2json from './your/path/index.js';  const html =   '<div id="this-id" class="this-class">sample<br/>text<h2 style="color: red;font-size:48rpx;">sample text</h2></div>';  const json = html2json(html);  this.setData({     nodes: json, }); 

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

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

 

19.jpg



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部