自定义组件类似页面，也是由 json wxml wxss js 4个文件组成。

1.  json文件内声明组件：

{    "component" : true  }

 

2. js文件内注册组件：

组件的js文件用于注册组件、属性定义、内部数据及自定义方法等。

Component({  behaviors: [],  properties: {    myProperty: { // 属性名      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个      observer: function(newVal, oldVal, changedPath) {         // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'         // 通常 newVal 就是新设置的数据， oldVal 是旧数据      }    },    myProperty2: String // 简化的定义方式  },  data: {}, // 私有数据，可用于模板渲染  lifetimes: {    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名    attached: function () { },    moved: function () { },    detached: function () { },  },  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名  attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖  ready: function() { },  pageLifetimes: {    // 组件所在页面的生命周期函数    show: function () { },    hide: function () { },    resize: function () { },  },  methods: {    onMyButtonTap: function(){      this.setData({        // 更新属性和数据的方法与更新页面数据的方法类似      })    },    // 内部方法建议以下划线开头    _myPrivateMethod: function(){      // 这里将 data.A[0].B 设为 'myPrivateData'      this.setData({        'A[0].B': 'myPrivateData'      })    },    _propertyChange: function(newVal, oldVal) {    }  }})

 

3. wxml文件内编写组件结构

wxml写法与页面写法类似。

 

4. wxss文件内加入组件样式

wxss写法与页面wxss写法类似。

组件的wxss中不应使用ID选择器、属性选择器和标签名选择器。