uniapp預覽圖片詳解

一、預覽圖片的基本用法

在uniapp中，我們可以使用`uni.previewImage()`API對圖片進行預覽，具體使用方法如下：

uni.previewImage({
  urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'],
  current: 0
});

其中，`urls`參數為一個字符串數組，表示需要預覽的圖片數組；`current`參數為一個數字，表示當前選中的圖片在數組中的索引值，從0開始計數。

在調用`uni.previewImage()`方法後，uniapp會顯示系統自帶的圖片預覽界面，用戶可以滑動查看多張圖片，也可以縮放圖片進行查看。

二、自定義預覽組件

如果預覽圖片需要一些自定義的功能，例如添加分享按鈕或者保存圖片按鈕，我們可以使用`uni.previewImage()`方法的`customButtons`參數來自定義按鈕。具體代碼如下：

uni.previewImage({
  urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'],
  current: 0,
  customButtons: [{
    icon: 'https://example.com/share.png',
    text: '分享',
    onTap: function() {
      // 分享圖片
    }
  }, {
    icon: 'https://example.com/save.png',
    text: '保存到相冊',
    onTap: function() {
      // 保存圖片到相冊
    }
  }]
});

其中，`customButtons`參數為一個對象數組，表示自定義按鈕的配置，每個對象包含3個屬性：

• `icon`：按鈕的圖標，可以是本地圖片路徑或者網絡圖片路徑。
• `text`：按鈕的文本。
• `onTap`：按鈕的點擊事件回調函數。

三、查看原圖

在預覽圖片時，部分用戶可能需要查看原圖，而默認情況下uniapp並不會加載原圖，而是按照屏幕尺寸進行裁剪和縮放。如果需要查看原圖，需要對`uni.previewImage()`方法的`urls`參數進行修改，將縮略圖路徑替換成原圖路徑。具體代碼如下：

uni.previewImage({
  urls: ['https://example.com/image1_original.jpg', 'https://example.com/image2_original.jpg'],
  current: 0
});

通過將`urls`參數中的縮略圖路徑替換成原圖路徑，就可以實現查看原圖的功能。

四、動態預覽圖片

在某些情況下，我們需要動態生成並預覽多張圖片，例如根據用戶輸入的關鍵字搜索相關圖片後，需要展示搜索結果中的圖片。此時，可以使用`wx.previewImage()`方法動態生成預覽組件。具體代碼如下：

// 動態生成預覽組件
let preview = uni.createPreviewImage({
  // 圖片地址數組
  urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg'],
  // 當前顯示圖片的索引值
  current: 0,
  // 預覽組件顯示成功的回調函數
  success () {
    console.log('預覽組件顯示成功');
  },
  // 關閉預覽組件的回調函數
  fail () {
    console.log('預覽組件關閉');
  }
});

// 更新圖片地址數組
preview.update({
  urls: ['https://example.com/image3.jpg', 'https://example.com/image4.jpg']
});

// 更新當前顯示圖片的索引值
preview.update({
  current: 1
});

// 關閉預覽組件
preview.close();

通過調用`uni.createPreviewImage()`方法動態生成預覽組件，可以動態生成多個預覽組件，並對預覽組件進行各種操作，例如更新圖片地址數組、更新當前顯示圖片的索引值、關閉預覽組件等。

五、支持長按保存圖片

在默認情況下，uniapp的圖片預覽組件不支持長按保存圖片功能。如果需要支持長按保存圖片功能，需要藉助插件`uni-saving-image-plugin`來實現。具體使用方法如下：

• 安裝插件：使用HBuilderX，找到項目根目錄，右鍵選擇「插件」→「插件管理器」，搜索插件`uni-saving-image-plugin`並安裝。
• 在`pages.json`文件中添加配置信息：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首頁"
      }
    },
    {
      "path": "pages/preview-image/preview-image",
      "style": {
        "navigationBarTitleText": "預覽圖片"
      },
      "usingComponents": {
        "uni-preview-image": "@dcloudio/uni-ui/lib/uni-preview-image/uni-preview-image"
      }
    }
  ],
  "easycom": {
    "autoscan": true,
    "custom": {
      "uni-preview-image": "@dcloudio/uni-ui/lib/uni-preview-image/uni-preview-image"
    }
  },
  "plugins": {
    "uni-saving-image-plugin": {
      "version": "1.0.0",
      "provider": "uni-silence"
    }
  }
}

在`plugins`節點中添加`uni-saving-image-plugin`插件的配置信息，其中`version`參數表示插件的版本號，`provider`參數表示插件的提供者。

• 在`preview-image.vue`文件中添加代碼：

  



export default {
  data () {
    return {
      currentIndex: 0,
      images: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        'https://example.com/image3.jpg'
      ]
    };
  }
}

在`uni-preview-image`組件中添加`show-save-button`屬性，並將其設置為`true`，表示顯示保存按鈕。當用戶長按圖片時，預覽組件會顯示保存按鈕，用戶點擊保存按鈕即可保存當前圖片到相冊中。