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


Posted in Javascript onJanuary 20, 2019

引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,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
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
解读JavaScript中 For, While与递归的用法
May 07 Javascript
jquery cookie的用法总结
Nov 18 Javascript
javascript常用经典算法实例详解
Nov 25 Javascript
js获取当前日期时间及其它日期操作汇总
Mar 08 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
Bootstrap模态框禁用空白处点击关闭
Oct 20 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
JavaScript与JQUERY获取元素的宽、高和位置
Feb 26 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
JavaScript实现页面高亮操作提示和蒙板
Jan 04 Javascript
实例介绍JavaScript中多种组合继承
Jan 20 #Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 #Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 #Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 #Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 #Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 #Javascript
JavaScript中concat复制数组方法浅析
Jan 20 #Javascript
You might like
php设置页面超时时间解决方法
2015/09/22 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
基于thinkphp6.0的success、error实现方法
2019/11/05 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
jquery ajax同步异步的执行最终解决方案
2013/04/26 Javascript
jQuery获取选中内容及设置元素属性的方法
2014/07/09 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
javascript中href和replace的比较(详解)
2016/11/25 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
JS实现的驼峰式和连字符式转换功能分析
2016/12/21 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
微信小程序开发背景图显示功能
2018/08/08 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
python实现名片管理系统
2018/11/29 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
CSS3字体效果的设置方法小结
2016/06/13 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
班主任工作经验材料
2014/02/02 职场文书
创业计划书之寿司
2019/07/19 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
超级详细实用的pycharm常用快捷键
2021/05/12 Python
使用Navicat Premium工具将oracle数据库迁移到MySQL
2021/05/27 Oracle
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers