微信JSSDK接口,previewImage

简介: 原文:https://www.hackhp.com/801.html  在微信里看过文章的应该知道,文章里的图片点击后可以放大、分享和保存。然而自己在微信里开发的网页,里面的图片点击后没办法实现这个效果,然后就去看了下微信JS文档,里面有个previewImage可以调用。

原文:https://www.hackhp.com/801.html 

 

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

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

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

官方说明和例子:

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

 
  1. document.querySelector('#previewImage').onclick = function () {
  2. wx.previewImage({
  3. current: 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
  4. urls: [
  5. 'http://img3.douban.com/view/photo/photo/public/p2152117150.jpg',
  6. 'http://img5.douban.com/view/photo/photo/public/p1353993776.jpg',
  7. 'http://img3.douban.com/view/photo/photo/public/p2152134700.jpg'
  8. ]
  9. });
  10. };

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

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

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

 
  1. <script>
  2. $(document).on('click', '#previewImage img',function(event) {
  3. var imgArray = [];
  4. var curImageSrc = $(this).attr('src');
  5. var oParent = $(this).parent();
  6. if (curImageSrc && !oParent.attr('href')) {
  7. $('#previewImage img').each(function(index, el) {
  8. var itemSrc = $(this).attr('src');
  9. imgArray.push(itemSrc);
  10. });
  11. wx.previewImage({
  12. current: curImageSrc,
  13. urls: imgArray
  14. });
  15. }
  16. });
  17. </script>
若转载请注明出处!若有疑问,请回复交流!
目录
相关文章
|
3月前
|
存储 小程序 关系型数据库
后台交互-个人中心->小程序登录微信登录接口演示,小程序授权登录理论,小程序授权登录代码演示,微信表情包存储问题
后台交互-个人中心->小程序登录微信登录接口演示,小程序授权登录理论,小程序授权登录代码演示,微信表情包存储问题
47 0
|
5月前
|
缓存 移动开发 小程序
从零玩转系列之微信支付实战Uni-App微信授权登录和装修下单页面和搭建下单接口以及发起下单请求3
从零玩转系列之微信支付实战Uni-App微信授权登录和装修下单页面和搭建下单接口以及发起下单请求3
50 0
|
5月前
|
缓存 小程序 API
从零玩转系列之微信支付实战Uni-App微信授权登录和装修下单页面和搭建下单接口以及发起下单请求2
从零玩转系列之微信支付实战Uni-App微信授权登录和装修下单页面和搭建下单接口以及发起下单请求2
71 0
|
5月前
|
小程序 前端开发 安全
从零玩转系列之微信支付实战Uni-App微信授权登录和装修下单页面和搭建下单接口以及发起下单请求1
从零玩转系列之微信支付实战Uni-App微信授权登录和装修下单页面和搭建下单接口以及发起下单请求
52 0
从零玩转系列之微信支付实战Uni-App微信授权登录和装修下单页面和搭建下单接口以及发起下单请求1
|
6月前
|
移动开发
微信h5扫码接口范例:扫码后内容显示到输入框
微信h5扫码接口范例:扫码后内容显示到输入框
85 0
|
6月前
|
移动开发
微信h5扫码接口范例:使用localStorage防止扫码后表单其他内容丢失
微信h5扫码接口范例:使用localStorage防止扫码后表单其他内容丢失
55 0
|
6月前
|
移动开发
微信h5扫码接口范例:多个扫码框支持的办法,通过引入一个参数来区分及使用localStorage保证之前扫到的数据不丢失
微信h5扫码接口范例:多个扫码框支持的办法,通过引入一个参数来区分及使用localStorage保证之前扫到的数据不丢失
48 0
|
7月前
|
测试技术 API 数据库
从零玩转系列之微信支付实战PC端支付微信退款接口搭建3
从零玩转系列之微信支付实战PC端支付微信退款接口搭建
52 0
|
7月前
|
JSON API 数据库
从零玩转系列之微信支付实战PC端支付微信退款接口搭建2
从零玩转系列之微信支付实战PC端支付微信退款接口搭建
55 0
|
7月前
|
小程序 安全 前端开发
从零玩转系列之微信支付实战PC端支付微信退款接口搭建1
从零玩转系列之微信支付实战PC端支付微信退款接口搭建
61 0

相关产品

  • 云迁移中心