小程序自定义组件(1)

小程序开发语言虽然只能运行在微信小程序中， 可是它的设计一样遵循了主流前端框架的主要特征——组件化，在小程序中组件化的实现有两种方式: template 模版 和 Component 组件。 这两种方式分别适用于不一样的场景。

1. template 模版 主要用于展现，模版中不涉及事件处理， 须要处理的事件逻辑放在调用模版的页面中。 一个 template 模版 只包含 wxml wxss 文件。
2. Component 组件 做为一个单独的功能模块，不只能够包含页面展现还能够包含该模块的事件逻辑处理。 像一个页面同样， Component 组件 能够包含 wxml wxss js json 文件。

在上一篇 小程序 template 模版使用方法讲解了 template 模板 的使用方法。 此次看一下自定义的组件的使用方法。

初试自定义组件

快速建立自定义组件

一个自定义组件包含 wxml wxss json js 4个文件， 使用微信开发者工具能够快速建立一个自定义组件的这四个文件。

建立 product 组件

自定义组件的 json 文件

一个组件的肯定首先须要在组件的 json 文件中声明定义 product.json

{
  "component": true,
  "usingComponents": {}
}
复制代码

自定义组件的 wxml 文件

product.wxml

<view>
        <text class="custome">{{msg}}</text>
    </view>
复制代码

自定义组件的 wxss 文件

组件内部的样式默认状况下只对该组件生效。 即组件内部的样式不会影响到外部页面的样式， 一样外部的样式也不会影响到组件的样式。

.custome {
        color: #cccccc;
    }
复制代码

自定义组件的 js 文件

自定义组件的 js 文件不一样于页面的 js 文件。 它是由一个 Component 构造器来定义的; 当使用自定义的组件的时候，会使用 Component 构造器来指定组件的属性，数据，方法等。 product.json

Component({
    properties: {}, 
    data: {/* 定义组件内部使用的数据*/},
    methods: {/*自定义的方法*/}
})
复制代码

当使用开发者工具生成自定义组件模板的时候， 会在该组件的 js 文件中生成 Component 的三个属性。

properties

接收调用页面传递的数据， 使用场景和 vue 框架组件中的 props 类似。 对于须要接收的字段能够限制数据类型和定义默认值

properties: {
    msg: {
        type: String,  
        value: 'some message !'
    }
}
复制代码

使用自定义组件

使用自定义组件， 须要先在调用页面的 json 文件中进行引用声明。

index.json 引用生命

{
    "usingComponents": {
        "product": "../../components/product/index"
    }
}
复制代码

这样在页面中就能够像小程序的基础组件同样使用自定义组件。 index.wxml

<product msg="index usr message"/>
复制代码