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


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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
JS查看对象功能代码
Apr 25 Javascript
Javascript 赋值机制详解
Nov 23 Javascript
浅谈EasyUI中Treegrid节点的删除
Mar 01 Javascript
优化RequireJS项目的相关技巧总结
Jul 01 Javascript
JavaScript通过代码调用Flash显示的方法
Feb 02 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
Apr 15 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
elementUI 设置input的只读或禁用的方法
Oct 30 Javascript
微信小程序实现日期格式化和倒计时
Nov 01 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
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP面试常用算法(推荐)
2016/07/22 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
jQuery通过Ajax返回JSON数据
2015/04/28 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
2017/02/09 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
2017/03/28 Javascript
JS异步文件上传(兼容IE8+)
2017/04/02 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
2020/02/27 Javascript
vue实例的选项总结
2020/06/09 Javascript
Python实现感知器模型、两层神经网络
2017/12/19 Python
python用户管理系统
2018/03/13 Python
Django框架表单操作实例分析
2019/11/04 Python
python 如何停止一个死循环的线程
2020/11/24 Python
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
土木工程师岗位职责
2013/11/24 职场文书
班组长的岗位职责
2013/12/09 职场文书
代办委托书怎样写
2014/04/08 职场文书
机械专业技术员求职信
2014/06/14 职场文书
早读课迟到检讨书
2014/09/25 职场文书
2015年效能监察工作总结
2015/04/23 职场文书
个人工作决心书
2015/09/22 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
linux目录管理方法介绍
2022/06/01 Servers