zoukankan      html  css  js  c++  java
  • 微信小程序组件取不到属性值?可能是生命周期的原因

    在学习和使用小程序的过程中遇到了一个坑,情况是这样的。

    首先有个小程序页面 PageA,在 PageA 里使用一个组件 componentA ,这个组件的作用是推荐信息,类似于一个文本卡片的功能,推荐组件中有一个按钮,可以点击切换下一条,总共最多切换十条。组件 componentA 中需要一个数组属性 dataList ,然后就是组件内部实现了。

    组件内部实现就是,维护了一个当前展示信息的对象 showData 和 一个当前展示数据下标 showIndex,当点击切换下一个的时候,会进行 showIndex++,然后我用了组件的 observers 属性来进行监听 showIndex ,当 showIndex 改变的时候,就从 dataList 中取对应下标的数据赋值给 showData 。

    问题来了,初始的 showData 为空对象,当组件拿到dataList的时候肯定得进行初始赋值,其次是每次点击下一个切换 showIndex 的时候也会改变 dataList 。于是我就把 showIndex 的初始值赋值为 -1, 在小程序生命周期 lifetimes 里,使用 attached 生命周期,当时想的是组件进行到 attached 生命周期时一切的数据准备肯定都已经好了。于是就在 attched 生命周期中将 showIndex 赋予了初值 0,在  observes 里监听 showIndex 变化,当 dataList[showIndex] 存在时,就赋值最新的的值给 showData,若 dataList[showIndex] 不存在时就将表示数据已经展示完了,就把卡片隐藏。

    看到这里是不是一切都没有问题?

    但是问题来了,在初次加载的时候,推荐卡片组件消失不见了,并且也不出来。

    然后就打断点开始排查,结果发现在 observes 里,首次触发 showIndex 监听时,showIndex 为 0 ,但是 dataList 为空数组!!

    这是为什么呢?? 我是在 attched 生命周期里才赋值 showIndex 的,这时 dataList 按理来说应该是接收好了,怎么会是空数组呢?

    于是我就查阅微信小程序公众文档里的组件生命周期里找到答案。

    原来小程序的生命周期不仅仅是有 小程序指南 里的那三种基础生命周期(attached、moved、detached),还有 created、ready 和 error等三种,共计六种生命周期。

    于是我试着将 attached 生命周期改为了 ready 试了一下,就成功了!!!纠结了好一会儿,作为初学者还真的是有点摸不着头脑,所以记录一下,以备查询。

  • 相关阅读:
    event loop笔记
    webpack不同devtools打包对比
    windows 7系统搭建本地SVN服务器的过程
    Eclipse安装SVN插件
    总结eclipse中安装maven插件
    myeclipse building workspace如何禁止及提高myeclipse速度
    基于SAML的单点登录介绍
    使用 CAS 在 Tomcat 中实现单点登录
    SSO之CAS备忘
    Maven环境变量配置
  • 原文地址:https://www.cnblogs.com/LeoXnote/p/14790591.html
Copyright © 2011-2022 走看看