收藏
评论

(8)自定义组件官方

小程序的界面是由一系列组件构成的。小程序基础库提供了一组基础组件来满足开发者的基本需求。但随着小程序开发变得越来越复杂,单纯使用基础组件来进行开发也变得越来越不方便。



例如,较为复杂的小程序中常常会有一些通用的交互模块,比如“下拉选择列表”、“搜索框”、“日期选择器”等。这些界面交互模块可能会在多个页面中用到,逻辑也相对独立。然而,用传统的小程序开发方法来实现这样的模块是非常繁琐的。


面对这个情况,小程序基础库提供了让开发者自己创建界面组件的特性,称之为“自定义组件”。通过这个特性,开发者就能够将这样的交互模块抽象成界面组件,使界面代码组织变得非常灵活。


01

开发者可以将一些复用性强的代码抽象成自定义组件,它们的使用方法与基础库内置的 view button等基础组件非常相似。这样的组件化非常有利于代码逻辑的解耦合。


02

自定义组件局部更新时的性能相比页面的局部更新要小很多,在必要时可以利用这个特点进行性能优化。


03

自定义组件是相对独立的功能模块,开发者可以将自己的自定义组件代码开源出来,与其他开发者共享开发成果。


如何编写一个自定义组件?


每个自定义组件由四个代码文件组成:


 json文件    用于于放置一些最基本的组件配置


 wxml 文件    组件模版


 wxss 文件    组件的样式,只在组件内部节点上生效(这个文件是可选的)


js 文件  组件的 JS 代码,承载组件的主要逻辑


这四个文件与编写一个页面时用到的四个文件非常类似,但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。


1.组件配置


编写一个自定义组件,首先应在小程序代码目录中合适的位置创建一个 json 文件。这里我们把文件放置在小程序的 components目录下,名为 custom-checkbox.json



这个文件中包含以下内容:



2.组件模板


在同一目录下,创建一个模版文件 custom-checkbox.wxml 。这个文件的写法与页面模版很类似:




这个模版将在组件中渲染出一个 checkbox 和一个 label


3.组件样式


同样类似于页面, wxss 文件中可以指定组件节点的样式。其中的样式仅在组件内部生效。需要注意的是,样式只能通过类选择器(如 .the-class-name )来指定:



4.组件定义


组件的 JS 文件中必须包含组件定义。定义时使用 Component 构造器:


简单的 Component 构造器调用包含3个定义段:


methods 中的方法可以用来包含组件的事件回调函数;


data 是组件的内部数据,可以用 this.setData 方法来改变;


properties 中声明这个组件的属性,上例中声明了 title 属性,这样,组件外部在使用组件时就可以指定这个属性的值。


这样我们就编写好了 custom-checkbox 这个组件。


如何使用自定义组件?


使用上面这个自定义组件的方法很简单。


Step 1


在需要使用这个组件的页面所对应的 json 文件中,添加下面的自定义组件声明:


Step 2


在页面对应的 wxml 文件中使用了:


这样,在页面上最终呈现的效果如下:


在自定义组件中也是可以引用其他自定义组件的,方法与在页面中引用的方法类似。


高级特性与注意事项


除了上述的基本功能外,自定义组件还提供了一组基础接口,用来实现各种各样的功能。


01

在页面和自定义组件间通信时,最常用的方法是事件机制,自定义组件可以使用 triggerEvent 接口向页面发送事件,页面 WXML 中使用 bind 或者 catch 就可以监听到。


02

如果事件机制还不足以满足组件间通信需要的话,可以使用  selectComponent 接口。


03

如果同时建立了好几个有相互关联关系的组件,可以使用组件间关系接口 relations


04

组件间可能需要共享部分代码,这时可以使用behaviors


有关它们的详细文档,请参考 开发者文档 - 框架 - 自定义组件 章节。


还需要注意的是,一些与 WXML 节点相关的接口,如wx.createSelectorQuery  wx.createCanvasContext ,在自定义组件中使用时有一定的变化,使用时请再次阅读一下相关的文档。

16986浏览
最后一次编辑于  2018-08-17
知识库内容非实时更新,可能已过期、失效或不适用于当前情形,请谨慎参考
收藏
反馈

18 个评论

  • 2018-05-23

    只想说,有一点很麻烦,每个page的json里面都要配置组件的命名和路径,页面多的话还要去一个一个的引用相同名称的组件,这样真的很繁琐,不能像vue的iview或者elementui一样,全局引用,不需要再每个页面重复定义,这也是至今我不用小程序组件的原因,真的很不方便。

    2018-05-23
    赞同 6
    回复
  • ししゅん施先生
    ししゅん施先生
    2018-05-12

    完全看不懂,不是程序员

    2018-05-12
    赞同 4
    回复
  • 不知道
    不知道
    2018-05-07

    调试相当费劲

    2018-05-07
    赞同 4
    回复
  • the hard way
    the hard way
    2018-05-17

    如果能优化一下调试功能就好啦,加油!

    2018-05-17
    赞同 3
    回复
  • 。
    2018-05-14

    和vue的组件有点像, 小程序越来越完善了

    2018-05-14
    赞同 3
    回复
  • 子夜
    子夜
    2018-05-12

    很棒的文档,算腾讯一点点认真的对待开发者了

    2018-05-12
    赞同 2
    回复
  • 刘阳
    刘阳
    2018-05-07

    这个文档图片都是webp,safari下显示不出来

    2018-05-07
    赞同 2
    回复 2
    • Ltt
      Ltt
      2018-05-14
      谢谢反馈,已修改,请重试看看。
      2018-05-14
      回复
    • 我习惯!
      我习惯!
      2020-05-06回复Ltt
      我想请问一下在使用mpvue或者uni-app做自定义组件的时候,因为这个模式下只有一个.vue的文件,那么这个component: true应该在什么地方配置呢???
      2020-05-06
      回复
  • 2018-05-23

    像swiper这种组件容器,slot插入的位置为什么不对,好像并不会在我设置的容器内,实现的原理能否解释下

    <swiper>

    <slot></slot>

    </swiper>


    2018-05-23
    赞同 1
    回复 1
    • Vacoor
      Vacoor
      2018-06-13

      同问。 swiper 这样的容器貌似没法在父组件使用 <swiper>, 子组件使用 <swiper-item> 这样无法使用

      2018-06-13
      回复
  • 鲤
    2022-09-09

    要是能有示例就好了,针对具体会用到的接口。

    2022-09-09
    赞同
    回复
  • MCC
    MCC
    2020-12-28

    组件js编译后的注释webpack配置,怎么能通过参数的形式,让编译后的js不显示webpack的东西。

    2020-12-28
    赞同
    回复

正在加载...

登录 后发表内容