微信小程序wx.previewImage预览图片

（一）官方提供的功能参数

参数

示例代码：

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

（二）实际使用

WXML

<image  wx:for="{{imgList}}" wx:key="imgs" src="{{item}}" data-src="{{item}}" mode='aspectFill' data-list="{{imgList}}" bindtap="imgYu"></image>

JS

data: {
    imgList:[
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588829460370&di=367b258aad7db04afb0528c474846648&imgtype=0&src=http%3A%2F%2Fwww.xiancn.com%2Fzt%2Fimages%2Fattachement%2Fjpeg%2Fsite2%2F20200403%2Fa41f727e9e331ff11fe111.jpeg',
      'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588829417149&di=bc16745bf68f2fe0919e53f4e16418a8&imgtype=0&src=http%3A%2F%2Fa1.att.hudong.com%2F05%2F00%2F01300000194285122188000535877.jpg',
      '/images/pyq_ct.jpg',
      '/images/pyq_sp.jpg',
      '/images/pyq_wz.jpg'
    ]
  },
  imgYu:function(event){
    var src = event.currentTarget.dataset.src;//获取data-src
    var imgList = event.currentTarget.dataset.list;//获取data-list
    console.log(src)
    //图片预览
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: imgList // 需要预览的图片http链接列表
    })
  }

（编辑器内本地设置：勾选“不校验合法域名...”）

实例显示

直接弹出图片预览，并且会显示图片数量，以及可以左右滑动切换预览。
（尝试了一下，好像不能上传视频，具体的效果可以自行尝试）

需要注意的是，按照官方示例, 可能只支持 http 或者 https 协议的网络图片地址，实际测试中本地图片会出现加载中的loading图。