微信小程序开发实战（25）：预览图像

我不是女神ヾ 2022-12-01 15:47 372阅读 0赞

wx.previewImage方法用来预览图像，所谓预览，就是让图像全屏显示。该方法的Object类型参数的属性在事件触发上和wx.chooseImage方法相同，只是wx.previewImage方法需要设置一个urls属性，该属性为StringArray类型，表示用于预览的图像文件路径集合，其实就是上一节代码中res.tempFilePaths属性的值。

本节会改进上一节的程序，让点击<image>组件后，可以预览图像。首先需要为<image>组件设置一个点击事件函数（previewImage），代码如下：

接下来需要在data中定义一个imageList属性，用来保存选中的图像临时路径，在选中图像后（onClick函数），需要设置imageList属性的值。最后需要实现previewImage函数。完整的代码如下：

var app = getApp()
    Page({
      data: {
        imageSrc: '',
        imageList: [],
      },
      //选择图像
      onClick: function () {
        var that = this;
        wx.chooseImage({
          count: 2,
          sizeType: [ 'original','compressed'],
          sourceType: ['album', 'camera'],
          success: function (res) {
                  that.setData(
              {
                imageSrc: res.tempFilePaths[0],
                imageList:res.tempFilePaths
              }
            )
            console.log(res.tempFilePaths.length)
          }
        })
      },
      previewImage: function (e) {
        var current = e.target.dataset.src
     
        wx.previewImage({
       
          urls: this.data.imageList
        })
      }
    })

在真机上运行小程序后，选中一个或多个图像，然后点击<image>组件，就会进入图像预览窗。

对本文感兴趣，可以加李宁老师微信公众号（unitymarvel）：

![format_png][]

关注  「极客起源」  公众号，获得更多免费技术视频和文章。

![format_png 1][]

[format_png]: /images/20221123/12c5d893138c46049d91809c9fcd00d8.png
[format_png 1]: /images/20221123/bc6ed1a7be2f466881c9a46e36817dc4.png