每天一个小程序知识点-自定义组件
发布于 3 年前 作者 yxue 3294 次浏览 来自 分享

原标题

学习自定义组件系列,难度指数★★★★★

自定义组件算是小程序开发里面难度最高的一个知识点,在阅读本文之前,请看看下面红字提示

本文面向对象为具有一定小程序开发基础的同学,其实对我来讲,学习自定义组件,也是反复折腾了好几天,每一次学习都有不同的感悟和收获,特别是近期有个二开项目中,到处到是自定义组件,才硬着头皮啃下这块骨头

今天又开始学习自定义组件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

希望通过本次学习,可以回答下面几个问题,并能在小程序项目中初步掌握自定义组件的创建和使用

1)自定义组件的属性、内部数据、自定义方法;

2)自定义组件的生命周期;

3)自定义组件与调用页面如何通信;

4)自定义组件的属性和内部数据有何区别;

5)如何理解自定义组件中的纯数据字段;

由于我对自定义组件的生命周期和组件间通信与事件这块比较陌生,这两块是我今天重点学习的

关于生命周期的几点,我单独拎出来

1)定义生命周期方法

生命周期方法可以直接定义在 Component 构造器的第一级参数中。

自小程序基础库版本 2.2.3 起,组件的的生命周期也可以在 lifetimes 字段内进行声明(这是推荐的方式,其优先级最高)。

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html

2)组件间通信

组件间的基本通信方式有以下几种。

WXML 数据绑定:用于父组件向子组件的指定属性设置数据,仅能设置 JSON 兼容数据(自基础库版本 2.0.9 开始,还可以在数据中包含函数)。具体在 组件模板和样式 章节中介绍。

事件:用于子组件向父组件传递数据,可以传递任意数据。

如果以上两种方式不足以满足需要,父组件还可以通过 this.selectComponent 方法获取子组件实例对象,这样就可以直接访问组件的任意数据和方法。

学习这一点需要重点消化下面的关于事件的知识点

组件间通信与事件

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html

事件

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

组件事件处理函数

https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

下面这句话要重点理解下

自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件

1

本文参考以下文章

1)自定义组件公测说明及入门介绍? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/00028abbd342f0c014868e37f57809

2)自定义组件? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0006e8c236cd10d499b6217a351c09

3)https://developers.weixin.qq.com/ebook?action=get_post_info&volumn=1&lang=zh_CN&book=miniprogram&docid=000846df9a03909b0086a50025180a

4)微信小程序:自定义组件的数据传递

https://segmentfault.com/a/1190000014474289

5)小程序自定义组件,父组件如何向子组件传递参数,以及如何传递一个对象,导入代码片段一试便知? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/00086eb5294e0894b63a8898e56013

6)小程序-实现自定义组件以及自定义组件间的通信

https://juejin.cn/post/6889218680975491085

第四篇文章我担心由于不可抗拒原因而不能访问,我转发到社区了,具体见下文

微信小程序:自定义组件的数据传递? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/0000c0cfa587b81dd05b04f205b813

奉上官方的代码片段可以辅助我们更好的理解组件和页面之间的同学

https://developers.weixin.qq.com/s/X314zqmp70mx

通过下面四张截图基本理解的比较透彻了

截图一

截图二

截图三

截图四

本文总结

自定义组件的事件这里太绕了

祝各位学有所得

回到顶部