小程序必备技巧(3)—封装公用组件

往往，我们在开发过程中会遇到一些结构在多个页面都会使用到的情况，此时可以考虑将这些结构封装为公用组件以便在不同页面进行引用。

1、创建components文件夹与对应组件

• 新建components文件夹
• 新建组件目录
• 在组件目录上右击->选择component，输入文件名如index（不需要输入后缀），按下回车便可快速生成.js、.json、.wxml、.wxss相关文件

2、在相关文件中编写代码

比如，有一个视频列表页面，其中的视频项会在多个页面中使用，那么可以考虑将视频项的逻辑编写抽取到公共组件中：

2-1、将相关item代码提取出去

此时，在video-item-v1中的index.wxml中

<wxs src="../../utils/format.wxs" module="format"></wxs>
<view class="item">
  <view class="album">
    <image class="image" src="{{item.cover}}" mode="widthFix"></image>
    <view class="info">
      <view class="count">{{format.formatCount(item.playCount)}}</view>
      <view class="duration">{{format.formatDuration(item.mv.videos[0].duration)}}</view>
    </view>
  </view>
  <view class="content">
    {{item.name}} - {{item.artistName}}
  </view>
</view>

• 其中所需要的item来源于父组件

2-2、定义组件需要的属性

可以看出，每个子组件需要通过父组件遍历出来的item，那么在子组件中的js中，需要在其properties中定义所需要接收的属性及其类型：

  properties: {
    item: {
      type: Object,
      value: {}
    }
  }

2-3、父组件使用封装好的子组件

2-3-1、在父组件json文件中配置需要使用的子组件

• 通过"usingComponents"配置所需使用的子组件
• key表示子组件的名称
• value表示子组件所在位置

2-3-2、在父组件中引用子组件并传递子组件所需要的内容

<view class="video">
  <view class="item" wx:for="{{topMVs}}" wx:key="id">
    <video-item item="{{item}}"></video-item>
  </view>
</view>

至此，子组件的抽取就完成啦~