简单实用，微信小程序图片预览功能实现

原创已于 2025-06-09 16:41:44 修改 · 1.6w 阅读

80 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #小程序

于 2022-04-13 16:20:46 首次发布

小程序专栏收录该内容

36 篇文章

订阅专栏

本文介绍了如何在微信小程序中实现图片预览功能，包括单张图片预览和多张图片预览的实现方法。通过绑定事件和使用wx.previewImage方法，详细展示了WXML、JS和WXSS代码示例，帮助开发者更好地理解和应用图片预览功能。

前言

随着微信小程序在手机上的普及，大家对其实用性也越来越追求。其中，图片预览功能的实现，更是备受青睐，它能够更直观的看到图片原本的细节，是非常实用的小功能。本文将针对微信小程序实现图片预览作为主题，分享一些实现方式和技巧，帮助大家更好地开发微信小程序。

实现效果：

在这里插入图片描述

wxml文件

<view class="imageBox">
    <view>点击图片关注微信公众号</view>
    <image src="{{listData.imgUrl}}" bindtap="previewSqs" data-src="{{listData.imgUrl}}"></image>
</view>

js文件

Page({
    data: {
        // 模拟数据
        listData: {
            imgUrl: "https://s1.ax1x.com/2022/04/13/LKr6i9.jpg",
        }
    },
    // 点击事件
    previewSqs(event) {
        // 拿到图片的地址url
        let currentUrl = event.currentTarget.dataset.src;
        // 微信预览图片的方法
        wx.previewImage({
            current: currentUrl, // 图片的地址url
            urls: [this.data.listData.imgUrl] // 预览的地址url
        })
    },
})

wxss文件

page {
    background: #EFF4FF;
}

.imageBox {
    margin: 3%;
    background: white;
    border-radius: 30rpx;
    padding: 30rpx;
    font-size: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.imageBox image {
    width: 100rpx;
    height: 100rpx;
}

这是最简单的一种预览方式，在一个大的集合中取对应的字段配合微信小程序 wx.previewImage 方法即可实现操作，但若是要预览一个数组中的若干个对象的图片该怎么实现呢，且看下面实操。

wxml文件

<!-- 需要循环数组拿取其中图片的字段 -->
<view class="imageBox" wx:for="{{listData}}" wx:key="index">
    <view>图片{{index+1}}</view>
    <image src="{{item.imgUrl}}" bindtap="previewSqs" data-src="{{item.imgUrl}}"></image>
</view>

js文件

Page({
    data: {
        // 模拟数据
        listData: [{
            imgUrl: "https://s1.ax1x.com/2022/04/13/LKr6i9.jpg"
        }, {
            imgUrl: "https://s1.ax1x.com/2022/04/13/LKIJmj.jpg"
        }, {
            imgUrl: "https://s1.ax1x.com/2022/04/13/LKIqAI.jpg"
        }],

    },
    // 点击事件
    previewSqs(event) {
    	// 拿到图片的地址url
    	const { src } = event.currentTarget.dataset;
    	// 从数据数组中提取图片链接
    	const imgList = this.data.listData.map(item => item.imgUrl);
    	// 调用微信小程序预览图片的方法
    	wx.previewImage({
      	current: src, // 当前显示图片的http链接
      	urls: imgList // 需要预览的图片http链接列表
    	});
	}
})