微信小程式簡單封裝圖片上傳元件

實習小生發表於2020-11-05
微信小程式封裝元件

微信小程式簡單封裝圖片上傳元件

希望自己 “day day up” -----小陶

我從哪裡來

在寫小程式的時候需要上傳圖片，個人覺得官方提供的 Uploader 元件不是太好用，於是乎，看了官方文件，自己封裝一個元件。

我是誰

直接上主題
在根目錄下建立components資料夾
在components下開始建立自己的元件
效果圖如下：


由於我使用的是flex佈局，所以

我從哪裡來

# wxml

<view class="images-box">
  <view class="imageCount">
    <text>上傳圖片：</text>
    <text style="color:#909399">{{addedCount}}/{{count}}</text>
  </view>
  <view class="images">
    <block wx:for="{{images}}" wx:key="index">
      <image class="image" mode="aspectFill" src="{{item}}" bindtap="previewImage" data-index="{{index}}" bindlongpress="deleteImage"></image>
    </block>
    <view wx:if="{{addedCount<3}}" class="image addImageIcon" hover-class="addImageIconHover" hover-stay-time="200" bindtap="chooseImage">
      <mp-icon type="field" icon="add" color="gray" size="{{40}}"></mp-icon>
    </view>
  </view>
</view>

# js

Component({
  // 元件對外屬性
  properties: {
    // 圖片總數量
    count: {
      type: Number,
      value: 3,
      observers: function (newVal, oldVal) {}
    },
    // 圖片臨時訪問路徑集合
    images: {
      type: Array,
      value: []
    },
    // 已經新增的圖片數量
    addedCount: {
      type: Number,
      value: 0,
      observers: function (newVal, oldVal) {
        console.log('--new--'.newVal, '--old--', oldVal)
      }
    },
    // 當前圖片的位置下標
    currentIndex: {
      type: Number,
      value: 0,
    }
  },
  // 元件內部屬性
  data: {
  },
  // 方法
  methods: {
    // 選擇圖片
    chooseImage() {
      this.triggerEvent('chooseImage')
    },
    // 預覽圖片
    previewImage(e) {
      wx.previewImage({
        urls: this.data.images,
        current: this.data.images[e.currentTarget.dataset.index]
      })
    },
    // 刪除圖片
    deleteImage(e){
      this.triggerEvent('deleteImage',e.currentTarget.dataset.index)
    }
  }
})

# wxss

.images-box {
  border-radius: 10rpx;
  width: 100%;
}

.imageCount {
  height: 80rpx;
  line-height: 80rpx;
}

.images {
  height: 240rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.addImageIcon{
  text-align: center;
  line-height: 200rpx;
  background-color: #f7f7f7;
}
.addImageIconHover{
  background-color: #C0C4CC;
}
.image {
  width: 30%;
  border-radius: 10rpx;
  height: 200rpx;
}

# json

{
  "component": true,
  "usingComponents":{
    "mp-icon": "/miniprogram_npm/weui-miniprogram/icon/icon"
  }
}

呼叫

# 父元件的 json

{
  "usingComponents": {
    "addImage": "../../components/addImage/addImage"
  }
}

# 父元件的 wxml

<view style="width: 90%; margin-left:5%;">
  <addImage count="{{count}}" images="{{images}}" addedCount="{{addedCount}}" bind:chooseImage="chooseImage" bind:deleteImage="deleteImage"></addImage>
</view>

# 父元件的 js

// pages/test/test.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    images: [],
    count: 3,
    addedCount: 0
  },
  chooseImage() {
    var that = this;
    wx.chooseImage({
      count: 3 - that.data.addedCount,
      sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機，預設二者都有
      success: function (res) {
        // 返回選定照片的本地檔案路徑列表，tempFilePath可以作為img標籤的src屬性顯示圖片
        that.setData({
          images: that.data.images.concat(res.tempFilePaths),
          addedCount: that.data.addedCount + res.tempFilePaths.length,
        });
      }
    })
  },
  // 刪除圖片
  deleteImage(e){
    this.data.images.splice(e.detail,1)
    this.setData({
      images: this.data.images,
      addedCount: this.data.addedCount - 1
    })
  }
})

我要到哪裡去

此程式碼只是一個很小的功能，程式碼這東西千變萬化，在不同的人手中就會綻放不同程度的光彩，我希望，有一天，我的光彩會越來越亮。

相關文章