微信小程序实现富文本图片宽度自适应的方法

引言：在微信小程序里，比如商品展示页面的商品详情会有图片展示电脑端设置的商品详情是个人电脑端的宽度，所以在小程序里图片会显示不全，这时就应该做相应的处理，使小程序里图片显示正确

思路

把图片的宽度改为手机屏幕对应的宽度微信小程序需要知道的知识

需要知道微信小程序里有自己的宽度标准，单位为保时达针对所有不同尺寸的浏览器，微信小程序里规定屏幕宽为750rpx解决

WXML

视图类='html_detail '富文本节点=' { { artial } } '/富文本/viewxs

data={ artial : ' ' } async OnLoad(){ const JSON=wait API。GetDetail()；if(json！==null){ this。artial=util。formatrichtext(JSON。细节。描述)；}}若艺术里只有图片，并且图片没有设置风格和宽度/高度

util.js

函数formatRichText(html){让新内容=html。替换(/\ img/gi，' img style=' max-width :100%；高度：自动显示：块；'');返回新内容；}模块。导出={ formatRichText }若艺术里包含多种标签

util.js

/** * 处理富文本里的图片宽度自适应* 1.去掉图片标签里的样式、宽度、高度属性* 2.img标签添加风格属性：最大宽度：100%;高度：auto * 3 .修改所有风格里的宽度属性为最大宽度：100% * 4。去掉br/标签* @ param html * @返回{ void | string | * } */function formatrichtext(html){让新内容=html.replace(/img[^]*/gi,function(match,capture){匹配=match.replace(/style='[^']'/gi ' ').replace(/style='[^']'/gi ' ')；匹配=match.replace(/width='[^']'/gi ' ').replace(/width='[^']'/gi ' ')；匹配=match.replace(/height='[^']'/gi ' ').replace(/height='[^']'/gi ' ')；返回匹配；});新内容=newcontent.replace(/style='[^']'/gi,function(match,capture){匹配=match.replace(/width:[^；] ;/gi，'最大宽度：100%;').replace(/width:[^；] ;/gi，'最大宽度：100%;');返回匹配；});新内容=newcontent.replace(/br[^]*\//gi ' ')；新内容=新内容。替换(/\ img/gi，' img style=' max-width :100%；高度：自动显示：块；保证金-top :0；边距-底部：0;'');返回新内容；}模块。导出={ formatRichText }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。