初学者笔记——微信小程序点击图片放大

微信小程序点击图片放大

wx.previewImage

官方文档的解释

PS：红色框框内要注意，需要预览的图片连接列表只支持网络连接图片，2.2.3版本以上支持云文件ID。

将图片dream.jpg上传到云储存：

得到File ID：
cloud://cloud1-7gpjmj1d017d7aae.636c-cloud1-7gpjmj1d017d7aae-1308864860/example/dream.jpg

直接上代码：

bigimage.wxml：

<image class='img' src='{{imgUrl}}' bindtap='previewImage'mode="widthFix"></image>

img.js：

Page({
  data: {
    imgUrl: 'cloud://cloud1-7gpjmj1d017d7aae.636c-cloud1-7gpjmj1d017d7aae-1308864860/example/dream.jpg',
  },
  
  previewImage: function (e) {
    var imgUrl = this.data.imgUrl;
    wx.previewImage({
      urls: [imgUrl], // 需要预览的图片http链接列表
      current: '', // 当前显示图片的http链接
    })
  },
  
  onLoad: function (options) {
  },

  onReady: function () {
  },

  onShow: function () {
  },

  onHide: function () {
  },

  onUnload: function () {
  },

  onPullDownRefresh: function () {
  },

  onReachBottom: function () {
  },

  onShareAppMessage: function () {
  }
})

bigimage.wxss这里就不上了

上效果图

点击图片预览效果：

总结：

需要预览的图片连接列表只支持网络连接图片，2.2.3版本以上支持云文件 ID。