前言

在日常开发中，有页面之间有很多相似的组件，我们可以对其相似的代码块进行封装，进行复用

一、封装组件的意思

高内聚性，
组建功能必须是完整的，如我要实现下拉菜单功能，那在下拉菜单这个组件中，就把下拉菜单所需要的所有功能全部实现。
低耦合度
代码独立不会和项目中的其他代码发生冲突。在实际工程中，我们经常会涉及到团队协作，
传统按照业务线去编写代码的方式，就很容易相互冲突，所以运用组件化方式就可大大避免这种冲突的存在、
每一个组件都有子集清晰的职责，完整的功能，较低的耦合便于单元测试和重复利用。
标记鲜明，容易维护
组件化后，我们只需要对对应的组件进行维护，不会影响到其它文件。而且文件结构清楚，方便后台人员的使用。
块状化结构，并且方便扩展
提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、 便于协同开发

二、使用步骤

第一步

先在根目录下创建一个component文件夹 在里面创建一个目录wMyTop文件夹，然后右键点击Component创建一个组件输入wMyTop，回车 然后在wMyTop.json中把"component": true,改为true，意思就是开启组件，这个是一个组件。

第二步

<view id="w-my-top"> 
  <view id="t_seckill">
    <view class="l_seckill"></view>
    <view id="c_seckill">
      <!-- <slot name="iconfont"></slot> -->
      <text>111
        <!-- <slot name="title"></slot> -->
      </text>
    </view>
    <view class="l_seckill"></view>
  </view>
</view>
<!-- 这里我留了一个坑，用的是id选择器 -->

然后在需要使用这个组件的页面的.json内注册引入

{
          
   
  "usingComponents": {
          
   
    "w-my-top":"../../components/wMyTop/wMyTop"  //这里用相对路径引入
  },
  "navigationStyle": "custom",
  "navigationBarTextStyle": "white"
}

在home.wxml内作为标签使用

<w-my-top></w-my-top>

结果只出现了111三个字 样式都没有出现 注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。 这就是原因所在，写这篇文章的原因就是因为我用了id选择器，导致我找了好久，最后把id改为class就好了

<view class="w-my-top">
  <view class="t_seckill">
    <view class="l_seckill"></view>
    <view class="c_seckill">
      <!-- <slot name="iconfont"></slot> -->
      <text>111
        <!-- <slot name="title"></slot> -->
      </text>
    </view>
    <view class="l_seckill"></view>
  </view>
</view>

这个组件我用了插槽 小程序插槽和Vue差不多

<w-my-top>
      <view slot="name">12123</view>
    </w-my-top>

好啦 一个简单的组件就此完成啦 快去试试吧 后期会追加组件如何传值