自定义组件

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

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

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

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

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

原生组件

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

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

  1. <template>
  2. <email></email>
  3. </template>
  4. <script>
  5. export default class Index {}
  6. </script>
  7. <config>
  8. {
  9. "usingComponents": {
  10. "email": "path/to/your/component"
  11. }
  12. }
  13. </config>

使用wxa编写组件

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

  1. <config>
  2. {
  3. "component": true
  4. }
  5. </config>

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

  1. <script>
  2. export default class Center {
  3. properties = {
  4. direction: {
  5. value: 'row',
  6. type: String,
  7. },
  8. }
  9. ready() {
  10. this.setData({mainPanel: `flex-direction:${this.data.direction}`});
  11. }
  12. }
  13. </script>

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

提示

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

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

使用第三方组件

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

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

  1. {
  2. "usingComponents": {
  3. "counting": "vant-weapp/dist/checkbox/index"
  4. }
  5. }

编译后的结果为:

  1. {
  2. "usingComponents": {
  3. "counting": "./../npm/vant-weapp/dist/checkbox/index"
  4. }
  5. }

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

wxa-templates

创建项目的时候可以直接使用vant自定义组件 - 图3的模板~,高效简洁