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

蒙娜丽宁

发布于 2020-08-28 10:44:41

5380

发布于 2020-08-28 10:44:41

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

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

<image bindtap="previewImage" src="{{imageSrc}}" mode="aspectFit"
style="margin-top:10px;width: 300px; height: 300px; background-color: #eeeeee;" />

接下来需要在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>组件，就会进入图像预览窗。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-08-27，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序