mp-html 微信原生小程序渲染富文本

这篇具有很好参考价值的文章主要介绍了mp-html 微信原生小程序渲染富文本。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

引入组件

"usingComponents": {
    "mp-html": "/components/mp-html/index"
  }

使用

<mp-html content="{{info.course_info.info}}" />

获取组件

mp-html 微信原生小程序渲染富文本,# 小程序,小程序

介绍

mp-html,小程序富文本解析利器

全面支持html标签

小程序大多数都是基于html标签来渲染和显示内容的,mp-html组件支持以下列表标签和属性,同时支持id、style、class、align、height、width 属性。几乎可以完美兼容html的标签内容,并保持web内容和小程序内容在显示上兼容性,页面渲染的性能很强。

组件对html标签支持的稳定性很好:

1.标签名中可以含有 : 等特殊字符(如 o:p)

2.标签名和属性名大小写不敏感

3.属性值可以不加引号、加单引号、加双引号,也可以却缺省(默认 true)

4.属性之间可以没有空格(通过引号划分)、有空格(可以多个)、有换行符

5.支持正常格式、CDATA 等多种形式的注释

同时,对于一些错误情况,程序也能够自动处理:

1.标签首尾不匹配

2.属性值中冒号不匹配

3.标签未闭合

自定义样式配置

样式(css)是富文本中最重要的内容之一,组件提供多种样式设置的方法,可以进行灵活的自定义设置,让小程序端的文本显示更丰富。

1.行内样式

这是最常用的样式设置方法,直接将需要的样式放在对应标签的 style 属性中即可,这种方式仅作用于单个标签,优先级最高

2.tag-style

这是本组件独有的一种样式设置方式,可以给某一种标签名设置默认的样式,可以通过 tag-style 属性设置,具体用法见对应说明

3.外部样式

如果希望将某些样式固定的用于渲染,可以添加到 tools/config.js 的 externStyle 字段中,该方法仅支持 class 选择器(2.1.0 版本起支持标签名选择器),优先级最低。

需要调整优先级时,可以通过设置 !important 实现。

另外,通过引入 style 插件,还可以实现匹配 style 标签中样式的功能。

图片加载

在富文本内容里图片显示非常重要,mp-html在图片显示上充分考虑小程序的特点,主要提供一下功能:

1。占位图

支持设置图片未加载完成时的占位图 loading-img 和加载出错时的占位图 error-img

2.懒加载

内容较长、图片较多时,开启懒加载有助于改善性能,需要时可通过 lazy-load 属性开启

3.自动预览

图片被点击时,将自动放大预览,如不需要,可通过 preview-img 属性关闭。还可以在 imgtap 事件中进行自定义处理

自动预览通过特定的处理,可以实现左右滑动查看所有图片、预览重复链接不错位等效果

4.预览高清图

同一张图片,可以给显示时和预览时设置不同的链接地址以达到最佳效果

设置方式 1:给 img 标签增加一个 original-src 即可

设置方式 2:通过 imgList 的 api 进行设置

5.长按弹出菜单

微信和百度平台支持图片长按时弹出菜单,可以进行保存、分享等操作,如不需要,可通过 show-img-menu 属性关闭

6.装饰图片处理

有时对于一些小的装饰性图片,可能不希望产生上述效果,此时可以给 img 标签设置 ignore 属性,将屏蔽预览、弹出菜单等操作,提升体验。

在链接内的、src 为 data url 且没有设置 original-src 的图片,默认为不可预览的小图片。

7.支持原大小显示

本组件通过合理转换,基本实现了和 html 中 img 的相同效果:没有设置宽度时按原大小显示;设置了宽度时按比例缩放;同时设置宽高时按设置的值显示。不必去考虑小程序中的 mode 等问。。

8.支持 svg

虽然小程序中不支持 svg 系列标签,本组件通过在解析过程中转为 data url 图片的方式实现了 svg 的显示。

表格和列表

小程序中没有 table 标签,使得显示表格一直是一个难题,mp-html解决了这个问题,并支持独立横向滚动,支持含有合并单元格的表格,常用表格属性(border, cellspacing, cellpadding, align).

组件主要通过以下三种方式显示表格

显示方式适用情况说明rich-text 标签表格内部没有链接、图片等特殊标签效果最佳,几乎不需要进行转换table 布局表格内有特殊标签但没有使用合并单元格需要进行一定转换,将 table, tr, td 等标签转为对应的布局grid 布局表格内有特殊标签且使用了合并单元格需要进行复杂的转换将合并单元格用 grid 布局表现出来

对于列表支持也非常友好,完全兼容html里的列表。

1.支持多层嵌套

支持嵌套多层列表,对于无序列表,不同的层级会显示不同的黑点格式。

2.支持多种有序列表格式

通过设置 ol 标签的 type 属性,可以显示数字、字母、罗马数字等多种形式的标号。

3.支持不显示标号

支持通过设置 list-style:none 的方式不显示 li 标签开头的标号。

支持音频和视频

对于音频和视频支持自动暂停、多源加载、自动添加控件。

1.自动暂停

