小程序 - 自定义组件实现

1. 参考官方文档
2. 实现向子组件传数据

---

一、效果图

20200922162923.png

二、创建组件

根目录下创建名为components的文件夹，在此文件夹上右击选择新建Component，输入component的名字BriefCard.

20200922162147.png

三、组件代码

briefCard.wxml

    <view class="projects-container" wx:for="{{projects}}" wx:key="unique">
        <view class="projects-name">
            <image class="prj-image" src="../../image/slash.png" mode="widthFix" />
            <text class="prj-text"> {{item.name}} </text>
            <image class="prj-image" src="../../image/slash.png" mode="widthFix" />
        </view>
        <view class="project-block" wx:for="{{item.project}}" wx:key="index" wx:for-item="pr">
            <view class="project-text">
                <view class="project-text-title">{{pr.title}}</view>
                <view class="project-text-detail">{{pr.detail}}</view>
            </view>
            <image src="{{pr.imgUrl}}" class="project-image" mode="widthFix" />
        </view>
    </view>
    <slot></slot>

briefCard.wxss

.projects-container {
  background-color: #f6f5f5;
  margin: 10rpx 0;
  min-height: 500rpx;
  overflow:hidden;
  font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif;
}

.projects-container .projects-name {
  width: 320rpx;
  height: 50rpx;
  background-color: #ee6f57;
  border-radius: 999rem;
  margin: 20rpx auto;
  padding: 5rpx 5rpx;
  color: #00334e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.projects-container .projects-name .prj-image{
  height: 30rpx;
  width: 30rpx;
}
.projects-container .projects-name .prj-text{
  font-weight: 400;
}
.project-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 300rpx;
  margin: 0 30rpx;
  border-bottom: #fff dashed 5rpx;
}
.project-block .project-image{
  width:300rpx;
}
.project-text .project-text-title{
  color: #ee6f57;
  font-weight: 400;
}
.project-text .project-text-detail{
  color: #145374;
  font-size: small;
  font-weight: 300;
}

briefCard.js

//调用 Component 构造器
Component({
  properties: {
    projects: {
      type: Array,
      value: [{
        name:{
          type: String,
          value:''
        },
        project:{
          type: Array,
          value: [{
            title: {
              type: String,
              value:""
            },
            detail: {
              type: String,
              value:""
            },
            imgUrl:{
              type: String,
              value:""
            }
          }]
        }
      }],
    }
  },
  data: {

    someData: {}
  },
  methods: {
    customMethod: function(){}
  }
})

briefCard.json

{
  "component": true,
  "usingComponents": {
    
  }
}

三、组件调用

home.wxml

<view class="page">
    <briefCard projects="{{projects}}"></briefCard>
</view>

home.wxss

/*引入weui样式*/
@import "../../lib/weui.wxss";

home.js

Component({
  pageLifetimes: {
  },
  onShareAppMessage() {
    return {
      title: 'demo',
      path: 'pages/home/home'
    }
  },

  data: {
//按照组件构造器里定义的属性来创建数据
    projects: [
      {
        name: "新媒体运营",
        project: [
          {
            title: "公众号",
            detail: "运营项目详情",
            imgUrl:"../../image/item-1.png"
          },{
            title: "平面设计",
            detail: "运营项目详情",
            imgUrl:"../../image/item-2.png"
          },{
            title: "活动策划",
            detail: "运营项目详情",
            imgUrl:"../../image/item-3.png"
          }
        ]
      },{
        name: "网站/程序开发",
        project: [
          {
            title: "公众号",
            detail: "运营项目详情",
            imgUrl:"../../image/item-1.png"
          },{
            title: "平面设计",
            detail: "运营项目详情",
            imgUrl:"../../image/swiper-item-2.png"
          },{
            title: "活动策划",
            detail: "运营项目详情",
            imgUrl:"../../image/item-3.png"
          }
        ]
      },{
        name: "演示文稿设计",
        project: [
          {
            title: "公众号",
            detail: "运营项目详情",
            imgUrl:"../../image/item-1.png"
          },{
            title: "平面设计",
            detail: "运营项目详情",
            imgUrl:"../../image/item-2.png"
          },{
            title: "活动策划",
            detail: "运营项目详情",
            imgUrl:"../../image/item-3.png"
          }
        ]
      }
    ]  
  },
  onLoad: function() {},
    methods: {
      
    }
})

home.json

{
  "usingComponents": {
    "briefCard": "../../components/BriefCard/briefCard"
  },
  "navigationBarTitleText": "Home"
}