微信小程序实现图片选择并预览功能

下面是实现微信小程序图片选择并预览的攻略：

1. 准备工作

首先，需要在小程序的app.json文件中进行设置，具体如下：

{
  "pages": [
    "pages/index/index"  // 设置小程序的首页
  ],
  "window": {
    "backgroundColor": "#F7F7F7",
    "navigationBarBackgroundColor": "#FFFFFF",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "图片选择",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "image/home.png",
      "selectedIconPath": "image/home_active.png"
    }
  }
}

接着，在小程序首页中设置一个按钮，并绑定选择图片的事件函数，具体如下：

<view class="container">

  <button class="btn" bindtap="chooseImage">点击选择图片</button>

  <image wx:if="{{imageList.length > 0}}" wx:for="{{imageList}}" wx:key="{{index}}" class="image" width="200" height="200" mode="aspectFit" src="{{item}}" bindtap="previewImage"></image>

</view>

2. 图片选择功能

在小程序首页的js文件中，定义一个选择图片的事件函数chooseImage，具体如下：

chooseImage: function () {
  var that = this
  wx.chooseImage({
    count: 9,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
      var tempFilePaths = res.tempFilePaths
      that.setData({
        imageList: tempFilePaths
      })
    }
  })
}

在上面的代码中，我们使用了微信小程序提供的chooseImage函数，该函数可以让用户选择图片，并返回选择后的临时文件路径。然后，将这些文件路径存储到imageList数组中，最终显示在小程序首页中。

3. 图片预览功能

在小程序首页的js文件中，定义一个预览图片的事件函数previewImage，具体如下：

previewImage: function (e) {
  var current = e.target.dataset.src
  wx.previewImage({
    current: current,
    urls: this.data.imageList
  })
}

在上面的代码中，我们使用了微信小程序提供的previewImage函数，该函数可以让用户预览图片。需要注意的是，我们需要传入current和urls两个参数，其中current表示当前预览的图片地址，urls表示要预览的图片地址列表。

4. 示例说明

示例1：展示选择的单个图片

用户可以通过选择单个图片，将选择的图片在小程序首页展示出来。具体代码如下：

<button class="btn" bindtap="chooseImage">选择图片</button>

<image wx:if="{{imagePath}}" class="image" mode="aspectFit" src="{{imagePath}}"></image>

chooseImage: function () {
  var that = this
  wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
      var tempFilePaths = res.tempFilePaths
      that.setData({
        imagePath: tempFilePaths[0]
      })
    }
  })
}

示例2：展示选择的多个图片，并可以进行预览

用户可以通过选择多个图片，将选择的图片在小程序首页展示出来，并可以进行预览。具体代码如下：

<button class="btn" bindtap="chooseImage">选择图片</button>

<image wx:if="{{imageList.length > 0}}" wx:for="{{imageList}}" wx:key="{{index}}" class="image" width="200" height="200" mode="aspectFit" src="{{item}}" bindtap="previewImage"></image>

chooseImage: function () {
  var that = this
  wx.chooseImage({
    count: 9,
    sizeType: ['original', 'compressed'],
    sourceType: ['album', 'camera'],
    success: function (res) {
      var tempFilePaths = res.tempFilePaths
      that.setData({
        imageList: tempFilePaths
      })
    }
  })
},

previewImage: function (e) {
  var current = e.target.dataset.src
  wx.previewImage({
    current: current,
    urls: this.data.imageList
  })
}

以上就是实现微信小程序图片选择并预览的攻略。通过上述代码示例可以看出，实现图片选择和预览并不难，只需调用微信小程序提供的相关函数即可。