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


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 相关文章推荐
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
JavaScript控制按钮可用或不可用的方法
Apr 03 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
利用js判断手机是否安装某个app的多种方案
Feb 13 Javascript
使用JavaScript生成罗马字符的实例代码
Jun 08 Javascript
layer弹出层取消遮罩的方法
Sep 25 Javascript
Vue.js自定义指令学习使用详解
Oct 19 Javascript
JS实现手风琴特效
Nov 08 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
如何让thinkphp在模型中自动完成session赋值小教程
2014/09/05 PHP
php is_executable判断给定文件名是否可执行实例
2016/09/26 PHP
php将print_r处理后的数据还原为原始数组的解决方法
2016/11/02 PHP
jquery api参考 visualjquery 中国线路 速度快
2007/11/30 Javascript
Prototype String对象 学习
2009/07/19 Javascript
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
js实现二代身份证号码验证详解
2014/11/20 Javascript
jquery实现简单手风琴菜单效果实例
2015/06/13 Javascript
Bootstrap入门书籍之(三)栅格系统
2016/02/17 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
强大的 Angular 表单验证功能详细介绍
2017/05/23 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
AjaxFileUpload.js实现异步上传文件功能
2019/04/19 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
使用xampp将angular项目运行在web服务器的教程
2019/09/16 Javascript
python利用不到一百行代码实现一个小siri
2017/03/02 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
2019/03/30 Python
简单介绍django提供的加密算法
2019/12/18 Python
python sorted函数原理解析及练习
2020/02/10 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
10分钟入门CSS3 Animation
2018/12/25 HTML / CSS
params有什么用
2016/03/01 面试题
开工典礼策划方案
2014/05/23 职场文书
应急管理工作总结2015
2015/05/04 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
在 Python 中利用 Pool 进行多线程
2022/04/24 Python
聊聊配置 Nginx 访问与错误日志的问题
2022/05/25 Servers