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


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 相关文章推荐
extjs 学习笔记 四 带分页的grid
Oct 20 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
jQuery+ajax实现文章点赞功能的方法
Dec 31 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 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将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
二级域名转向类
2006/11/09 Javascript
(function(){})()的用法与优点
2007/03/11 Javascript
js 自定义的联动下拉框
2010/02/07 Javascript
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
jquery ajax请求实例深入解析
2012/11/26 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
探究Vue.js 2.0新增的虚拟DOM
2016/10/20 Javascript
jQuery双向列表选择器select版
2016/11/01 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
js实现楼层导航功能
2017/02/23 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
微信小程序网络封装(简单高效)
2018/08/06 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
vue 组件销毁并重置的实现
2020/01/13 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
Python标准异常和异常处理详解
2015/02/02 Python
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
python简单线程和协程学习心得(分享)
2017/06/14 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python的几种主动结束程序方式
2019/11/22 Python
python 使用raw socket进行TCP SYN扫描实例
2020/05/05 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
Python常用扩展插件使用教程解析
2020/11/02 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
HTML5标签使用方法详解
2015/11/27 HTML / CSS
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
数控技术应用个人求职信范文
2014/02/03 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
美容院合作经营协议书
2014/10/10 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书