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

更新日期: 2017-12-22 阅读次数: 14729 分类: 微信小程序

问题

我们有一个订单页,订单页中有几个 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 聊聊, 查看更多联系方式