wx.previewimage詳解

一、wx.previewimage 定製

wx.previewimage 是一個小程序組件，用於預覽圖片，用戶可以通過手勢縮放、旋轉、平移等操作查看。在進行頁面設計時，我們通常需要根據不同的需求，對 wx.previewimage 組件進行定製。下面通過代碼示例來進行說明。

// html代碼
<view class="preview" bindtap="previewImage" data-src="https://example.com/example.jpg">
  <image class="preview-img" src="https://example.com/example.jpg">
</view>

// js代碼
Page({
  previewImage: function (event) {
    wx.previewImage({
      current: event.currentTarget.dataset.src,
      urls: [event.currentTarget.dataset.src],
      // 定製options
      longPressActions: { // 長按圖片顯示的操作
        itemList: ['保存圖片'],
        success: function (res) {
          if (res.tapIndex === 0) {
            wx.downloadFile({ // 下載圖片
              url: event.currentTarget.dataset.src,
              success: function (res) {
                wx.saveImageToPhotosAlbum({ // 保存圖片
                  filePath: res.tempFilePath,
                  success: function () {
                    wx.showToast({
                      title: '保存成功'
                    })
                  }
                })
              }
            })
          }
        }
      }
    })
  }
})

在上述代碼中，我們通過使用 bindtap 事件和 data-src 屬性來實現點擊預覽圖片的功能。同時，我們還對 options.appParameter 進行了定製，將長按圖片顯示的操作改為了保存圖片。這樣，用戶可以通過長按圖片來保存到本地相冊中。

二、wx.previewimage不調用

在實際項目中，我們可能會遇到 wx.previewimage 沒有被調用的情況。這個問題的原因可能有多種，例如數據渲染出錯、圖片鏈接錯誤等。在這種情況下，我們需要逐一排查各種可能性，找到問題所在。下面通過代碼示例來進行說明。

// html代碼
<view class="preview" bindtap="previewImage" data-src="{{ item.src }}">
  <image class="preview-img" src="{{ item.thumb }}">
</view>

// js代碼
Page({
  data: {
    list: [
      {thumb: 'https://example.com/thumb1.jpg', src: 'https://example.com/example1.jpg'},
      {thumb: 'https://example.com/thumb2.jpg', src: 'https://example.com/example2.jpg'}
    ]
  },
  previewImage: function (event) {
    wx.previewImage({
      current: event.currentTarget.dataset.src,
      urls: this.data.list.map(item => item.src),
      fail: function (err) {
        console.error(err)
      }
    })
  }
})

在上述代碼中，我們通過使用 data-src 和 data-thumb 屬性來動態綁定圖片的 src 和縮略圖 src。同時，我們通過 fail 回調函數來在預覽圖片失敗時，輸出錯誤信息。這樣，我們就可以找到問題所在並進行修復了。

三、wx.previewimage 遮蓋

在進行圖片預覽時，我們可能需要動態生成多張圖片，並將它們排列在一行或多行中。在這種情況下，我們可能遇到圖片遮蓋的問題。例如，某個圖片的寬度比其他圖片寬，導致下面的圖片被遮蓋了。我們可以通過合理的 CSS 樣式，來解決這個問題。下面通過代碼示例來進行說明。

// css代碼
.preview-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.preview {
  box-sizing: border-box;
  width: 25%;
  padding: 10px;
}
.preview-img {
  width: 100%;
}

// html代碼
<view class="preview-wrapper">
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example1.jpg">
    <image class="preview-img" src="https://example.com/example1.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example2.jpg">
    <image class="preview-img" src="https://example.com/example2.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example3.jpg">
    <image class="preview-img" src="https://example.com/example3.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example4.jpg">
    <image class="preview-img" src="https://example.com/example4.jpg">
  </view>
</view>

// js代碼
Page({
  previewImage: function (event) {
    wx.previewImage({
      current: event.currentTarget.dataset.src,
      urls: [
        'https://example.com/example1.jpg',
        'https://example.com/example2.jpg',
        'https://example.com/example3.jpg',
        'https://example.com/example4.jpg'
      ]
    })
  }
})

在上述代碼中，我們通過使用 flex 和 width 樣式來為每張圖片進行排列，並設置了 padding 樣式。這樣，即使某張圖片的寬度比其他圖片寬，也不會造成其它圖片的遮蓋。同時，我們通過使用 bindtap 事件和 data-src 屬性來實現點擊預覽圖片的功能。

四、wx.previewimage 自定義

在圖片預覽中，我們可能需要對預覽組件進行定製。例如，更改預覽彈窗的背景色、調整預覽操作的位置等。在這種情況下，我們可以使用 WXML 和 WXSS 來進行自定義。下面通過代碼示例來進行說明。

// wxml代碼
<view class="preview-wrapper">
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example1.jpg">
    <image class="preview-img" src="https://example.com/example1.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example2.jpg">
    <image class="preview-img" src="https://example.com/example2.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example3.jpg">
    <image class="preview-img" src="https://example.com/example3.jpg">
  </view>
  <view class="preview" bindtap="previewImage" data-src="https://example.com/example4.jpg">
    <image class="preview-img" src="https://example.com/example4.jpg">
  </view>
</view>

// wxss代碼
.preview-image-view {
  background-color: rgba(0, 0, 0, 0.5); // 更改背景色
}
.preview-image-footer {
  bottom: 150rpx; // 調整操作位置
}

// js代碼
Page({
  previewImage: function (event) {
    wx.previewImage({
      current: event.currentTarget.dataset.src,
      urls: [
        'https://example.com/example1.jpg',
        'https://example.com/example2.jpg',
        'https://example.com/example3.jpg',
        'https://example.com/example4.jpg'
      ],
      // 自定義樣式
      fail: function () {
        wx.showToast({
          title: '預覽圖片失敗',
          icon: 'none'
        })
      },
      success: function () {
        wx.pageScrollTo({ // 跳轉到底部
          scrollTop: 99999,
          duration: 300
        })
      }
    })
  }
})

在上述代碼中，我們通過使用 WXML 和 WXSS 來分別定義預覽組件的結構和樣式。同時，我們通過在 options 中定義 fail 和 success 回調函數，來實現預覽失敗時的提示和預覽成功時的跳轉效果。這樣，我們就可以實現對 wx.previewimage 組件的自定義了。

五、wx.previewimage 一直載入

在進行圖片預覽時，我們可能會遇到圖片一直載入的問題。這個問題可能和圖片鏈接、網路狀態等多種因素有關。在這種情況下，我們需要逐一排查問題。下面通過代碼示例來進行說明。

// html代碼
<view class="preview" bindtap="previewImage" data-src="https://example.com/example.jpg">
  <image class="preview-img" src="https://example.com/example.jpg" mode="aspectFit">
</view>

// js代碼
Page({
  previewImage: function (event) {
    wx.previewImage({
      current: event.currentTarget.dataset.src,
      urls: [event.currentTarget.dataset.src],
      fail: function (err) {
        console.error(err)
      },
      success: function (res) {
        console.log('預覽成功:', res)
      },
      complete: function () {
        console.log('預覽完成')
      }
    })
  }
})

在上述代碼中，我們通過使用 bindtap 事件和 data-src 屬性來實現點擊預覽圖片的功能。同時，我們通過設置 mode 屬性來指定圖片填充方式。在 options 中，我們定義了 fail、success 和 complete 回調函數。這樣，即使圖片一直載入，我們也可以通過輸出信息來進行排查。