【一步步学小程序】3. 使用自定义组件(component)

上一节创建了一个包含多个课程数据的列表。这一节我们用自定义组件（component），来优化列表页面，即如图，我们把每个课程单元格封装为组件。

使用组件的好处：

• 自定义组件可以在不同的页面中重复使用
• 将复杂的页面拆分成多个低耦合的模块，有助于代码维护

一、创建组件

1、首先我们在项目根目录中创建component目录，用以存放项目开发过程中创建的所有自定义组件。
2、接着创建课程组件course，只需要在component目录中创建course目录，并像页面一样，分别创建以下四个文件：

• course.js
• course.json
• course.wxml
• course.wxss

3.此时项目会报错，因为course.json的内容为空，导致json解析失败。我们打开course.json，添加以下代码：

{
  "component": true
}

以上代码标识了course为组件（component）

4.现在我们打开course.wxml文件，进行布局（布局代码与上一节的课程单元格一致）

<view class="course_main_view">
  <view class="course_main_item_view">
    <image class="course_cover_image" src="/images/course.png"></image>
    <text class="title">如何成为压力管理的高手</text>
    <text class="course_teacher">指导老师：克里斯朵夫 英国牛津大学客座教授</text>
    <view class="course_address_view">
      <image class="course_address_image" src="/images/home/location.png"></image>
      <view class="course_address">广州｜2020.05.05-05.15</view>
    </view>
  </view>
</view>

5.打开course.wxss，将上一节的约束代码复制进去

.course_main_view{
  width: 500rpx;
  height: 366rpx;
  margin-left: 14rpx;
  margin-right: 14rpx;
  margin-top: 30rpx;
  align-content: center;
  justify-content: center;
  display: inline-block;
  border-radius: 16rpx;
  background-color: #F9FAFB;
}

.course_main_item_view{
  display: flex;
  flex-direction: column;
}

.course_cover_image{
  width: 500rpx;
  height: 230rpx;
  background-color: #cccccc;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
}

.title{
  margin-left: 16rpx;
  margin-top: 10rpx;
  line-height: 40rpx;
  text-align: left;
  font-size: 28rpx;
  color: #333333;
}

.course_teacher{
  margin-left: 16rpx;
  line-height: 40rpx;
  width: 500rpx;
  text-align: left;
  font-size: 20rpx;
  color: #666666;
}

.course_address_view{
  margin-left: 16rpx;
  height: 40rpx;
  width: 500rpx;
  display: flex;
  flex-direction: row;
  justify-content: start;
}

.course_address_image{
  margin-top: 10rpx;
  width: 20rpx;
  height: 20rpx;
}

.course_address{
  margin-left: 10rpx;
  line-height: 40rpx;
  text-align: left;
  font-size: 20rpx;
  color: #999999;
}

5.至此，我们已经把组件的界面做完了，现在可以直接将课程当作组件在其它页面中使用。我们打开上一节创建的homeMain.json，改为：

{
  "usingComponents": {
    "course": "/component/course/course"
  }
}

即在homeMain中声明了自定义组件的名称，以及对应的路径。

6.此时，我们可以在wxml中使用course组件了，将homeMain.wxml的代码改为：

<view class="container">
<course wx:for="{{7}}" isBig></course>
</view>

即可实现和上一节中的效果，课程列表显示了7个课程。

2、给组件赋值动态数据

1.一般从服务器拿到的都是json数据，我们假设从服务器拿到了课程的json数据如下：

[{
	"title": "如何成为压力管理的高手",
	"teacher": "克里斯朵夫 英国牛津大学客座教授",
	"date": "2020.05.05-05.15",
	"city": "广州"
},
{
	"title": "训练注意力升级大脑CEO",
	"teacher": "时华 SIY正念情商领导力认证导师",
	"date": "2020.05.05-05.15",
	"city": "广州"
}]

2.我们给course控件添加属性data属性，即打开course.js，将代码改为如下：

var app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    data: {
      type: Object,
      value: {}
    }
  }
})

3.将course.wxml中原来静态的数据改为动态：

<view class="course_main_view">
  <view class="course_main_item_view">
    <image class="course_cover_image" src="/images/course.png"></image>
    <text class="title">{{data['title']}}</text>
    <text class="course_teacher">指导老师：{{data['teacher']}}</text>
    <view class="course_address_view">
      <image class="course_address_image" src="/images/home/location.png"></image>
      <view class="course_address">{{data['city']}}|{{data['date']}}</view>
    </view>
  </view>
</view>

4.在homeMain.js中，声明json数据：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    course: [{ "title": "如何成为压力管理的高手", "teacher": "克里斯朵夫 英国牛津大学客座教授", "date": "2020.05.05-05.15", "city": "广州" },{ "title": "训练注意力升级大脑CEO", "teacher": "时华 SIY正念情商领导力认证导师", "date": "2020.05.05-05.15", "city": "广州" }]
  },

})

5.在homeMain.wxml中的course组件中以属性的方式传入数据即可：

<view class="container">
<course wx:for="{{course}}" data="{{item}}" isBig></course>
</view>

运行效果如图：