不使用插件，小程序也能完整的渲染富文本（视频展现，图片自适应）

原创

已于 2022-03-18 11:30:33 修改 · 2.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5 #微信小程序

于 2022-03-17 23:58:57 首次发布

本文介绍了在微信小程序中如何在不使用插件的情况下，解决富文本图片自适应和视频展现问题。通过处理富文本数据，替换图片样式确保自适应，去除换行标签解决空白区域。对于视频问题，采用特殊方式将富文本与视频链接间隔存储，通过循环渲染实现展示。作者推荐不使用插件的原因是避免繁琐的插件选择，且自行实现并不复杂。

在这里插入图片描述
用过小程序rict-text的帅哥靓女们（说的就是正在看文章的你）都知道，rich-text是无法解析富文本中的video标签的，本文教你如何优雅的在不使用插件的情况下完整的渲染富文本

首先是富文本图片自适应的问题

当我们从后端拿到富文本数据时，我们利用replace方法去修改图片的样式，保证图片与手机宽度保持一致

//content为富文本
content = content.replace(/<img/gi, '<img style="max-width:100%;height:auto"')   //图片自适应

如果富文本出现莫名的空白区域，可能是富文本中包含有换行标签，我们就将<br>标签替换掉

//richtext为后端传过来的富文本
dealRichText(richtext

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Morakes

关注关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序 - 完美解决 rich-text 富文本解析图片无法自适应宽高问题，图片超出屏幕宽度且不受控（详细示例源码，简单快速无需任何第三方插件）

🏆 前端领域优质创作者

05-27

1万+

微信小程序rich-text富文本图片变形了，解决微信小程序中富文本rich-text回显图片不自适应展示问题，微信小程序富文本rich-text图片适配，微信小程序rich-text富文本中图片宽度溢出，微信小程序富文本组件解析图片超出宽度了，微信小程序处理富文本里的图片宽度自适应，微信小程序富文本图片视频自适应大小直接用，微信小程序解决rich-text富文本图片过大超出问题，微信小程序富文本中图片宽度显示问题，微信小程序富文本图片为什么超出了屏幕宽度，微信小程序解决rich-text

解决小程序富文本显示视频问题

u014678583的博客

05-31

5933

【代码】解决小程序富文本显示视频问题。

3 条评论您还未登录，请先登录后发表或查看评论

微信小程序渲染富文本

沙漏的前端笔记

05-13

767

微信小程序渲染富文本

小程序富文本渲染（过滤）

weixin_65478269的博客

11-02

533

小程序富文本渲染（过滤）

微信小程序不使用插件，渲染富文本中的视频，图片自适应，plus版本

qq_63608386的博客

03-15

1212

这是我随便打的，视频链接也更改了（项目保密），结构上每一个p标签是一个段落，视频可能在一个段落中存在多个，处理方案。当我们从后端拿到富文本数据时，我们利用replace方法去修改图片的样式，保证图片与手机宽度保持一致。小程序原生的rich-text不支持渲染视频，所以需要处理后显示，主要用了字符串切割以及匹配。如果富文本出现莫名的空白区域，可能是富文本中包含有换行标签，我们就将。数据上还是有点小瑕疵的，不过不影响使用了。

小程序渲染富文本

hql1024的博客

03-24

372

<rich-text class='content' nodes="{{item.content}}"></rich-text>

微信小程序源码-图片自适应 ，富文本解析.zip

04-20

在这个"微信小程序源码-图片自适应 ，富文本解析.zip"压缩包中，我们主要关注两个核心概念：图片自适应和富文本解析。一、图片自适应 在微信小程序中，由于屏幕尺寸和分辨率的多样性，图片自适应至关重要。它确保...

图片自适应 ，富文本解析_企业城微信小程序js代码前台前端H5页面源码.rar

08-09

【标题】中的“图片自适应”与“富文本解析”是两个重要的前端开发技术主题，它们在构建微信小程序、H5页面以及任何基于浏览器的用户界面时都扮演着关键角色。图片自适应确保图片在不同设备和屏幕尺寸下都能正确显示...

微信小程序中渲染接口返回的富文本数据

m0_60335289的博客

08-02

1035

1.富文本中会包含<div>标签<p>标签以及加粗或者行的样式之类的，在微信小程序编辑中，不会直接识别并渲染出来。微信开发文档中提供了rich-text标签，使用rich-text标签就可以正常渲染了。使用rich-text渲染后，想要修改里面的样式如文字上下间隔，图片等。则需要对富文本中的<p>标签和<img>标签等，添加一个类名再进行修改样式就可以了。方法：使用rich-text标签，将接口中返回的数据放入nodes中。rich-text标签的详情可以在微信开发文档中查看。

微信小程序 富文本渲染

Now_li的博客

11-09

881

富文本解析官方文档 <rich-text nodes="{{data}}"></rich-text>

微信小程序富文本渲染引擎的详解

08-29

主要介绍了微信小程序富文本渲染引擎的详解的相关资料,希望通过本文能帮助到大家，让大家理解掌握这部分内容，需要的朋友可以参考下

we-rich 小程序渲染富文本js库

weixin_34138139的博客

01-02

497

最近项目需要, 把公众号的文章直接在小程序显示, 页面除了文章内容以外,还有其他组件. 小程序中渲染html, 解决方案有三个使用wxParse把html转化成小程序标签使用web-view组件使用rich-text组件第一个方案是由于小程序还没有更新2,3的功能时的一个临时解决办法. 而使用web-view控件最大问题只能整屏显示. 于是翻阅rich-text控件的文档说明.也是坑满...

小程序：小程序渲染的富文本内容支持下载文件、跳转到另一个小程序

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

01-31

2686

需求在后台编辑富文本，小程序端展示，需要在富文本里面加上一个链接可以下载文件，或者跳转到另一个小程序。步骤 npm i mp-html --save 以wepy的引入方式为例 <mp-html content="{{content}}" :copy-link="false" @linktap="linktap" /> // 这里只做了跳转链接和跳转小程序，下载文档之类的也是可以的 linktap(e) { if (e.$wx.detail['data-appid']) {

微信小程序富文本内容渲染，如何使用rich-text，微信小程序如何实现v-html效果

sanshenggiao的博客

04-11

845

微信小程序如何实现v-html效果

接口返回的富文本数据怎么在小程序渲染

qq_44749901的博客

05-20

1353

小程序渲染富文本返回的数据时使用的方法与修改里面的样式 1. 富文本返回的数据无法直接在小程序上面渲染出来,这时候就用到rich-text标签了使用方法:在nodes里直接放入接口返回的数据 <view class="content"> <rich-text class="center" nodes="{{bannerinfo.wx_content}}"></rich-text> </view> 2. rich-text渲染后怎么修改里面标签的样式,比

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

江拥羡橙的博客

01-12

2366

小程序大多数都是基于html标签来渲染和显示内容的，mp-html组件支持以下列表标签和属性，同时支持id、style、class、align、height、width 属性。几乎可以完美兼容html的标签内容，并保持web内容和小程序内容在显示上兼容性，页面渲染的性能很强。组件对html标签支持的稳定性很好：1.标签名中可以含有 : 等特殊字符（如 o:p）2.标签名和属性名大小写不敏感3.属性值可以不加引号、加单引号、加双引号，也可以却缺省（默认 true）

【亲测免费】 微信小程序富文本渲染引擎——wxParser深度探索