微信小程序点击图片放大预览，新页面中全屏预览图片

原创已于 2023-03-04 15:11:42 修改 · 6.4k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript #前端

于 2023-03-04 14:57:18 首次发布

HTML学习专栏收录该内容

6 篇文章

订阅专栏

文章详细介绍了如何在微信小程序中预览图片的步骤，包括在WXML中定义image组件并设置点击事件，然后在JS中设置图片URL数组，以及编写imgClick函数调用wx.previewImage接口进行图片预览。关键点在于图片URL必须以数组形式提供，即使只有一张图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步：在wxml中定义image组件，并设置绑定事件。

<image src="{{priceUrl}}" bindtap="imgClick"></image>

第二步：在js中设置需要预览图片的URL数组，切记一定要是数组，即使一张图也要是数组，不能直接字符串赋值。

2.1 data数据设置

data: {
    priceUrl:["cloud://7gerby6t527c7bca.6368-charming815-7gerby6t527c7bca-1316371082/dywfly/price.png"],
  },//需要换成自己的图片链接

2.2 绑定事件函数编制

imgClick:function(){
  var imgUrl = this.data.priceUrl;
  console.log('imgClick success',imgUrl)
  wx.previewImage({
    urls: imgUrl,//imgUrl 必须是需要预览的图片链接列表，只有一张图片也需要是列表
    success:(res=>{
      console.log('接口调用成功',res)
    })
  })
},