前言
随着微信小程序在手机上的普及，大家对其实用性也越来越追求。其中，图片预览功能的实现，更是备受青睐，它能够更直观的看到图片原本的细节，是非常实用的小功能。本文将针对微信小程序实现图片预览作为主题，分享一些实现方式和技巧，帮助大家更好地开发微信小程序。
实现效果：
wxml文件
<view class="imageBox"><view>点击图片关注微信公众号</view><image src="{{listData.imgUrl}}" bindtap="previewSqs" data-src="{{listData.imgUrl}}"></image></view>
js文件
Page({data: {// 模拟数据listData: {imgUrl: "//04/13/LKr6i9.jpg",}},// 点击事件previewSqs(event) {// 拿到图片的地址urllet currentUrl = event.currentTarget.dataset.src;// 微信预览图片的方法wx.previewImage({current: currentUrl, // 图片的地址urlurls: [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: "//04/13/LKr6i9.jpg"}, {imgUrl: "//04/13/LKIJmj.jpg"}, {imgUrl: "//04/13/LKIqAI.jpg"}],},// 点击事件previewSqs(event) {// 拿到图片的地址urllet currentUrl = event.currentTarget.dataset.src;var imgList = []; //定义一个放图片的数组// 循环模拟数据的数组取其中的图片字段，将其添加到imgList数组中for (let i = 0; i < this.data.listData.length; i++) {imgList.push(this.data.listData[i].imgUrl);}// 调用微信小程序预览图片的方法wx.previewImage({current: currentUrl, // 当前显示图片的http链接urls: imgList // 需要预览的图片http链接列表})},})
效果如下：
有关于微信小程序如何将图片保存到手机相册，大家可移步博主另一篇文章（微信小程序实现将图片保存到手机相册）
