微信小程序（13）：Component 实现公共组件

一、不需要进行组件间属性传递

  我们的小程序一般都有固定头部和固定底部，在每个.wxml文件中都写入头部和底部的代码就会很麻烦，这时候我们就可以用到 Component 自定义组件。

1. 新建 component 文件夹，在该文件夹创建 headerView 文件夹，然后右键点击“ 新建 Component ”

2. 将头部代码剪切到 headerView.wxml 文件中，将对应的 wxss代码剪贴到headerView.wxss 文件中，例如：

headerView.wxml 文件代码：

<view class="header">
    <view class="logo">
      <navigator url="/pages/index/index" open-type="reLaunch">
        <image src="/images/logo.png"></image>
      </navigator>s
    </view>

    <button class="wxchat" open-type="contact">
      <image src="/images/xiaoxi.png"></image>
    </button>
</view>

headerView.wxss 文件代码：

.header{ 
  background: #fff; 
  border-bottom:1px solid #ccc; 
  height: 90rpx; 
  padding:0 30rpx; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  position: relative; 
  z-index: 100
}
.header .logo image{ 
  width:245rpx;
  height: 60rpx; 
  display: block; 
}
.header .wxchat{ 
  display: block; 
  background: none; 
  margin:0; 
  padding:0;
  width:60rpx; 
  height: 60rpx;
}
.header .wxchat::after{
  border:none;
}
.header .wxchat image{ 
  width:60rpx; 
  height: 60rpx; 
  animation: wxChat 1s infinite alternate; 
  display: block;
}
@keyframes wxChat{
  0%,50%,100%{ 
    opacity: 1
  }
  25%{ 
    opacity: 0
  }  
}

3. 然后在你要引入的页面的json文件中引入 headerView ，例如在首页index中 index.json 文件中引入：

{
  "usingComponents": {
    "headerView":"/component/headerView/headerView"
  }
}

4. 最后在页面中引入 headerView 标签即可。

<headerView></headerView>

效果图：

5. 之后每需要该头部都进行上述 3、4操作即可。

二、进行组件间属性传递

  如果页面中有两部分内容的样式相同但是文本或图片不同，如果样式代码各写一份就显得很没必要，这时候也可以用到 Component 自定义组件，只不过此时需要将文本或图片传入。例如公共标题：

1. 同上述 一 中步骤一样，先在 component 文件夹中创建文件夹，然后新建 Component ，将对于代码剪切到对应文件中。

pubTitle.wxml 文件代码：

<view class="pubTitle">
    <view class="txt">{{title}}</view>
    <navigator open-type="reLaunch" class="more" url="{{moreUrl}}">更多 ></navigator>
</view>

pubTitle.wxss文件代码：

.pubTitle{ 
display: flex; 
justify-content: space-between; 
align-items: center; 
padding-bottom:40rpx;
}
.pubTitle .txt{ 
font-size: 32rpx; 
color:#222;
position: relative; 
padding-left: 20rpx;
}
.pubTitle .txt::before{ 
content: ""; 
display: block;
width:6rpx; 
height: 20rpx; 
background: #2ebefd; 
position: absolute; 
top:12rpx; 
left: 0;
}
.pubTitle .more{ 
font-size: 24rpx; 
color:#666;
}

在 pubTitle.js 文件中写入组件的属性，pubTitle.js文件的 properties 部分的代码：

/**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:""
    },    
    moreUrl:String,  
},

2. 在首页的index.json文件中引入 pubTitle ：

3. 最后在页面中引入 pubTitle 标签，并传入相应值。

<pubTitle title="学员作品"  moreUrl="/pages/works/works"></pubTitle>

效果图：

4. 之后需要写相同样式的标题时，重复操作3即可。