评论

小程序自定义组件生命周期忍者秘籍

小程序自定义组件生命周期忍者秘籍

接前文

小程序自定义组件忍者秘籍? - 微信开放社区 https://developers.weixin.qq.com/community/develop/article/doc/000e4c11e6807884519cb94f152013

在上面的文章中,我们回顾了,小程序自定义组件和页面如何互相交互的问题,

今天我们接着学习小程序自定义组件的生命周期跟页面生命周期的关系,也就是小程序自定义组件生命周期与页面的生命周期执行先后顺序


有这么一个需求,自定义组件需要接收页面传来的app实例的数据

总结:

1.自定义组件中data 不能直接获取app.globalData

2.通过自定义组件的生命周期函数来传值。

3.最下面附带自定义组件和页面的生命周期执行先后顺序

组件 verify.js



因为已经是认证过了,其他页面的获取的app.globalData.isCert是1,

唯独在组件data中是0,不过你要是手动改为 isrenzheng:1,或者0,整个流程是可以走通的,

最后为从自定义组件给页面传递app实例的值,就从组件生命后期下手

组件verif.js 

在组件的生命周期,attached、ready中使用this.setData 都可以解决传值的问题。

除此之外,

本文整理过程中参考了以下文档

1、微信小程序组件生命周期的坑

https://juejin.cn/post/6934971793262247944

2、代码片段,场景:attached执行二次

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

3、代码片段,场景:detached和ready顺序

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

最后一次编辑于  2021-08-13  
点赞 0
收藏
评论

4 个评论

  • 红小豆
    红小豆
    2021-08-13

    场景

    自定义组件展示后,马上hide,这个时候detached要在ready之前调用

    2021-08-13
    赞同
    回复
  • 红小豆
    红小豆
    2021-08-13

    具体生命周期执行顺序如下图所示


    本图来自juejin

    2021-08-13
    赞同
    回复
  • 红小豆
    红小豆
    2021-08-13

    小程序官方文档没有明确给出组件生命周期的执行顺序,

    不过通过打印日志我们可以很容易地发现:


    在加载阶段,会依次执行:created -> attached -> ready

    在卸载阶段,会依次执行:detached


    所以,看起来这个顺序貌似应该是:created -> attached -> ready -> detached。

    但是实际情况果真如此吗?

    2021-08-13
    赞同
    回复
  • 红小豆
    红小豆
    2021-08-13

    总结几点吧

    1、自定义组件的data不能直接接收来自app或者页面page的信息,

    按以往的经验,很多开发小程序的初学者为了省事,或者从reactl来的,都习惯在data里面就直接赋值了,这是不对的

    这也是我曾经犯过的错误

    2、

    2021-08-13
    赞同
    回复
登录 后发表内容