在存在多个视频的情况下,同时播放可能会影响体验,本组件支持在播放一个视频的时候自动暂停其他所有视频,如不需要,可通过 pause-video 属性关闭

音频在引入 audio 插件后也可以实现此效果

2.多源加载

不同平台支持播放的格式不同,只设置一个 src 可能会出现兼容性问题导致无法播放,因此本组件支持像 html 中一样给 video 和 audio 设置多个 source,将按照顺序进行加载,直到可以播放,最大程度上避免无法播放

3.自动添加控件

对于既没有设置 controls 也没有设置 autoplay 的标签将自动把 controls 属性设置为 true,避免无法播放,影响体验。

支持多个平台的小程序

支持小程序包括:微信小程序,qq小程序,百度小程序,支付宝小程序,头条小程序文章来源地址https://www.toymoban.com/news/detail-814410.html

到了这里,关于mp-html 微信原生小程序渲染富文本的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【mp-html】小程序富文本组件(页面内嵌html)

    显示动态 html 富文本是很多应用必要的需求,小程序平台不支持 dom 操作使得这成为一个难题,其自带的 rich-text 组件支持的标签少且屏蔽所有事件,难以实际应用。因此就有了这样一个能够便捷的在小程序平台上处理富文本的组件,还支持丰富的扩展功能。 提示:以下是m

    2024年02月05日
    浏览(33)
  • 微信小程序使用mp-html遇到的问题并解决

    1、在本地配置寻找勾选使用npm 查了之后发现2023了 不需要勾选了 默认使用npm 2、在微信小程序编辑器左上角的 工具--构建npm 然后就报错了 于是搜索到以下的内容: 没有找到可以构建的NPM包,请确认需要参与构建的npm都在 `miniprogramRoot` 目录内 --- 微信小程序报错 https://blog.

    2024年02月07日
    浏览(43)
  • uni-app使用富文本组件 mp-html

    目录 安装 npm install mp-html  vue页面 富文本增加js组件  安装 npm install mp-html  vue页面 富文本增加js组件   fuwenben.js 解决连续数字、字母不自动换行 p标签:word-wrap: break-word; 解决pre不自动换行: white-space:pre-wrap; 合并表格的边框:border-collapse: collapse; 前 后

    2024年02月16日
    浏览(40)
  • uniapp小程序开发-富文本编辑器mp-html,juice外部样式转内联样式

    在开发一款公司的小程序过程中,有一个需求:web端后端可以上传word文档,后端转为html字符串;小程序接收显示,并且可以在小程序进行编辑修改。 其实在日常小程序中很少见到富文本编辑器的使用,所以这次使用的过程中也尝试了多种,但是最好用的还是mp-html 这款插件

    2024年02月09日
    浏览(45)
  • 微信小程序audio组件渲染错误[渲染层错误] Uncaught (in promise) [object DOMException](env: Windows,mp,1.06.2209190

    wxml ts 一开始以为现在移除了audio组件的action属性,因为在官方文档中找不到这个属性,后来发现不是 获取src中链接的资源需要一定时间,如果 一开始就在data中设置好了action方法 就会出现页面加载的瞬间就渲染页面从而来不及渲染的问题 把data中的action设为空, 再在合适的

    2024年02月05日
    浏览(53)
  • 微信小程序不使用插件,渲染富文本中的视频,图片自适应,plus版本

    小程序原生的 rich-text 不支持渲染视频,所以需要处理后显示,主要用了字符串切割以及匹配 当我们从后端拿到富文本数据时,我们利用replace方法去修改图片的样式,保证图片与手机宽度保持一致 如果富文本出现莫名的空白区域,可能是富文本中包含有换行标签,我们就将

    2024年02月02日
    浏览(51)
  • towxml的使用,在微信小程序中快速将markdown格式渲染为wxml文本

    towxml3.0 支持以下功能: ● echarts图表,默认禁用,需自行构建以开启此功能 ● LaTeX数学公式,默认禁用,需搭建解析服务并自行构建以开启此功能 ● yuml图表,默认禁用,需要搭建解析服务并自行构建以开启此功能 ● highlight代码高亮,默认开启(默认仅开启bash、javascript、

    2024年04月26日
    浏览(32)
  • 微信小程序加载html标签(解析html标签、wxParse加载富文本html)

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月04日
    浏览(46)
  • [微信小程序踩坑]微信小程序editor富文本组件渲染字符串时,内部图片超出大小导致无法正常渲染或回显(数据传输长度为 3458 KB,存在有性能问题!)

    富文本组件: 回显方法: bug复现: 数据:\\\"p杰佛的撒娇佛是阿达分阶段实施的佛教的撒img src=\\\"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/

    2024年02月08日
    浏览(54)
  • 微信小程序使用第三方组件wxParse加载富文本html

    微信小程序 微信小程序加载富文本html 微信小程序富文本第三方组件wxParse wxParse 富文本html wxParse 是一个微信小程序富文本解析组件,支持支持Html及markdown转wxml。 wxParse gitHub地址:https://github.com/icindy/wxParse 目前项目已停止维护了,原因未知。 按照gitHub上的指,下载demo之后,

    2024年02月12日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包