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

最新推荐文章于 2024-03-28 09:59:42 发布
最新推荐文章于 2024-03-28 09:59:42 发布
阅读量550 收藏
点赞数
分类专栏： 开发过程总结 文章标签： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongmei121/article/details/117710183
版权
本文探讨了在使用wxParser-plugin处理1125*1965像素图片时，Oppo手机出现缝隙的问题。通过调整.wxParser-p类的CSS，将margin-bottom设为-1px解决了这个问题。
摘要由CSDN通过智能技术生成

场景：小程序使用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: -1px !important;

}

咕噜咕噜的车轮向前
关注
专栏目录
微信小程序 wxParse 解析富文本,图片间隙一步搞定
Blueberry
07-20 1076
下载地址 ：https://github.com/icindy/wxParse js文件: //引入 const WxParse = require('../../../wxParse/wxParse/wxParse.js'); //使用 let detail_content = '<div><p>使用的富文本内容</p></div>' WxParse.wxParse('detail_content', 'html', detail_content, _th
微信小程序富文本渲染引擎 wxParser 使用教程
最新发布
gitblog_01011的博客
08-13 355
微信小程序富文本渲染引擎 wxParser 使用教程 wxParser微信小程序富文本渲染引擎项目地址:https://gitcode.com/gh_mirrors/wx/wxParser 项目介绍 wxParser 是一个用于微信小程序的富文本渲染引擎，主要用于将富文本编辑器编辑的内容展示到微信小程序上。它支持解析 HTML 内容，并将其转换为小程序可识别的 WXML 格式，以便在小程序中进行...
「wxParser」小程序插件
weixin_34405925的博客
11-19 1170
上期，我们在《「微信同声传译」小程序插件：语音转文字、文本翻译、语音合成，这款插件独一无二！》一文中介绍了「微信同声传译」小程序插件的意义、作用以及应用。而在此之前，我们还介绍过「腾讯地图」、「腾讯视频」、「医院 LBS 位置服务」插件，有兴趣了解的读者可以点击公众号底部菜单「极客干货 - 小程序插件」了解。 今天我们为大家推荐的是一款富文本渲染插件「wxParser」，目前 wxParser ...
富文本图片之间有空格的解决方案
objectking的博客
10-25 3184
不知道大家有没有 很奇怪传过来的富文本中的图片，明明没有空格，但是显示在手机上图片都有间距。解决方式很多~ 1.你可以设置font-size:0 这样的解决方式，有一定局限性，假如你的富文本里面有文字的话，文字就会受到影响。 2. vertical-align:middle; vertical-align 属性设置元素的垂直对齐方式。 这个属性可以完美解决。 该属性同样适用于H5 以及 ...
推荐开源项目：`wxParser-plugin`
gitblog_00017的博客
03-28 323
推荐开源项目：wxParser-plugin 项目地址:https://gitcode.com/ifanrx/wxParser-plugin 在前端开发中，我们经常需要处理微信公众号的文章，而wxParser-plugin正是一个专为此目的设计的插件。它是一个基于JavaScript编写的轻量级工具，能够解析并渲染微信公众号HTML内容，使其在各种平台上都能保持良好的显示效果。 项目简介 wxPa...
微信小程序wxParse中的图片有空隙
山有木兮木有枝 心悦君兮君不知
04-25 879
在wxParse.wxss中加入以下代码（白色边框也不会有）： /* 解决图片之间间隙 */ .wxParse-img{ display: inline-flex; border: none; outline: none; vertical-align: bottom; } image[src=""] { opacity: 0; } ...
微信小程序海报插件，生成海报的小程序组件wxa-plugin-canvas-master.zip
09-25
本压缩包“wxa-plugin-canvas-master.zip”包含了一个专门用于微信小程序的海报生成组件，它可以帮助开发者在小程序中实现自定义海报的动态生成功能。 首先，我们要理解“wxa-plugin-canvas-master”中的“wxa”...
微信小程序-微信小程序 webpack 插件
08-05
微信小程序 webpack 插件 为什么要使用 webpack 很多前端开发者都使用过 webpack，通过 webpack 开发 JavaScript 项目可以带来很多好处 支持通过 yarn 或 npm 引入和使用 node_modules 模块 支持丰富且灵活的 ...
微信小程序WordPress后台插件PluginForWordPress-master.zip
09-25
微信小程序WordPress后台插件PluginForWordPress是一款专门为WordPress网站设计的扩展工具，旨在帮助用户将他们的WordPress站点与微信小程序无缝对接。这款插件的核心功能是使WordPress网站能够与微信小程序进行数据...
webpack-wxapp-module-plugin:微信小程序 webpack打包插件
04-28
微信小程序webapck插件 支持哪些特性? 仅需要配置entry 指向app.js即可 例如 entry:'./app.js' 支持node_modules 模块引用 支持node_modules 组件引用 node_modules平行移植 打包后的require会自动修改引用路径 例如...
wxParser-开源
04-25
要点是将带有正则表达式的文档解析到树上，并通过自己的python代码支持对它们进行编辑或替换某些数据。 Python非常易于理解，请不要担心并尝试！ ;-)
百度编辑器去掉图片间空隙
11-01
百度编辑器去掉图片间空隙
微信小程序wxParse插件图片宽高自定义设置优化
07-13
微信小程序富文本解析之图片宽高设置优化，本优化中，插件可以依据富文本中给图片设置的%或px宽高进行小程序image标签的宽高显示设置。本人充分尊重原著作者的程序编码，如对原著版权造成不良影响，请联系本人删除优化内容。感谢使用！如有更好的优化方案，欢迎各开发者发文交流。
wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析.zip
01-05
微信小程序的优势在于它方便快捷、轻量级、跨平台、丰富的推广方式、丰富的功能接口、数据分析与优化、结合微信支付、支持多场景应用、社交功能以及多端同步等。这些优点使得小程序能够满足用户的多种需求，提供更好的用户体验
小程序富文本插件 wxParse
08-06
在小程序项目开发中，会遇到富文本编辑的内容，后台返回到小程序端无法解析，这时就需要一个插件来处理。 微信小程序没有提供webview等html解析，原展示类文本没有办法图文并茂的原生展示，wxParse主要目的就是弥补富文本解析空缺的问题。
微信小程序富文本 rich-text wxParse （Html、Markdown）
qq_29096549的博客
07-16 1201
一、小程序富文本原生组件rich-text（ 官方文档 ） 使用方法： <rich-text nodes="{{Content}}"></rich-text> 优点：方便快捷 缺点： 1.不支持视频 2.仅支持网络图片 二、推荐第三方富文本组件wxParser（ 文档 ） 支持视频video标签 预览一下成果： 使用方法： 1.下载wxParse文件夹 放入微信小程序目录下 wxss： //在使用的Wxss中引入WxParse.css,可以在app.wxss @import.
如何去除微信小程序 wxParse 解析富文本图片间隙问题
经验之谈，不做搬运工
11-13 853
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 "../../...
小程序中更快速更完美部署富文本 -- wxParser 插件
Jana Jing的分享
03-11 600
如何接入「wxParser」插件？ 在小程序中使用「wxParser」，你需要在项目中引入「wxParser」的 JS 库，同时，需要在相应的 WXML、WXSS 和 JS 文件中引入「wxParser」的模板、样式文件和编写初始化代码，少了任何一步，程序都不能正常工作。 1. 申请使用插件 在「小程序管理后台 - 设置 - 第三方设置 - 插件管理」中查找插件名称「wxParser」（appid: wx9d4d4ffa781ff3ac），并申请使用。 2. 引入插件代码 在app.json文
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值