微信小程序之组件（入门）

自定义组件

1、json文件，自定义组件声明

{
  "component": true
}

2、js文件

Component({
  properties: {//自定义属性
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },
  
  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() { },
  
  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {//自定义方法，都写在这边
    // 这里是一个自定义方法
    customMethod: function(){
    	var myEventDetail = {} // detail对象，提供给事件监听函数
        var myEventOption = {} // 触发事件的选项
        this.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

3、wxml 文件

<button bindtap="customMethod">点击这个按钮将触发“myevent”事件</button>

4、使用自定义组件

（1）json 文件中进行引用声明

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

（2）wxml自定义组件引用

<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text" bind:myevent="onMyEvent"></component-tag-name>
</view>

(3) js 页面引用

Page({
  onMyEvent: function(e){
    e.detail // 自定义组件触发事件时提供的detail对象
  }
})