头部：


底部：

发现页面的头部和底部的组件，在其他页面中都是通用的，如果页面多了需要频繁的复制粘贴源码和样式。

这个时候可以将其封装成自定义组件实现重复套用。

自定义组件

Component(Object object)

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html

新建自定义组件

在根目录新建文件夹components,用来存放各种自定义组件。

接着在components中新建文件夹peiqi,右键peiqi文件夹选择新建Component，名字也叫peiqi。

接着会生成4个文件。

填写组件内容

peiqi.wxml：

<view class="box">
  这是自定义组件
</view>

peiqi.css:

.box{background:pink}

调用组件

打开需要调用自定义组件的页面中的json文件。
在usingComponents中填写标签名和自定义组件的路径。
打开peiqi.json:

{
  "usingComponents": {
    "peiqi":"/components/peiqi/peiqi"
  }
}

可以看到自定义组件被调用，对标签单标签都可以使用。

自定义组件命名风格

骆驼峰命名，并且首字母大写，提醒别人该组件为自定义。

封装头部/底部进自定义组件

自定义的标签名不要和系统已有标签名冲突。

新建新的组件文件夹HdView,然后在内部新建HdView组件。
将头部WXML样式移动到HdView的wxml中:

<view class="header">
  <view class="container hdCon">
    <navigator class="logo" open-type="switchTab" url="/pages/index/index">
      <image class="hdPic" mode="heightFix" src="/images/logo.png"  ></image>
    </navigator>
    <view class="kefu">
      <button class="btn" open-type="contact"></button>
      <image class="pic" mode="heightFix" src="/images/xiaoxi.png"></image>
    </view>
  </view>
</view>

将头部wxss样式移动到HdView的wxss中:

.header {
  width: 750rpx;
  height: 90rpx;
  border: 1px solid red;
  overflow: hidden;
}

.hdCon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 26rpx;
}

.hdCon .logo,
.kefu image {
  height: 50rpx;
}

.hdCon .hdPic {
  height: 100%;
}

.kefu {
  position: relative;
  animation: dh 1s linear infinite;
  /* animation将动画与标签绑定，infinite循环播放,linear匀速*/
}

.kefu .btn {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}

接着在index.json中注册自定义组件:

{
  "usingComponents": {
    "HdView":"/components/HdView/HdView",
    "FtView":"/components/FtView/FtView"
  }
}

之后在index.wxml中添加自定义组件的标签即可。

同理新建FtView组件，将底部封装到自定义组件中。