资讯专栏INFORMATION COLUMN

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

renweihub / 3432人阅读

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

微信小程序富文本解析器

微信小程序在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
text

sample text

"; const json = html2json(html); this.setData({ nodes: json, });

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97065.html

相关文章

  • 程序rich-text文本支持方案

    摘要:小程序富文本解析目前小程序使用比较多的富文本方案一个是小程序自带的组件,一个是。使用方法文殊林舍山房由丽江铂尔曼度假酒店余明金老师设计,是丽江古城的网红民宿,年被评为全国家最美民宿,以及年最值得睡的张床。 小程序富文本解析 目前小程序使用比较多的富文本方案一个是小程序自带的rich-text组件,一个是wxPrase。 wxPrase原理是把原有的html标签全部解析成小程序的组件,这...

    William_Sang 评论0 收藏0
  • 程序rich-text文本支持方案

    摘要:小程序富文本解析目前小程序使用比较多的富文本方案一个是小程序自带的组件,一个是。使用方法文殊林舍山房由丽江铂尔曼度假酒店余明金老师设计,是丽江古城的网红民宿,年被评为全国家最美民宿,以及年最值得睡的张床。 小程序富文本解析 目前小程序使用比较多的富文本方案一个是小程序自带的rich-text组件,一个是wxPrase。 wxPrase原理是把原有的html标签全部解析成小程序的组件,这...

    keelii 评论0 收藏0
  • 信小程序文本解析wxParse Alpha0.1-支持HTML及markdown解析

    摘要:本项目由微信小程序开发论坛会员开发原文地址垂直微信小程序开发交流社区加载慢,等等微信小程序富文本解析自定义组件,支持及解析可能是第一个微信小程序富文本解析组件代码库地址示例版使用地址现状版本号目前还不太适合直接使用目前项目不 本项目由微信小程序开发论坛-WeAppDev http://weappdev.com/ 会员开发 原文地址: http://weappdev.com/t/wxp...

    daydream 评论0 收藏0
  • wxParse version0.2-更好的信小程序文本HTML及Markdown解析

    摘要:信息版本号历史版本号具体代码请查看仓库分支地址解决问题微信小程序富文本解析组件详述因为微信小程序没有提供等解析,原展示类文本没有办法图文并茂的原生展示,主要目的就是弥补富文本解析空缺的组件,欢迎使用反馈开发信息微信小程序开发论坛垂直微信小程 wxParse信息 版本号0.1 历史版本号0.2 具体代码请查看仓库分支V1 github地址: https://github.com/ici...

    cucumber 评论0 收藏0
  • wxParse version0.2-更好的信小程序文本HTML及Markdown解析

    摘要:信息版本号历史版本号具体代码请查看仓库分支地址解决问题微信小程序富文本解析组件详述因为微信小程序没有提供等解析,原展示类文本没有办法图文并茂的原生展示,主要目的就是弥补富文本解析空缺的组件,欢迎使用反馈开发信息微信小程序开发论坛垂直微信小程 wxParse信息 版本号0.1 历史版本号0.2 具体代码请查看仓库分支V1 github地址: https://github.com/ici...

    zhonghanwen 评论0 收藏0

发表评论

0条评论

renweihub

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<