微信小程序开发实战（25）：预览图像

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>组件，就会进入图像预览窗。

对本文感兴趣，能够加李宁老师微信公众号（unitymarvel）：

关注  「极客起源」  公众号，得到更多免费技术视频和文章。

本文分享自微信公众号 - 极客起源（geekculture）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。