微信小程序通用组件

1. 显示效果
   

2. 抽出
   

3. 定义
   

<view class='main_recommend'>
  <image class='main_recommend_image' src="{{ imageUrl }}"></image>
  <view class='main_recommend_title'>{{ title }}</view>
  <view class='main_recommend_content'>{{ content }}</view>
</view>

.main_recommend {
  height: 180rpx;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.main_recommend_image {
  width: 60rpx;
  height: 60rpx;
}

.main_recommend_title {
  font-size: 30rpx;
  color: #000000;
  margin-top: 5rpx;
}

.main_recommend_content {
  font-size: 20rpx;
  color: #cac9c9;
  margin-top: 5rpx;
}

{
  "component": true
}

Component({ 
  options: { 
    multipleSlots: true // 在组件定义时的选项中启用多slot支持 
  }, 
  /** 
   * 组件的属性列表 
   * 用于组件自定义设置 
  */ 
  properties: {
    // 图片 
    imageUrl: { // 属性名 
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型） 
      value: '' // 属性初始值（可选），如果未指定则会根据类型选择一个 
    }, 
    // 标题
    title: { 
      type: String, 
      value: '' 
    }, 
    // 内容 
    content: { 
      type: String,
       value: '' 
      }, 
  }, 
  /** 
   * 私有数据,组件的初始数据 
   * 可用于模版渲染 
   */ 
  data: { 
    isShow: false
  }, 
  /**
   * 组件的方法列表 
   * 更新属性和数据的方法与更新页面数据的方法类似 
  */ 
  methods: { 
    /** 
    * 公有方法 
    */
    // 一些方法 
    someMethod() { 
      this.setData({ 
        isShow: !this.data.isShow
      }) 
    }, 
    /** 
     * 内部私有方法建议以下划线开头 
     * triggerEvent 用于触发事件 
    */ 
    _cancelEvent() { //触发取消回调 
      
    }, 
  } 
})

4. 使用

<view class="recommend-view">
    <mainRe imageUrl="../../img/home/ic_top_1.png" title="优质任务" content="各种高质量的任务"></mainRe>
    <mainRe imageUrl="../../img/home/ic_top_2.png" title="高薪兼职" content="有着丰厚回报"></mainRe>
    <mainRe imageUrl="../../img/home/ic_top_3.png" title="企业任务" content="合作企业发布的任务"></mainRe>
  </view>