先看下效果圖吧，不得不說 微信小程序的設(shè)計真的很好！用戶體驗也很好~

image.png

image.png

拍照和上傳照片 官網(wǎng)講的很詳細(xì)

image.png

具體用法也很簡單 js 部分代碼

 selectBottom() {
    const selectNum = this.data.selectImageList.length;
    const num = 3 - selectNum;
    num != 0 && wx.chooseImage({
      count: num,
      success: (res) => {
      
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
        let tempFilePaths = res.tempFilePaths;
        let newList = this.data.selectImageList;
        for (let i = 0; i < tempFilePaths.length; i++) {
          newList.push(tempFilePaths[i]);
        }

        newList.length == 3 ? this.setData({
          isShow: false
        }) :null;
        this.setData({
          selectImageList: newList
        }, () => {
          console.log(this.data.selectImageList)
        })
        // console.log("tempFilePaths:"+JSON.stringify(tempFilePaths))
      }
    })
  },

closeOption(e) {
    const {
      index
    } = e.currentTarget.dataset;
    let imagelist = this.data.selectImageList;
    imagelist.splice(index, 1);
    this.setData({
      selectImageList: imagelist,
      isShow:true
    })
    console.log(JSON.stringify(e))

  },

vxml 相關(guān)代碼

 <view class='image-list-view'>
 <view wx:if="{{isShow}}" class='line-x' bindtap='selectBottom' hover-class='white-active'>
  <icon class='icontfont icon-img'></icon>
   <text class="icontfont sml">上傳憑證</text>
 </view>
  <block wx:for="{{selectImageList}}" wx:key="{{index}}" >
    <view class='image-posit'>
    <image src="{{item}}" class='image-list'/>
      <icon class="icontfont i-smal icon-form-close" data-index="{{index}}" bindtap='closeOption'></icon>
    </view>
 </block>
 </view>

預(yù)覽的話也簡單 看下官方介紹

image.png

previewImage(e) {
    const { url, imagelist } = e.currentTarget.dataset;
    wx.previewImage({
      urls: imagelist,  //預(yù)覽的圖片url數(shù)組
      current: url,  //當(dāng)前的url
    })
  },

 <image  wx:for="{{item.imageList}}" wx:for-item="i" src="{{i}}" class="anser-iamge-items"  bindtap='previewImage' data-url="{{i}}" data-imagelist="{{item.imageList}}"/>

image.png

微信小程序很好玩 ，體驗性非常不錯，開發(fā)難度也不大。愛上她了。