如何使用 wx.previewImage 预览图片？

推荐答案

// www.javascriptcn.com code example
wx.previewImage({
  current: 'https://example.com/image1.jpg', // 当前显示图片的链接
  urls: [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg'
  ], // 需要预览的图片链接列表
  success: function(res) {
    console.log('预览成功');
  },
  fail: function(err) {
    console.log('预览失败', err);
  }
});

本题详细解读

wx.previewImage 的作用

wx.previewImage 是微信小程序提供的一个 API，用于预览图片。用户可以通过这个功能查看图片的详细信息，并且可以在多张图片之间进行切换。

参数说明

• current：当前显示图片的链接。这个参数是可选的，如果不传，默认显示 urls 数组中的第一张图片。
• urls：需要预览的图片链接列表。这个参数是必填的，至少要有一张图片的链接。
• success：预览成功的回调函数。当用户成功打开图片预览时，会触发这个回调。
• fail：预览失败的回调函数。当预览图片失败时，会触发这个回调，并返回错误信息。

使用场景

• 在图片列表中，用户点击某一张图片时，可以调用 wx.previewImage 来预览这张图片，并且可以滑动查看其他图片。
• 在商品详情页中，用户可以点击商品图片进行放大预览。

注意事项

• urls 数组中的图片链接必须是完整的 URL，不能是相对路径。
• 如果 current 参数指定的图片不在 urls 数组中，预览时会显示 urls 数组中的第一张图片。
• 预览图片时，用户可以通过手势进行缩放、滑动等操作。

示例代码解析

在示例代码中，current 参数指定了当前显示的图片链接为 https://example.com/image1.jpg，而 urls 数组中包含了三张图片的链接。当用户调用 wx.previewImage 时，会首先显示 image1.jpg，并且可以通过滑动查看 image2.jpg 和 image3.jpg。