WeChat-SmallProgram：如何定义一个组件

创建组件所需的文件：

1、在根目录创建 Componet 文件夹

2、再创建一个select文件夹

3、然后：右键这个文件夹，新建下面的这个 Component。然后输入需要创建的名称，我这里为了方便就取了select的名字。然后就会自动创建4个文件，js、json、wxml、wxss。

开始配置组件：

注意：如果通过第一步创建的可直接跳过第二步。

1）： 通过第一步创建的组件的文件夹中，已经自动配置好了。只需在引入组件的时候，在引入组件的页面的json文件中配置组件的名称和组件的位置。

2）：如果自己手动创建组件的js、json、wxml、wxss这个文件，那么需要在json文件中填入 "component": true 表示自定义组件声明。

js文件中也需要写成这种格式：

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

1）：组件的 innerText 属性是对外属性，我理解的是可以当做 data 数据来使用，它是一个含有三个属性的对象，分别是 type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数。

　　type 是必填的，其它的可选。

　　如果只有 type，可以写成：属性名：type类型。

2）：组件的 data 和普通页面的data一样，是组件的内部数据，和 properties 一同用于组件的模版渲染。

3）：组件的 method 是专门用于 事件响应函数 和 任意的自定义方法。在这里面获取数据有两种方法：

　　一种是获取data里的数据： this.data.属性名；

　　一种是获取 properties 中的属性值： this.properties.属性名

 

You have to work hard to look effortless

You're going to sneak up and surprise everyone