小程序富文本提取图片可放大缩小


Posted in Javascript onMay 26, 2020

本文实例为大家分享了小程序富文本提取图片可放大缩小的具体代码,供大家参考,具体内容如下

启发:

因为最近有需求说在小程序商品的详情页里所有图片可以放大缩小,网上好像不太好找,就写了篇博客,供大家参考

step1

获取到富文本内容,怎么获取就是请求数据嘛,这个不在赘述了。

var nodes = res.data.data.content;

step2

检测 nodes中是否有img标签,这个有很多方法,我这里用的indexOf

if (nodes.indexOf("src") >= 0) {
}

step3

第三步就是用正则全局匹配img标签,并且替换成空,这里setData是为了把图片添加到wxml显示的,说下match和captrue,第一个是带有img标签的返回值,第二个是src的值

//s3:正则匹配所有图片路径
var imgs = [];
nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
 imgs.push(capture);
 that.setData({
  imgs: imgs
 });
 return '';
});

step4

最后就是把多余的p标签清除掉,影响样式

//s4:清除图片后正则匹配清除所有p标签
nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
 return '';
});

完整的过程,本例亲测可行

//富文本图片放大
var nodes = res.data.data.content;
if (nodes.indexOf("src") >= 0) {
 //正则匹配所有图片路径
 var imgs = [];
 nodes = nodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
  imgs.push(capture);
  that.setData({
   imgs: imgs
  });
  return '';
 });
 //清除图片后正则匹配清除所有p标签
 nodes = nodes.replace(/<p(([\s\S])*?)<\/p>/g, function (match, capture){
  return '';
 });
}

end

step5

wxml中

<view class='detail'>
 <rich-text nodes="{{nodes}}" bindtap='richImg'></rich-text>
</view>
<view class='detail1'>
 <block wx:for="{{imgs}}" wx:key="" wx:for-item="item">
   <image class='img' src='{{item}}' bindtap='chooseImg' data-src='{{item}}'></image>
 </block>
</view>

最后还有个预览的js

chooseImg: function (e) {  //预览
 var src = e.currentTarget.dataset.src;
 var urls = [];
 urls[0] = src;
 wx.previewImage({
  current: src, // 当前显示图片的http链接 
  urls: urls
 })
},

这里成功后可以需要调整图片的样式

最后

以上只是简单的demo,图片是连续的情况,但在富文本中可能会出现图片不连续,这个后续会贴出来,基本思路就是rich-text也是循环添加到wxml中,本例亲测可行,如有更好的方法,欢迎提出。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
情人节专属 纯js脚本1k大小的3D玫瑰效果
Feb 11 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
简介JavaScript中的setTime()方法的使用
Jun 11 Javascript
jQuery列表检索功能实现代码
Jul 17 jQuery
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 Javascript
AutoJs实现刷宝短视频的思路详解
May 22 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
开发一个封装iframe的vue组件
Mar 29 Vue.js
微信小程序自定义联系人弹窗
May 26 #Javascript
微信小程序单选框自定义赋值
May 26 #Javascript
vue输入框使用模糊搜索功能的实现代码
May 26 #Javascript
jQuery弹框插件使用方法详解
May 26 #jQuery
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
May 26 #Javascript
微信小程序实现弹框效果
May 26 #Javascript
微信小程序自定义弹出层效果
May 26 #Javascript
You might like
php 批量替换程序的具体实现代码
2013/10/04 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
深入理解JavaScript定时机制
2010/10/29 Javascript
js获取浏览器的可视区域尺寸的实现代码
2011/11/30 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
javascript实现回车键提交表单方法总结
2015/01/10 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
微信小程序自定义扫码功能界面的实现代码
2020/07/02 Javascript
JavaScript如何操作css
2020/10/24 Javascript
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
pytorch梯度剪裁方式
2020/02/04 Python
Django中如何用xlwt生成表格的方法步骤
2021/01/31 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
详解CSS3选择器的使用方法汇总
2015/11/24 HTML / CSS
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
新大陆软件面试题
2016/11/24 面试题
市场部专员岗位职责
2013/11/30 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
模具毕业生推荐信
2014/02/15 职场文书
环保倡议书300字
2014/05/15 职场文书
学生安全责任书模板
2014/07/25 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
企业整改报告范文
2014/11/08 职场文书
python Polars库的使用简介
2021/04/21 Python