前言
在日常开发中，有页面之间有很多相似的组件，我们可以对其相似的代码块进行封装，进行复用
一、封装组件的意思
高内聚性，
组建功能必须是完整的，如我要实现下拉菜单功能，那在下拉菜单这个组件中，就把下拉菜单所需要的所有功能全部实现。
低耦合度
代码独立不会和项目中的其他代码发生冲突。在实际工程中，我们经常会涉及到团队协作，
传统按照业务线去编写代码的方式，就很容易相互冲突，所以运用组件化方式就可大大避免这种冲突的存在、
每一个组件都有子集清晰的职责，完整的功能，较低的耦合便于单元测试和重复利用。
标记鲜明，容易维护
组件化后，我们只需要对对应的组件进行维护，不会影响到其它文件。而且文件结构清楚，方便后台人员的使用。
块状化结构，并且方便扩展
提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、 便于协同开发
二、使用步骤
第一步
先在根目录下创建一个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差不多文章来源：https://www.toymoban.com/news/detail-494431.html
<w-my-top>
<view slot="name">12123</view>
</w-my-top>
好啦 一个简单的组件就此完成啦 快去试试吧 后期会追加组件如何传值文章来源地址https://www.toymoban.com/news/detail-494431.html
到了这里，关于微信小程序封装组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
