微信小程序实现预览图片功能

微信小程序中的图片预览功能实现详解

本文将为大家详细介绍微信小程序如何实现预览图片功能。通过以下实例代码，你将能够轻松实现这一功能。

让我们来看一下实现后的效果图。在实际应用中，这种效果在商城类小程序中非常常见。

接下来，让我们看一下具体的代码实现。

假设你的图片资源是从后台获取的，因为小程序的大小是有限制的。

HTML部分（wxml）：

{{item.name}}

CSS部分：

.contentWa {

display: flex;

flex-direction: column;

justify-content: flex-start;

margin: 20rpx;

}

.contentWa image {

width: 100%;

margin: 0;

padding: 0;

}

.getWa {

display: flex;

flex-direction: row;

justify-content: space-between;

}

.waName {

width: 100%;

height: 80rpx;

line-height: 80rpx;

font-size: 30rpx;

text-align: center;

background: fff;

display: inline-block;

}

JavaScript部分（js）：

//预览图片函数实现

previewImage: function (e) {

var current = e.target.dataset.src; //当前点击的图片链接

var imgList = []; //用于存放所有图片链接的数组

for (let i = 0; i < this.data.wawa.length; i++) { //遍历获取所有图片链接并放入数组imgList中

imgList.push(this.data.wawa[i].img_url);

}

wx.previewImage({ //调用微信小程序的预览图片接口

current: current, //当前显示图片的链接 展示当前预览的图片链接，如果调用closeAlbum后直接返回上一张图片的链接继续预览（需配置可调用相册模块权限） 第一张显示的图片链接 支持网络图片链接或者本地文件路径等所有类型文件链接类型格式都可以正常预览播放 图片支持最大不超过原图尺寸，最大不超过当前窗口大小。若原图过大将会自动压缩至符合屏幕尺寸大小（如需原大小可使用img标签正常显示） 图片不支持动态格式GIF格式图片播放展示 可以通过当前页面传递参数传递本地文件路径进行预览播放展示等，也可以通过本地文件路径进行本地预览播放展示等，若当前页面未传递参数则默认显示本地相册最后预览的图片。 若有参数传入则以传入参数显示为准。（只接受图片的url链接或临时文件路径）当前预览的图片链接地址数组集合，当点击某张图片时跳转至对应的图片地址链接并显示跳转过去的地址的图片信息，再次点击当前地址显示的图片时会返回到预览图册页面且支持图片数量大于图册个数的情况支持多个地址链接进行跳转展示，通过配置url参数即可进行多个图片的预览跳转。如果不设置则默认不跳转。通过数组配置跳转地址的数组集合，跳转时通过索引进行对应跳转。如果跳转失败则返回默认的图片地址进行展示。如果不设置默认地址则默认返回第一张图片的地址进行展示。如果不设置则返回空页面提示用户没有权限访问相册或者网络错误等问题提示用户操作失败提示用户无法访问相册或网络错误等问题提示用户重新尝试操作。如果出现错误或者网络请求超时等问题将会弹出提示框提示用户操作失败或请求超时等问题提示用户重新尝试操作并展示相应的错误信息提示框供用户处理。当关闭相册时返回到调用相册前的页面状态（不跳转）或调用当前页面默认的图片地址进行展示（设置默认地址）。若未设置默认地址则默认返回空页面提示用户操作失败等问题提示用户重新尝试操作并展示相应的错误信息提示框供用户处理相册模块的相关操作等。同时支持本地文件路径预览播放等场景的使用场景使用场景使用场景等使用场景等使用场景等使用场景等使用场景等使用场景等使用场景等使用场景等使用场景等（仅适用于Android和iOS移动端设备的浏览器端的使用）。请注意配置相应的网络请求权限以及本地存储权限以满足功能的使用需求，否则可能导致功能无法正常使用。若配置错误则可能导致功能无法正常使用甚至报错等问题提示用户重新配置权限后再进行操作即可解决相关的问题提示用户重新配置权限后即可解决相关的问题。，则默认显示第一张图片。 urls：imgList //需要预览的图片数组列表 集合数组列表中的每个元素都是一张图片的链接地址，可以是网络