微信小程序 - 自定义components组件详解A篇

官网API：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html

 

自定义组件的原因，可以重复使用，只有数据不同且模板一样，节约开发成本.

 

wxml

<!--logs.wxml-->
 <swiper-banner Height="400rpx" Width="100%" imgList="{{banners}}" url="picUrl"></swiper-banner>

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    banners: [], //轮播数组
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    this.getBanners();
  },
  /**
   * 拉取图片
   */
  //获取轮播图片
  getBanners() {
    var self = this;
    wx.request({
      url: 'https://api.it120.cc/jy02149522/banner/list',
      data: {
        type: 0
      },
      success(res) {
        console.log(res);
        if (res.data.code == 0) {
          self.setData({
            banners: res.data.data
          })
        }
      }
    })
  }
})

json

{
  "usingComponents": {
    "swiper-banner": "../../components/swiper-banner/index"
  }
}

 

 

 

我们再来看看模板的代码

wxml

<view class='swiper'>
  <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000" style="height:{{Height}};width:{{Width}};">
    <block wx:for="{{imgList}}" wx:key="*this">
      <swiper-item>
        <image src="{{item[url]}}" class="slide-image" mode="aspectFill" />
      </swiper-item>
    </block>
  </swiper>

  <button bindtap='m'>触发methods里面的方法</button>
</view>

 

js

Component({
  // 私有数据
  data: {

  },

  // 方法
  methods: {
    m() {
      console.log('触发了!');
    }
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  lifetimes: {
    attached: function() {
      console.log('attached');
    },
    moved: function() {},
    detached: function() {},
  },

  // 组件所在页面的生命周期函数
  pageLifetimes: {
    show: function() {
      console.log('生命show!');
    },
  },

  // 变量替换以及修改
  properties: {
    imgList: {
      type: Array,
      value: [],
      observer: function(newVal, oldVal) {
        this.setData({
          imgList: newVal
        })
      }
    },
    url: {
      type: String,
      value: ''
    },
    Height: String,
    Width:String
  }
})

 

json

{
  "component": true
}

 

wxss

.swiper image{
  width: 100%;
}

 

 

 

总结

1. methods里面写方法

2. data初始化变量

3. 但凡变量都和properties脱不了关系

4. 渲染数据应来源于导入组件的页面

5. 被导入的组件必须在json文件定义

{
  "component": true
}

6. 引入组件的页面必须在json文件导入对应的组件路径以及名称

{
  "usingComponents": {
    "swiper-banner": "../../components/swiper-banner/index"
  }
}