用这种眼光看微信小程序

// wx-picker.js 文件
Page({
  data: {
    array:["中国","美国","巴西","日本"],
    index:0,
    date:"2016-09-01"
  },
  bindPickerChange: function(e) {
    console.log(‘picker发送选择改变，携带值为‘, e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindDateChange:function(e){
    this.setData({
      date:e.detail.value
    })
  },
  bindTimeChange:function(e){
    this.setData({
      time:e.detail.time
    })
  }
})

// wx-picker.wxss
.picker{
    padding: 13px;
    background-color: #FFFFFF;
}

// image.wxml文件
<import src="../common/header.wxml" />
<import src="../common/footer.wxml" />

<view class="container">
  <template is="header" data="{{title: ‘choose/previewImage‘}}"/>

  <view class="page-body">
    <view class="page-body-wrapper">
      <form bindsubmit="openLocation">
        <view class="page-body-form">
          <picker range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}">
            <view class="page-body-form-picker">
              <view class="page-body-form-picker-key">图片来源</view>
              <view class="page-body-form-picker-value">{{sourceType[sourceTypeIndex]}}</view>
            </view>
          </picker>
          <picker range="{{sizeType}}" bindchange="sizeTypeChange" value="{{sizeTypeIndex}}">
            <view class="page-body-form-picker">
              <view class="page-body-form-picker-key">图片质量</view>
              <view class="page-body-form-picker-value">{{sizeType[sizeTypeIndex]}}</view>
            </view>
          </picker>
          <picker range="{{count}}" bindchange="countChange" value="{{countIndex}}">
            <view class="page-body-form-picker" style="border-bottom: none;">
              <view class="page-body-form-picker-key">数量限制</view>
              <view class="page-body-form-picker-value">{{count[countIndex]}}</view>
            </view>
          </picker>
        </view>
        <view class="images-wrapper">
          <text class="images-text">请选择图片</text>
          <view class="images-list">
            <block wx:for-items="{{imageList}}" wx:for-item="image">
              <image src="{{image}}" class="images-image" data-src="{{image}}" bindtap="previewImage"></image>
            </block>
            <image src="/image/plus.png" class="images-image images-image-plus" bindtap="chooseImage"></image>
          </view>
        </view>
      </form>
    </view>
  </view>

  <template is="footer" />
</view>

// image.js 文件
var sourceType = [ [‘camera‘], [‘album‘], [‘camera‘, ‘album‘] ]
var sizeType = [ [‘compressed‘], [‘original‘], [‘compressed‘, ‘original‘] ]

Page({
  data: {
    sourceTypeIndex: 0,
    sourceType: [‘拍照‘, ‘相册‘, ‘拍照或相册‘],

    sizeTypeIndex: 0,
    sizeType: [‘压缩‘, ‘原图‘, ‘压缩或原图‘],

    countIndex: 0,
    count: [1, 2, 3, 4, 5, 6, 7, 8, 9]
  },
  sourceTypeChange: function (e) {
    this.setData({
      sourceTypeIndex: e.detail.value
    })
  },
  sizeTypeChange: function (e) {
    this.setData({
      sizeTypeIndex: e.detail.value
    })
  },
  countChange: function (e) {
    this.setData({
      countIndex: e.detail.value
    })
  },
  chooseImage: function () {
    var that = this
    wx.chooseImage({
      sourceType: sourceType[this.data.sourceTypeIndex],
      sizeType: sizeType[this.data.sizeTypeIndex],
      count: this.data.count[this.data.countIndex],
      success: function (res) {
        console.log(res)
        that.setData({
          imageList: res.tempFilePaths
        })
      }
    })
  },
  previewImage: function (e) {
    var current = e.target.dataset.src

    wx.previewImage({
      current: current,
      urls: this.data.imageList
    })
  }
})

// image.css 文件
.images-wrapper {
  padding: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
}
.images-wrapper-text {
  font-size: 28rpx;
}
.images-list {
  display: flex;
  margin-top: 20rpx;
  flex-wrap: wrap;
}
.images-image {
  width: 150rpx;
  height: 150rpx;
  margin: 10rpx;
}
.images-image-plus {
  border: 1px solid #999;
}