微信小程序开发实战(25):预览图像 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

微信小程序开发实战(25):预览图像

发表时间:2021-1-6

发布人:葵宇科技

浏览次数:42

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> 组件,就会进入图像预览窗。

相关案例查看更多