自定义组件

与 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可以看到详细的例子。

提示

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

虽然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的模板~，高效简洁