2020年5月25日
微信小程序切图rich-text图片自适应解决
微信小程序切图rich-text图片自适应和传统H5会有一点区别，对于h5的图片自适应就很简单了样式就可以解决，不过对于微信小程序来说方法并不一样，需要在数据调用之前处理数据，解决方法如下：
一、说明
微信小程序rich-text标签可以显示富文本
但是对于样式定义仅支持style和class，
直接指定img样式设置图片样式无效。
问题：对于img图片宽度太大超出处理。
二、使用正则替换处理，添加style属性防止图片太宽
原理：
content.replace('<img', '<img style="max-width:100%;height:auto" ') //防止富文本图片过大使用正则处理；
data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ')
三、使用系统屏幕宽度，或高度处理图片
//内容处理
wx.getSystemInfo({
success: function(res) {
data.content = data.content.replace(/\<img/g, ‘<img style=”width:’+res.windowWidth+‘px;height:auto;display:block;margin-left:-10px;margin-right:-10px;”‘);
_this.setData({
entity: data,
id: id,
imgMinList: data.imglist,
paramlist: data.paramlist
});
}
})
关注“qietuwang”微信公众号，获取一手干货内容推送
本文由切图网原创，转载请保留版权：
微信小程序切图rich-text图片自适应解决
http://www.qietu.com/weixin-richtext-tupian/
微信扫一扫二维码访问
