微信小程序生命周期中 onLoad 与 onShow 的使用场景区别

文章目录

    问题

    我们有一个订单页,订单页中有几个 tab,分别是

    • 全部
    • 未支付
    • 待发货
    • 快递中
    • 已完成

    正常使用时没有什么问题。但是,加入了一个新功能,即微信小程序的消息服务。
    在商家接单之后,会自动推送一条微信消息给客户。点击消息,会自动进入微信小程序的订单页,对应的待发货 tab。

    好吧,问题出现了。

    • active tab 永远是全部。通过核对后台的消息模板设置的路径参数修复。
    • 修复 active 问题后。发现,即使进入了指定 tab,但是看不到对应的状态的订单。

    都是 onLoad onShow 理解不充分惹得祸

    第二个问题,即使进入了指定 tab,但是看不到对应的状态的订单。

    后台消息模板中指定的路径类似这样

    /pages/order/order?status=3
    

    看不到对应的状态的订单,说明没有从后台拉取对应状态的订单。

    问题一定是出在页面的缓存问题上,因为微信小程序会对用过页面进行缓存,确切地说是使用 navigator 跳转的页面,会被压栈。下次访问,还是缓存的内容。

    但是,我之前的理解有点问题。我一直以为,缓存是按照程序目录缓存的。即,缓存的是同一个 order 页,无论 status 是什么值。

    实际测试,证明了我的这种理解是错误的。

    测试方法如下:

    • 从个人中心访问全部订单。可以看到对应的所有订单
    • 从消息服务的消息跳转到“待发货”的订单页,也可以看到对应的所有订单
    • 而原有的拉取后台接口的逻辑是在 onLoad 中

    这说明了一个问题,即 onLoad 被调用了两次,也就是说,不同的 status 参数值,会被判断为不同的小程序页面,会被分别缓存。

    那问题就非常好解决了,即将拉取逻辑从 onLoad 提取到 onShow 即可。

    这样做可以保证每次页面显示时(onShow)都重新拉取一次订单列表,而不至于在第一次打开后(onLoad)被缓存。

    关于作者 🌱

    我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊,或者关注我的个人公众号“大象工具”, 查看更多联系方式