小程序自定义组件

7月前

从基础库版本 1.6.3 开始,小程序终于把其他框架的 自定义组件 这一块的功能复制过来了,除了把 props 改成了写起来更复杂的 properties,其他方面与 Vue 自定义组件没有区别。

加入了一个全局变量 Component,可以用来构造一个组件:

Component({
  properties: { // 父组件传递参数
  }, 
  data: {}, // 自定义组件内部数据
  methods: { // 自定组件内部方法
  } 
})

另外还需要在 json 文件中声明这是一个组件:

{
  "component": true
}

除了这两处以外,其他地方与 page 中的 wxml 模版和 wxss 样式没有区别。

真正使用自定义组件的过程,是非常麻烦的,你无法通过 require 来引入相应的组件,必须在 pagejson 文件中声明:

{
  "usingComponents": {
    "loading": "../../../../components/loading/index"
  }
}

引入的路径是相对路径,尤其是当页面层级很多的时候,简直就是灾难。

自定义组件的事件需要 triggerEvent 来传递,父级组件需要绑定这个方法:

Component({
  methods: {
    onTap: function(){
      this.triggerEvent('customevent', {})
    }
  }
})
<loading bind:customevent="customFunc"></loading>


Page({
  customFunc: function () {
    // do something
  }
})

还有一些其他的设计,比如组件关系之类的,使用起来也是很复杂。小程序初期故意同当下非常成熟的 mvc 框架保持差异,导致在开发大型项目时异常艰辛,虽然现在还在补足,但是实际开发过程这种有意为难的行为令开发者难受,完全脱离 npm 生态也是当前大环境下一个不切实际的举动。还是推荐使用 wepy,形式上几乎与开发 Vue 没有太大差异。

评论(1)

  • 最近也有在研究这个东西,谢谢分享

    1月前 回复