wx.previewImage方法用来预览图像,所谓预览,就是让图像全屏显示。该方法的Object类型参数的属性在事件触发上和wx.chooseImage方法相同,只是wx.previewImage方法需要设置一个urls属性,该属性为StringArray类型,表示用于预览的图像文件路径集合,其实就是上一节代码中res.tempFilePaths属性的值。

 

本节会改进上一节的程序,让点击<image>组件后,可以预览图像。首先需要为<image>组件设置一个点击事件函数(previewImage),代码如下:

<image bindtap="previewImage" src="{{imageSrc}}" mode="aspectFit"style="margin-top:10px;width: 300px; height: 300px; background-color: #eeeeee;" />

接下来需要在data中定义一个imageList属性,用来保存选中的图像临时路径,在选中图像后(onClick函数),需要设置imageList属性的值。最后需要实现previewImage函数。完整的代码如下:

var app = getApp()Page({  data: {    imageSrc: '',    imageList: [],  },  //选择图像  onClick: function () {    var that = this;    wx.chooseImage({      count: 2,      sizeType: [ 'original','compressed'],      sourceType: ['album', 'camera'],      success: function (res) {              that.setData(          {            imageSrc: res.tempFilePaths[0],            imageList:res.tempFilePaths          }        )        console.log(res.tempFilePaths.length)      }    })  },  previewImage: function (e) {    var current = e.target.dataset.src     wx.previewImage({         urls: this.data.imageList    })  }})

在真机上运行小程序后,选中一个或多个图像,然后点击<image>组件,就会进入图像预览窗。