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

巴特西

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

最新文章

热门文章