当前位置: 首页 > 微信相关

微信小程序开发组件富文本解析教程

发布日期:2020-08-12 09:10:23 分类:微信相关 阅读()来源:网络收集

好东西要多分享:

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

微信小程序富文本解析器

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

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

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

如官网给的例子:

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

html2json 是一个将 HTML 解析为对应的 json 格式但 html2json 库转换出来的 *ON 与微信小程序要求不一致,且不支持解析 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,

});

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


相关资讯: 微信小程序 微信小程序开发教程

声明: 文章内容及图片部分全部摘自网络,在此分享供读者参考和借鉴,不代表酷雷的观点。文章、图片等内容如涉嫌侵权,请联系我们删除,谢谢!带有原创标签的属于酷雷原创文章,未经允许不得转载!

标签:

我要说一说

加载中~

相关推荐

您好,很高兴为您服务!
广告合作
投诉建议
联系站长

客服热线:15821432298

扫码加好友,优惠等你来!