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


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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
Jquery图形报表插件 jqplot简介及参数详解
Oct 10 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
vue-cli 组件的导入与使用教程详解
Apr 11 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 Javascript
微信小程序封装的HTTP请求示例【附升级版】
May 11 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
利用PHP实现短域名互转
2013/07/05 PHP
PHP中date与gmdate的区别及默认时区设置
2014/05/12 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
js取模(求余数)隔行变色
2014/05/15 Javascript
在JavaScript中操作数组之map()方法的使用
2015/06/09 Javascript
js实现动态创建的元素绑定事件
2016/07/19 Javascript
nodejs实现发出蜂鸣声音(系统报警声)的方法
2017/01/18 NodeJs
javaScript+turn.js实现图书翻页效果实例代码
2017/02/16 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
2017/08/25 Javascript
详解利用 Vue.js 实现前后端分离的RBAC角色权限管理
2017/09/15 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
详解VUE-地区选择器(V-Distpicker)组件使用心得
2018/05/07 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python Numpy 数组的初始化和基本操作
2018/03/13 Python
pycharm解决关闭flask后依旧可以访问服务的问题
2020/04/03 Python
关于HTML5你必须知道的28个新特性,新技巧以及新技术
2012/05/28 HTML / CSS
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
美国Max仓库:Max Warehouse
2020/05/31 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
Linux管理员面试题 Linux admin interview questions
2016/07/08 面试题
生物制药专业自我鉴定
2014/02/19 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
导游词之桂林山水
2019/09/20 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js
winserver2019安装软件一直卡在应用程序正在为首次使用做准备
2022/06/10 Servers
Go语言测试库testify使用学习
2022/07/23 Golang