在微信里看过文章的应该知道,文章里的图片点击后可以放大、分享和保存。

然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调用。

previewImage是微信客户端给内置浏览器增加的一个Javascript Interface,通过调用这个API,可以调起微信客户端提供的大图片查看组件。

官方说明和例子:

wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
});

  

document.querySelector('#previewImage').onclick = function () {
wx.previewImage({
current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
urls: [
'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
]
});
};

  可以看出例子中的数据是写死在里面的,所以要自己写个JS,然后把指定div里面图片加载到wx.previewImage中

<div id="previewImage">
<img src="https://www.cnblogs.com/1.jpg"><img src="https://www.cnblogs.com/2.jpg" >
</div>

  把图片链接都添加到wx.previewImage里

<script>
$(document).on('click', '#previewImage img',function(event) {
var imgArray = [];
var curImageSrc = $(this).attr('src');
var oParent = $(this).parent();
if (curImageSrc && !oParent.attr('href')) {
$('#previewImage img').each(function(index, el) {
var itemSrc = $(this).attr('src');
imgArray.push(itemSrc);
});
wx.previewImage({
current: curImageSrc,
urls: imgArray
});
}
});
</script>

  效果图:

多张图片支持左右滑动

放大后

微信企业号办公系统-图片预览放大功能-previewImage的更多相关文章

  1. 微信企业号办公系统-JSSDK上传图片(多图上传)

    在开发微信企业号办公系统中,涉及到了图片上传功能,一开始使用的flash插件上传方法,在苹果手机上可以调用相机直接拍摄照片,但在安卓手机上只能选择照片. 微信jssdk-api带有一套完整的调用选择本 ...

  2. 手动实现图片预览-放大缩小全屏支持IE9以上

    #{extends '/Index/index.html' /} #{set title:'意见反馈' /} <script src="/public/mgr/javascripts/ ...

  3. 【VUE】图片预览放大缩小插件

    From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...

  4. HTML5图片预览 放大

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. input file样式修改,图片预览删除功能

    本篇对input file进行了修改,改成自己需要的样式,类似验证身份上传身份证图片的功能. 效果图如下: 这里主要展示上传预览图片功能,对于删除功能的html及css写的比较粗糙,对于想要精细表现这 ...

  6. vue项目中图片预览旋转功能

    最近项目中需要在图片预览时,可以旋转图片预览,在网上找了下,发现有一款功能强大的图片组件:viewerjs. git-hup: https://github.com/fengyuanchen/view ...

  7. 微信小程序:图片预览

    wxml页面: <image src='{{UPLOAD_IMAGES_URL}}{{vv.img_s}}' data-src="{{vv.img}}" bindtap=&q ...

  8. asp.net 微信企业号办公系统-流程设计--流转条件设置(路由)

    当一个步骤后面有多个步骤时,可以设置为根据设置条件系统自动判断该流向哪些步骤,也叫路由. 工作流没有单独的路由步骤来设置条件,流程条件通过双击连线弹出条件设置框来设置. 1.sql条件 即通过sql条 ...

  9. asp.net 微信企业号办公系统-流程设计--流程步骤设置-策略设置

    策略设置包括当前步骤的流转方式,处理人员,退回策略等设置. 流转类型:当前步骤后面有多个步骤时,此类型选择可以决定后续步骤的发送方式. 1.系统控制:由系统根据您在线上设置的流转条件来判断该发送到哪一 ...

随机推荐

  1. [NHibernate]NHibernate.Tool.hbm2net

    系列文章 [Nhibernate]体系结构 [NHibernate]ISessionFactory配置 [NHibernate]持久化类(Persistent Classes) [NHibernate ...

  2. diff和patch的使用、patch文件的格式解说

    为了弄懂 patch中的 p0   p1    和.orig文件是啥,找到了这篇文章! 来源:http://www.cnblogs.com/super119/archive/2010/12/18/19 ...

  3. 条件编译#if #ifdef

    近期由于一些莫名其妙的原因开始学c++,我觉得我哪天要是挂了也是被自己给折腾死的,算了,反正不是折腾死就是被淘汰,当是没事打发时间了,废话不多说,开始今天的主题. 之前接触的注释就是注释,条件语句就是 ...

  4. CentOS6.3 编译安装LAMP(2):编译安装 Apache2.2.25

    所需源码包: /usr/local/src/Apache-2.2.25/httpd-2.2.25.tar.gz 编译安装 Apache2.2.25 #切换到源码目录 cd /usr/local/src ...

  5. ssh框架整合-NoClassDefFoundError-NoSuchMethodError-遁地龙卷风

    (-1)写在前面 spring2.0.struts1.2.hibernate3.0.myeclipse8.5.tomcat6.0,整合之中出现了很多问题,前几天忙着整理毕业论文的资料,时间腾出来了,总 ...

  6. 多重网格法简介(Multi Grid)

    原文链接 多重网格法是一种用于求解方程组的方法,可用于插值.解微分方程等. 从专业角度讲多重网格法实际上是一种多分辨率的算法,由于直接在高分辨率(用于求解的间隔小)上进行求解时对于低频部分收敛较慢,与 ...

  7. HikariCP

    HiKariCP是数据库连接池的一个后起之秀,号称性能最好,可以完美地PK掉其他连接池. 为何要使用HiKariCP?这要先从BoneCP说起: 什么?不是有C3P0/DBCP这些成熟的数据库连接池吗 ...

  8. JavaScript方法——call和apply

    1.相同点: a) 产生的效果或作用完全相同: b) 至少有一个参数: c) 第一个参数必须有且是一个对象(Object),因为就是这个家伙偷懒. 2.不同点: 传递参数的方式. 前提: 1.有两个对 ...

  9. IIS跳转html页面自动识别是PC端还是手机端

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. C#调用webservice简单实例

    如何利用IIS创建webservice不多做阐述,直接讲C#代码中如何调用已创建好的webservice. 首先在VS2010中新建一个工程项目,然后右键点击工程名选择添加服务引用. 在URL一栏中输 ...