微信小程序点击图片放大预览以及进行保存图片、发送给朋友等案例说明

wx.previewImage

在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。

Object object

属性	类型	默认值	必填	说明	最低版本
urls	Array.<string>		是	需要预览的图片链接列表。2.2.3 起支持云文件ID。
showmenu	boolean	true	否	是否显示长按菜单。	2.13.0
current	string	urls 的第一张	否	当前显示图片的链接
referrerPolicy	string	no-referrer	否	origin: 发送完整的referrer; no-referrer: 不发送。格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；	2.13.0
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执

使用示例：

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

案例：

单个图片点击在新的页面中放大预览

<image src="{{imagePath}}" mode="widthFix" show-menu-by-longpress="true" bindtap="look_auto_img" />

Page({
  data: {
    imagePath: "图片路径"
  },

  look_auto_img() {
    let result_img = this.data.imagePath;
    wx.previewImage({
      current: result_img,
      urls: [result_img]
    })
  }
})

如果是遍历出来的多个图片，获取索引，根据索引获取图片

<view wx:if="{{index!==0}}" class="photo_item">
    <image src="{{item.images}}" mode="widthFix" show-menu-by-longpress="true"  bindtap='look_auto_img' data-index="{{index}}"/>
</view>

look_auto_img(e){
    let index = e.currentTarget.dataset.index;
    let result_img = this.data.result1.photo[index].images;
    wx.previewImage({
        current: result_img,
        urls: [result_img]
    })
},

详细信息见官网：wx.previewImage(Object object) | 微信开放文档