要实现的效果如下图 红色框部分就是我们的自定义组件
第一步：与pages同级新建一个components文件夹，用于存放所有的自定义组件 方便统一管理
第二步：在这个components上鼠标右键 选择新建compontent选项 然后输入一个自定义的名称后确定 例如我们新建一个group组件 那我们就只需要办理入group 即可 然后我们就可以看到新建了4个文件 group.js group.json group.wxml group.wxss 接下来我们就可以进行写入代码了
**第三步：
在group.wxml 编写我们的html代码
**
<!--components/group/group.wxml--><view class="grouprow"><view class="gline flexbetween"><view class="gtitle">超值拼团</view><view class="flexbetween"><view>更多</view><image src="https://6f6b-ok-cs14j-1302557158.tcb.qcloud.la/%E5%90%91%E5%8F%B3.png?sign=3bf0df3d7e4c5226f688f3e362f68098&t=1620009088"></image></view></view><view class="maxline"><view class="gbox"><view class="gimg"><image src="https://6f6b-ok-cs14j-1302557158.tcb.qcloud.la/084341b48042d951aa841bd1a1efb0d5.png?sign=f76693333ed18c87647185fc6181b8ac&t=1619957805"></image><view class="marktext">2人团</view></view><view class="price">￥120.00</view><view class="oldprice"><del>￥260.00</del></view></view></view></view>
**第四步：
在group.wxss 编写我们的css代码
**
/* 超时拼团 */.grouprow {width: 710rpx;height: 400rpx;margin-left: 20rpx;background: #fff;border-radius: 10rpx;margin-top: 10rpx;}.gline {padding: 20rpx;color: #777;}.gline .gtitle {font-size: 35rpx;font-weight: bold;color: #333;}.gline image {width: 30rpx;height: 30rpx;}.grouprow .maxline {height: 240rpx;padding: 20rpx;display: flex;justify-content: flex-start;align-items: center;text-align: center;}.gbox {margin-right: 20rpx;line-height: 35rpx;}.gbox .gimg {width: 150rpx;height: 150rpx;position: relative;}.maxline .gbox image {width: 100%;height: 100%;}.gbox .price {color: #e53942;font-weight: bold;margin-top:15rpx;}.gbox .oldprice {color: #777;font-size: 22rpx;text-decoration: line-through;}.gbox .marktext {width: 100rpx;height: 30rpx;border-radius: 0 20rpx 20rpx 0;background: #b58025;color: #fff;position: absolute;bottom: 0;left: 0;font-size: 24rpx;}.flexbetween {display: flex;justify-content: space-between;align-items: center;}
**第四步：写到这里子组件的样式已经完成了 接下来就要在父组件页面(index.wxml)展示子组件的页面(group.wxml)了 首先要在index.json里面编写如下代码 **
{"component": true,"usingComponents": {"group": "/components/group/group" // "group"就是组件的名字}}
** 第五步： 最后一步 在index.wxml里面 编写 如下代码**
<group></group>
这样就可以看到效果了
