微信小程序实现富文本图片宽度自适应的方法
作者:孟小欢 时间:2023-10-17 12:44:25
引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确
思路
把图片的宽度改为手机屏幕对应的宽度
微信小程序需要知道的知识
需要知道微信小程序里有自己的宽度标准,单位为rpx;
针对所有不同尺寸的浏览器,微信小程序里规定屏幕宽为750rpx;
解决
WXML
<view class='html_detail'>
<rich-text nodes='{{artical}}'></rich-text>
</view>
WXS
data={artical:''}
async onLoad(){
const json = await api.getDetail();
if(json !== null){
this.artical = util.formatRichText(json.detail.description);
}
}
若artical里只有图片,并且图片没有设置style和宽度/高度
util.js
function formatRichText(html){
let newContent= html.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"');
return newContent;
}
module.exports = {
formatRichText
}
若artical里包含多种标签
util.js
/**
* 处理富文本里的图片宽度自适应
* 1.去掉img标签里的style、width、height属性
* 2.img标签添加style属性:max-width:100%;height:auto
* 3.修改所有style里的width属性为max-width:100%
* 4.去掉<br/>标签
* @param html
* @returns {void|string|*}
*/
function formatRichText(html){
let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
return match;
});
newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
return match;
});
newContent = newContent.replace(/<br[^>]*\/>/gi, '');
newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
return newContent;
}
module.exports = {
formatRichText
}
来源:https://juejin.im/post/5c3d97aef265da611e4de22b
标签:微信小程序,图片,宽度自适应
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python中sort和sorted排序的实例方法
2022-12-22 09:10:12
如何利用PyQt5制作一个简单的登录界面
2023-11-18 20:36:31
![](https://img.aspxhome.com/file/2023/2/93532_0s.jpg)
在ASP中使用SQL语句之10:视图
2007-08-11 13:24:00
jquery validate.js表单验证的基本用法入门
2023-07-02 05:30:47
使用 Python 实现微信公众号粉丝迁移流程
2022-05-10 21:02:07
Mysql的longblob字段插入数据问题解决
2024-01-24 09:49:52
一个用JavaScript写的本周是本学期第几周的程序
2009-03-09 12:49:00
EasyASP v1.5发布(包含数据库操作类,原clsDbCtrl.asp)第1/2页
2011-04-08 10:40:00
Navicat Premium15连接云服务器中的数据库问题及遇到坑
2024-01-19 05:41:50
![](https://img.aspxhome.com/file/2023/2/77212_0s.png)
Python实现视频裁剪的示例代码
2022-07-20 07:14:14
![](https://img.aspxhome.com/file/2023/3/85373_0s.png)
Python中使用Flask、MongoDB搭建简易图片服务器
2021-12-09 19:57:16
PyCharm 安装与使用配置教程(windows,mac通用)
2023-08-21 01:15:39
![](https://img.aspxhome.com/file/2023/7/76947_0s.png)
PHP header()函数使用详细(301、404等错误设置)
2023-11-02 17:28:23
Mysql 文件配置解析
2024-01-26 10:01:54
如何用mysql自带的定时器定时执行sql(每天0点执行与间隔分/时执行)
2024-01-16 01:58:31
![](https://img.aspxhome.com/file/2023/6/99496_0s.png)
MySQL关于ERROR 1290 (HY000)报错解决方法
2024-01-21 19:50:23
Selenium定位元素操作示例
2022-01-21 04:23:56
java 查询oracle数据库所有表DatabaseMetaData的用法(详解)
2024-01-16 02:31:33
Python如何快速上手? 快速掌握一门新语言的方法
2023-05-07 12:00:48
Scrapy-redis爬虫分布式爬取的分析和实现
2023-01-04 10:21:19
![](https://img.aspxhome.com/file/2023/0/76110_0s.png)