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


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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
Sample script that deletes a SQL Server database
Jun 16 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
Mar 04 Javascript
javascript实现密码强度显示
Mar 18 Javascript
ES6中如何使用Set和WeakSet
Mar 10 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
vue实现全选、反选功能
Nov 17 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
Javascript读取上传文件内容/类型/字节数
Apr 30 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
JavaScript DOM学习第四章 getElementByTagNames
2010/02/19 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
$.each与$().each的区别示例介绍
2014/03/20 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
Vue使用NProgress的操作过程解析
2019/10/10 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Python Socket编程入门教程
2014/07/11 Python
跟老齐学Python之变量和参数
2014/10/10 Python
Python常见加密模块用法分析【MD5,sha,crypt模块】
2017/05/24 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
python将txt文档每行内容循环插入数据库的方法
2018/12/28 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
Python zip函数打包元素实例解析
2019/12/11 Python
python类中super() 的使用解析
2019/12/19 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
用Python爬取LOL所有的英雄信息以及英雄皮肤的示例代码
2020/07/13 Python
详解pandas映射与数据转换
2021/01/22 Python
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
酒店经理职责
2014/01/30 职场文书
主管竞聘书范文
2014/03/31 职场文书
四年级学生评语大全
2014/04/21 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
vue使用Google Recaptcha验证的实现示例
2021/08/23 Vue.js