微信小程序实现富文本图片宽度自适应的方法
作者:孟小欢 发布时间: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
0
投稿
猜你喜欢
- 如何一行行地读取文件?这样就可以做到一行行地读出了:dim input(30) ' 定义一个数组,大小
- PHP getNamespaces() 函数实例返回 XML 文档中使用的命名空间:<?php $xml=<<<XM
- 今天修改之前实习小伙伴写的js代码的时候,遇到修改后页面未发生变化的问题。因为我是web开发小白,所以上网查了一波,得以解决~~初次进行we
- rs.open sql,conn:如果sql是delete,update,insert则会返回一个关闭的记录集,在使用过程中不要来个rs.c
- 封装为dll会带来很多的好处,主要包括只是产权的保护,以及效率和安全性能的提升。这个例子中被封装的dll文件可以隐藏access数据库的实际
- 前两天有一位网友问我一个关于Javascript中++操作符的问题,他的代码大致是这样的ADS.addEvent(window,'c
- 一:关于MySQL5 MySQL5系列数据库是MySQL的最新版本的数据库,比较流行的发行版是mysql-5.0.18。MySQL 英文官方
- 在实际的应用中,Access做应用程序时,经常会做成"数据"和"程序"两个数据库,"数据&
- 先下载:http://signup.qq.com/js/a.js用 IntelliJ IDEA 格式化代码:var naa = true;O
- gzip 是什么东东呢?百科跟我们说gzip是GNU zip的缩写,它是一个 GNU 自由软件的文件压缩程序。…gzip 的基础是 DEFL
- server端代码:package main import ( "fmt" "net" "
- 但凡设计师都对简洁的设计情有独钟,我们不喜欢复杂,却也不能不会rich。先来看下“rich”在字典里的意思:(1) having an ab
- 有感于中国互联网设计界十几年的变化,从网页设计师变身界面设计师,和近一两年来兴起的转型交互设计师。大多数都是随着一个行业的兴起而前赴后继的投
- 定义和用法fopen() 函数打开文件或者 URL。如果打开失败,本函数返回 FALSE。语法fopen(filename,mode,inc
- 在这里给出是的WindowsXP操作系统下的安装过程一、下载安装文件到MySQL官方网站找到ZIP文件提示:有些是安装文件,安装时会有提示,
- 本文给出了MySQL数据库中定义外键的必要性、具体的定义步骤和相关的一些基本操作,供大家参考!定义数据表假如某个电脑生产商,它的数据库中保存
- 每个进行过较大型的ASP-Web应用程序设计的开发人员大概都有如下的经历:ASP代码与页面HTML混淆难分,业务逻辑与显示方式绞合,使得代码
- 在做视觉设计时,如何高效地使用图标是一门学问:该使用什么样的图标?图标该放在哪里?大小如何?图标的使用是否帮助用户更好更快的理解内容,亦或是
- 表中主键必须为标识列,[ID] int IDENTITY (1,1)1.分页方案一:(利用Not In和SELECT TOP分页)语句形式:
- 抛出的异常信息:异常详细信息: System.ArgumentOutOfRangeException: “ddlTotalCostDisco