微信小程序chooseImage和previewImage使用方法

今天尝试了微信小程序的图片功能，选择图片和预览图片，开发工具是最新版哈。
具体如下：
wxml文件：

---

<view class='loadpic' bindtap='chooseImage'>选择图片</view>
<view class='showPic'>
  <view wx:for="{{imagesList}}" wx:for-item="image" wx:key="index" class="previewimg">  
      <image class='image' src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>  
  </view>  
</view>

js文件：

data: {
    imagesList: []
  },
  chooseImage: function () {
    var that = this
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        console.log(res)
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        that.setData({
          imagesList: tempFilePaths
        })
        console.log(tempFilePaths)
      }
    })
  },
  previewImage: function (e) {
    var current = e.target.dataset.src;
    wx.previewImage({
      current: current, // 当前显示图片的http链接  
      urls: this.data.imagesList // 需要预览的图片http链接列表  
    })
  },

wxss文件:

.loadpic{
  margin: 20px auto;
  width: 500rpx;
  height: 80rpx;
  background: #d34c17;
  text-align: center;
  color: white;
  line-height: 80rpx;
}
.previewimg{
  padding: 10rpx;
  float: left;
}
.image{
  display: block;
  width: 200rpx;
  height: 200rpx;
}
.showPic{
  margin: 0 auto;
  width: 90%;
}

无论本地还是真机测试都可以哈！！！开始在网上找资料，找了好多都不成功，最后自己慢慢调试成功了！！！哭一个！！