微信小程序自定义组件开发图文详解

要实现的效果如下图 红色框部分就是我们的自定义组件

第一步：与pages同级新建一个components文件夹，用于存放所有的自定义组件 方便统一管理

第二步：在这个components上鼠标右键 选择新建compontent选项 然后输入一个自定义的名称后确定 例如我们新建一个group组件 那我们就只需要办理入group 即可 然后我们就可以看到新建了4个文件 group.js group.json group.wxml group.wxss 接下来我们就可以进行写入代码了

**第三步：
在group.wxml 编写我们的html代码
**

  
    超值拼团
    
      更多
      
    
  
  
    
      
          
           2人团
      
      ￥120.00
      
        ￥260.00
      
    
  

**第四步：
在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里面 编写 如下代码**

这样就可以看到效果了