微信小程序自定义组件——添加图片组件

文章目录

• 1、预期功能
• 2、组件的设计方案
• 3、如今上代码（根据引用关系进行展现）
• 3.1 image-view组件
• 3.2 row-view组件
• 3.3 add-img组件

先上图

1、预期功能

1. 实现图片的添加
2. 实现图片的删除
3. 实现图片的预览

2、组件的设计方案

2.1 添加图片方案有几种添加方式

• 添加的同时上传，这样最后提交表单的时候便捷，可是会浪费一些多余的流量和服务器资源
• 添加只保存本地url，最后提交表单的时候上传，这样最后提交的时候，会有用户的等待时间
• 本组件采用的第二种方式
• 第一种，之后再兼容，你们根据本身的须要，能够在个人基础上稍微修改便可

2.2 组件的设计方案

1.add-image 组件 （这个最终咱们须要使用的组件）
	2.row-view 行容器（这个是便于之后开发，本身封装的行布局的组件，
		如今比较简单，等同于行布局的view，用来呈放上图的多个图片布局）
	3.image-view（这个是重点组件，基本这个组件的核心就在这里，下面也会重点进行说明）

3、如今上代码（根据引用关系进行展现）

3.1 image-view组件

先看代码布局

<view class='content' style='width:{{750/size}}rpx;height:{{750/size}}rpx;'>
  <view class='img-view' wx:if="{{!add}}">
    <image src='{{src}}' bindtap='showImg' style='width:{{750/size-16}}rpx;height:{{750/size-16}}rpx;' mode='aspectFill'></image>
    <icon bindtap='deleteImg' class='close' color='red' type='clear' size='18'></icon>
  </view>
  <view bindtap='addImg' wx:if="{{add}}" class='add-img'>
    <view class='line1'></view>
    <view class='line2'></view>
  </view>
</view>

总体的代码逻辑不复杂，它须要根据配置来决定本身是显示图片，仍是添加图片的按钮，其中图片的大小尺寸和图片的上传数量都进行了限制

// components/aydk_image_view/aydk_image_view.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    src:{ // 图片url
      type: String,
      value: ''
    },
    imageList:{ // 全部图片，方便预览
      type: Array,
      value: []
    },
    size:{ // 图片默认占屏幕宽度的比例，默认是屏幕的四分之一（除去padding的宽度1/4）
      type: Number,
      value: 4
    },
    add: { // 是不是添加
      type: Boolean,
      value: false
    },
    add_limit:{ // 上传图片上限，默认1
      type: Number,
      value: 1
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    addImg() {
      let that = this;
      wx.chooseImage({
        count: that.data.add_limit,
        success: function(res) {
          that.triggerEvent('addImg', res.tempFilePaths);// 
        },
      })
    },
    deleteImg(){
      let that = this;
      that.triggerEvent('deleteImg', that.data.src);
    },
    // 图片预览
    showImg(){
      let that =this;
      wx.previewImage({
        urls: that.data.imageList.length > 0 ? that.data.imageList : [that.data.src],
        current: that.data.src
      })
    }
  }
})

3.2 row-view组件

<view class='content' style='background-color:{{bg}};'>
  <slot></slot>
</view>

基本等同于一个行布局的view，以后能够根据本身的须要，来扩展不一样的布局方式

3.3 add-img组件

<row-view>
  <block wx:for="{{imageList}}" wx:key="{{index}}">
    <img-view 
      src="{{item}}"
      imageList="{{imageList}}"
      bind:deleteImg="deleteImg"
      size='{{num}}'>
    </img-view>
  </block>
  <img-view 
    wx:if="{{imageList.length<num}}"
    add="true"
    add_limit="{{num-imageList.length}}"
    bind:addImg="addImg"
    size='{{num}}'>
  </img-view>
</row-view>

看着代码感受都比较清晰，有啥问题能够留言或者加我微信，或者进小程序交流群交流吧

最后奉上demo