微信小程序封装组件

---

前言

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

一、封装组件的意思

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

二、使用步骤

第一步

先在根目录下创建一个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>

/* components/wMyTop/wMyTop.wxss */
/*	我这里使用了sass预处理器   不会用的小伙伴可以看我下一篇文章	*/
.w-my-top{
  background-color: #000000;
  .t_seckill {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;
    background-color: #000;
    /* 左右=====线 */
    .l_seckill {
      width: 30%;
      border-bottom: 1rpx solid rgb(196, 194, 194);
    }
  
    /* ====标题==== */
    .c_seckill {
      font-size: 30rpx;
  
      .iconfont {
        color: #f74946;
        display: inline-block;
        margin-right: 10rpx;
      }
    }
  }
}

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

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

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