微信小程序实现图片预览（闭眼cv）

Posted 2022-04-17 水星记_

前言

图片预览多用于较详细的查看一个图片的效果图，它能够更直观的看到图片原本的细节，是非常实用的小功能，那微信小程序中怎么样才能得到图片预览的效果呢，今天带你了解微信小程序的中图片预览。

实现效果：

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
        let 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链接列表
        )
    ,
)

效果如下：

至此，不管是单个大对象中的图片，还是数组中若干个对象中的图片，通过上述的两种方法就都能实现预览的功能啦。