微信小程序图片预览功能

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/qq_43624878/article/details/102492349

说起小程序的图片预览，不仅心力交瘁…其中不仅有我不认真阅读文档的错误，还有一些未知因素（呵呵）

新版小程序，增加了wx.previewImage，这是个API，很NB。

先看看 小程序官方文档 中是怎么说的：

wx.previewImage({
      current: url,
      urls: Array[]
    })

准确的说：API里有两个值：urls里是个数组——里面放所有的图片http-url；current里面放上面这个urls数组里的其一图片——当前图片！
记住，urls里放了所有的http-url ！
这么问吧，你有见过本地的图片被加上http协议吗？或者本地图片被叫做url？（太过真实…）

我在所做的小程序的一个页面的wxml中写下了如下代码：

<view wx:for="{{imgArr1}}">、
	<!-- 下面为什么可以写item，因为上面的imgArr默认自带了一个“指向每个imgArr中元素的指针”，为item，所以可以把它作为每个src的数据绑定值 -->
      <image class="aa1-2" src="{{item}}" data-index="{{index}}" bindtap="viewMoviePostImg"></image>
</view>

data- ：自定义传值
bindtap ：不可向上传递的点击事件

这就不再多说，需要注意的是这个src：src="{{item}}"，明显的从data中获取“动态值”的用例！ （如果js文件中写了.http，就可以从服务器获取值了）

好，我现在js文件里是这么写的：

data:{
    imgArr1:[
      "http://cjxnsb.cn/mxc/UCgzs/img/mxc4.png",
      "http://cjxnsb.cn/mxc/UCgzs/img/mxc2.png"
    ]
  },
  viewMoviePostImg: function (e) {
    var index = e.currentTarget.dataset.index;
    var imgArr1=this.data.imgArr1;
    wx.previewImage({
      current: imgArr1[index],
      urls: imgArr1
    })
  }

第8行var index = e.currentTarget.dataset.index;可有些说道：获取当前点击事件对应元素（或说：组件）的data中数组元素的index！
停！你怎么知道是数组元素，其实这句话显式的表达的话，在开发者工具下面，有一个APPData的栏，当你点击对应事件时，会发现那里面传进去了一个当前元素（e）的currentTarget，这里面有proty、timestart、dataset等属性，其中，点开dataset时，你会发现里面有好多图片路径，以及对应的下标。对，这就是一个数组！

还有最重要的一点：不能通过e.事件来获取图片< image >组件的src值！ 也就是说，想要这么做，只能通过把src拿到data中的方法。