微信小程序開發實戰（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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。