微信小程序開發實戰（25）：預覽圖像

發表時(shí)間：2021-1-6

發布人(rén)：融晨科技

浏覽次數：59

wx.previewImage 方法用來(lái)預覽圖像，所謂預覽，就(jiù)是(shì)讓圖像全屏顯示。該方法的(de) Object 類型參數的(de)屬性在(zài)事件觸發上(shàng)和(hé / huò) wx.chooseImage 方法相同，隻是(shì) wx.previewImage 方法需要(yào / yāo)設置一個(gè) urls 屬性，該屬性爲(wéi / wèi) StringArray 類型，表示用于(yú)預覽的(de)圖像文件路徑集合，其實就(jiù)是(shì)上(shàng)一節代碼中 res.tempFilePaths 屬性的(de)值。

本節會改進上(shàng)一節的(de)程序，讓點擊 <image> 組件後，可以(yǐ)預覽圖像。首先需要(yào / yāo)爲(wéi / wèi) <image> 組件設置一個(gè)點擊事件函數（ previewImage ），代碼如下：

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

接下來(lái)需要(yào / yāo)在(zài) data 中定義一個(gè) imageList 屬性，用來(lái)保存選中的(de)圖像臨時(shí)路徑，在(zài)選中圖像後（ onClick 函數），需要(yào / yāo)設置 imageList 屬性的(de)值。最後需要(yào / yāo)實現 previewImage 函數。完整的(de)代碼如下：

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
    })
  }
})