# 自定义组件

与 wepy 自定义组件思路不同的是，@wxa 推荐使用原生小程序提供的组件化方案。

我们认为采用原生的自定义组件至少有以下几点好处：

官方支持
运行时独立上下文
UI框架支持
可以实现复杂的组件，例如抽象组件等

默认条件下，一个原生的自定义组件可以直接在wxa项目中运行，而无需任何额外的配置，编译。

但是，如果项目中的组件想要使用wxa的插件功能，比方说redux的数据同步，那么这个组件需要按照wxa要求：导出默认的组件实例对象或者类。

# 原生组件

引入一个原生组件和小程序原生开发一模一样，只需要在页面或者组件的配置json中指定usingComponents即可。参考微信自定义组件

在.wxa格式的文件中配置也是一样的：

<template>
    <email></email>
</template>
<script>
export default class Index {}
</script>
<config>
{
    "usingComponents": {
        "email": "path/to/your/component"
    }
}
</config>

1
2
3
4
5
6
7
8
9
10
11
12
13

# 使用wxa编写组件

要使用wxa编写自定义组件跟开发普通的页面没有太大的区别，只需要新建一个.wxa的文件，然后在config中配置component: true即可。

<config>
{
    "component": true
}
</config>

1
2
3
4
5

在逻辑层，我们需要导出一个组件实例对象或者类。

<script>
export default class Center {
    properties = {
        direction: {
            value: 'row',
            type: String,
        },
    }
    ready() {
        this.setData({mainPanel: `flex-direction:${this.data.direction}`});
    }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13

这样，我们就完成了一个简单的自定义组件的编写，后续可以发布到npm上跟更多开发者分享你的代码。在这儿可以看到详细的例子。

提示

可以使用Router，Wxapi等提供的装饰器来增强组件的实例。

虽然wxa提供了mixin功能，但是自定义组件官方支持behaviors（类似mixins的代码复用）逻辑，可以考虑优先使用behaviors实现~

# 使用第三方组件

利用@wxa/cli我们可以超级方便的引用任何第三方的组件！🎊

譬如我们想在项目中使用有赞UI，我们可以先运行npm i vant-weapp安装有赞ui组件。然后在项目json配置文件中直接引用即可：

{
    "usingComponents": {
        "counting": "vant-weapp/dist/checkbox/index"
    }
}

1
2
3
4
5

编译后的结果为：

{
    "usingComponents": {
        "counting": "./../npm/vant-weapp/dist/checkbox/index"
    }
}

1
2
3
4
5

wxa将会自动的编译对应的组件及其依赖。

wxa-templates

创建项目的时候可以直接使用vant的模板~，高效简洁

← Mixin 运行时插件 →