小程序组件封装

雨点打透心脏的1/2处 2022-12-10 07:08 214阅读 0赞

本篇主要带大家从0到有，封装一个自己的`w-swiper`组件。  
具体  
详细小程序组件封装，请看[https://www.jianshu.com/p/594f0d37feac?from=groupmessage][https_www.jianshu.com_p_594f0d37feac_from_groupmessage].

### 创建components目录 ###

1.  在根目录下创建一个components目录，用来存放所有组件。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_200_C3_97400]
2.  例如我们创建一个w-swiper组件，在components目录下创建w-swiper目录。  
    自定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_200_C3_97300]

#### w-swiper.wxml ####

### w-swiper.wxss ###

.swiper { 
      height: 360rpx;
    }
    
    .swiper-image { 
      width: 100%;
      /* height: 100%; */
    }

### w-swiper.js ###

// components/w-swiper/w-swiper.js
    Component({ 
      /** * 组件的属性列表 */
      properties: { 
        images:{ 
          type:Array,
          value:[]
        }
      },
    
      /** * 组件的初始数据 */
      data: { 
    
      },
    
      /** * 组件的方法列表 */
      methods: { 
    
      }
    })

### w-swiper.json ###

{ 
      "component": true,
      "usingComponents": { }
    }

### 父组件 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_200_C3_97400 1]

### cate.js ###

// pages/cate/cate.js
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
         topImages: [],
      },
     /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        let that=this;
        
          wx.request({ 
            url: 'http://test.com/api/list', //仅为示例，并非真实的接口地址
            data: { 
    
            },
            method:'get',
            header: { 
              'content-type': 'application/json' // 默认值
            },
            success (res) { 
              console.log(res.data.data.banner.list)
              that.setData({ topImages:res.data.data.banner.list})
            }
          })
          
      },

### cate.json ###

{ 
      "usingComponents": { 
        "w-swiper":"/components/w-swiper/w-swiper"
      },
      "navigationBarTitleText": "轮播"
    }

### cate.wxml ###

<w-swiper images='{ {topImages}}'></w-swiper>

最终效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_360_C3_97700]

[https_www.jianshu.com_p_594f0d37feac_from_groupmessage]: https://www.jianshu.com/p/594f0d37feac?from=groupmessage
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_200_C3_97400]: /images/20221123/04413cb319d94a93affe5c3786d560fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_200_C3_97300]: /images/20221123/447c3e3f86164ca9b3607c32490ff691.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_200_C3_97400 1]: /images/20221123/65a03f65203043e7a34f15fa72ed335c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzYzODk2OA_size_16_color_FFFFFF_t_70_pic_center_360_C3_97700]: /images/20221123/fcdad08c8a334462b52ffcf41dccb031.png