微信小程序 wxParse 解析富文本,图片间隙一步搞定

最新推荐文章于 2023-05-14 12:39:30 发布

云轻i

最新推荐文章于 2023-05-14 12:39:30 发布

阅读量1k

点赞数 1

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_42087300/article/details/107462892

版权

本文提供了解决微信小程序中使用wxParse组件解析富文本时遇到的图片间隙问题的方法，包括js、wxss和wxml的相关文件配置。

摘要由CSDN通过智能技术生成

下载地址请移步我的附件,0 积分下载

js文件:

//引入
const WxParse = require('../../../wxParse/wxParse/wxParse.js');

//使用
let detail_content = '<div><p>使用的富文本内容</p></div>'
WxParse.wxParse('detail_content', 'html'<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

云轻i

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

微信小程序wxParse插件图片宽高自定义设置优化

07-13

微信小程序富文本解析之图片宽高设置优化，本优化中，插件可以依据富文本中给图片设置的%或px宽高进行小程序image标签的宽高显示设置。本人充分尊重原著作者的程序编码，如对原著版权造成不良影响，请联系本人删除优化内容。感谢使用！如有更好的优化方案，欢迎各开发者发文交流。

微信小程序 wxParse插件显示视频问题

01-19

修改wxParse/html2json.js 文件，在 html2json(html, bindName) 方法里 var node = { node: 'element', tag: tag, }; 这里使用 node.tag 能够获取标签类型，比如： img、embed、video 这里我的系统后台编辑器...

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

微信小程序富文本插件wxParser-plugin，图片出现缝隙的情况

zhongmei121的专栏

06-08

553

场景：小程序使用wxParser-plugin插件，图片是1125*1965像素，然后某些手机（例如oppo）出现图片之间有缝隙的情况，查看代码，发现图片计算后的高度是838.4px，如果改成838px则没有缝隙问题解决方案：简单粗暴的解决方案是设置.wxParser-p类：margin-bottom: -1px !important; .wxParser-p { margin: 0 !important; font-size: 0 !important; margin-bottom: -1

小程序使用wxParse插件解析html标签图片间距问题

weixin_30892763的博客

06-11

427

转自：https://www.cnblogs.com/likun123/p/9543376.html 小程序解析html标签,就需要用到wxParse啦.但是在解析连续图片的时候,会发现图片之间会有间隔,这是因为微信小程序本身的img标签自带间隔解决:在wxss中设置 .wxParse-img{ display: flex; } 转载于:https://www.cnblogs...

【无标题】微信小程序 rich-text中多张图片之间存在空白的问题

最新发布

mumu176699的博客

05-14

589

用 rich-text在微信小程序中显示html时，如果多张图片，每张图片之间，会出现很细的一条空白行。img 标签中，添加属性： vertical-align:middle;网上的方案有些是font-size:0,觉的不太方便。

如何去除微信小程序 wxParse 解析富文本图片间隙问题

经验之谈，不做搬运工

11-13

865

js文件: //引入 const WxParse = require('../../../wxParse/wxParse/wxParse.js'); //使用 let detail_content = '<div><p>使用的富文本内容</p></div>' WxParse.wxParse('detail_content', 'html', detail_content, _this, 5); wxss文件 @import "../../...

微信小程序 图片自适应，富文本解析 (源码)

05-31

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

微信小程序使用wxParse实现接入富文本编辑

03-29

微信小程序中比如活动说明，简介这样的图文介绍说明页面，后台通常配置成富文本编辑框，由后台直接输入内容，然后在小程序界面展现。 (此图片来源于网络，如有侵权，请联系删除! ) 但是富文本编辑提取到内容是html...

微信小程序富文本解析点击图片放大_微信小程序之富文本解析（附源码和效果图）...

weixin_39906130的博客

12-22

492

示例效果图：一、简介及说明在小程序项目开发中，会遇到富文本编辑的内容，后台返回到小程序端无法解析，这时就需要一个插件来处理。微信小程序没有提供webview等html解析，原展示类文本没有办法图文并茂的原生展示，wxParse主要目的就是弥补富文本解析空缺的问题。插件由联盟网站DEV开发，开发者：icindy，最新版本请查看github地址：wxParse二、使用方法1、下载wxParese文件...

解决小程序rich-text渲染详情页面图片有间隙的问题

liaoxianhua888的博客

05-01

887

在开发中，我们会发现图片与图片之间有间隙此时我的解决方法是：将后端返回的数据为img标签添加style样式 res.info = res.info.replace(/<img /g,'<img style="display:block" ')

微信小程序图片宽度100%，高度自适应

Misnice的博客

01-05

560

1.图片样式设置宽度100% image { width: 100%; } 2.image标签添加属性mode="widthFix" <image src="../../images/bnner.png" mode="widthFix">

微信小程序富文本解析器rich-text、web-view、wxParse、mp-html、towxml对比

ly2983068126的博客

10-22

6799

微信小程序解析富文本html大概有几种方式，我用过的有这三种rich-text、web-view、wxParse、mp-html，各有各的优缺点，接下来聊一聊。

微信小程序wxss布局属性-全

热门推荐

qq_41984634的博客

05-01

1万+

123

【uni】小程序中富文本中图片之间存在缝隙问题解决

学无止境

03-21

1345

解决方法：将img改为block属性 richtext = richtext.replace(/<img /g, '<img style="display:block;" ')

富文本图片之间有空格的解决方案

objectking的博客

10-25

3208

不知道大家有没有很奇怪传过来的富文本中的图片，明明没有空格，但是显示在手机上图片都有间距。解决方式很多~ 1.你可以设置font-size:0 这样的解决方式，有一定局限性，假如你的富文本里面有文字的话，文字就会受到影响。 2. vertical-align:middle; vertical-align 属性设置元素的垂直对齐方式。这个属性可以完美解决。该属性同样适用于H5 以及 ...

微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复

小猿猪哥的博客

07-05

9157

在上一篇微信小程序开发(十二)富文本插件wxParse的使用中，我已经使用了wxParse插件。下午有时间就仔细的把玩了一下，发现了一个bug。问题描述仔细看报错，我们会发现是wxParse.js文件里面的wxParseImgTap方法里面有Bug。没有imageUrls这个属性。分析问题后来把wxParse插件的源码都看了一次，也修复了这个bug。其实修复这个bug不需要看看那么多，只需要看w

微信小程序wxParse中的图片有空隙

山有木兮木有枝心悦君兮君不知

04-25

884

在wxParse.wxss中加入以下代码（白色边框也不会有）： /* 解决图片之间间隙 */ .wxParse-img{ display: inline-flex; border: none; outline: none; vertical-align: bottom; } image[src=""] { opacity: 0; } ...

image图片布局存在空隙的解决办法

huangjielian

08-15

7339

1、将图片转换为块级对象　　即，设置img为：　　display:block; 　　在本例中添加一组CSS代码：　　#sub img {display:block;} 　　2、设置图片的垂直对齐方式　　即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：

小程序中利用wxparse插件进行图文解析详解

贤和知识点收藏

06-10

4678

背景：由于小程序不支持html标签，因此为了让小程序与H5共用一段图文，解析成小程序识别的标签就显得重要了插件：wxparse用法一：通篇图文解析，具体请看插件文档1.1、下载插件js等相关文件：1.2、在js中引入var WxParse = require('../../resources/wxParse/wxParse.js'); var util = require('../../../ut...

微信小程序富文本解析神器：wxParse组件特性介绍

资源摘要信息:"wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析.zip" 知识点： 1. 微信小程序开发：微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫...