美文网首页
关于微信小程序的生命周期

关于微信小程序的生命周期

作者: 小一一93 | 来源:发表于2017-11-17 21:31 被阅读0次

这一段时间了解了一下微信小程序的生命周期,小程序的5个生命周期如下:

  • onLoad: 页面初始化
  • onShow: 页面显示
  • onReady: 页面渲染完成
  • onHide: 页面隐藏
  • onUnload: 页面关闭

其中只有onLoad这个函数是有变量的,变量是由跳转到当前页面的url中所有的变量组成的一个object。

这个生命周期的经历顺序举例来说是这样的,以index页面为例:

用户进入小程序: onLoad->onShow->onReady

用户点击home键回城: onHide

用户再次进入微信回到小程序: onShow

用户点击返回:onUnload

可以从官方给出的图来很好的理解。

理解了生命周期之后,在编程的时候可能会遇到这样的问题。有一个用户路径如下:

用户点击评论,进入评论页面

用户评论后提交

提交成功后跳回到上一页面

上一页面成功显示用户的评论

那么在程序中过程如下:

当在A页面,用户点击评论,新的页面B开启,A执行onHide,B执行onLoad, onShow, onReady.

用户评论后提交,B执行onUnload, A执行onShow

这个时候如果需要显示含有最新的评论应该如何做?在onShow中向后台发送request请求数据。那么会有这样的问题,当用户初始进入该页面的时候,在onLoad和onShow都会发送一次request,造成两次请求和渲染。而且在onShow中由于无法获取url中参数的内容,可能会造成发送request失败。

我的解决方案是,首先要在onLoad中将url的参数存入data中,以便onShow使用。其次是,在这种情况下需要区分onShow和onLoad发送request的时机,避免二次渲染。

假如需要在A页面显示的内容只有B页面进行操作的数据,不想要在A页面重复发送request获取一次数据,而是从B页面将信息传给A,要如何实现呢?

微信提供了一种缓存的机制,在B页面通过wx.setStorage将需要传递的信息的key和value存入。再在A页面通过wx.getStorage取出,如果不需要继续使用该信息的话则可以通过wx.removeStorage将该信息删除。

以上,就是我曾经遇到过的问题和解决方案。如有不妥或者更好的方案,希望可以给我一个机会跟您一同交流。

相关文章

  • 微信小程序开发 | 把玩系列:各种组件和API实用详解

    新手向!微信小程序把玩系列: 微信小程序把玩《一》:window配置,tabBar底部导航,应用生命周期 微信小程...

  • 微信小程序组件探究和应用

    把玩微信小程序组件 微信小程序把玩《二》:页面生命周期,模块化,数据绑定,view组件 微信小程序把玩《三》:sc...

  • 微信小程序生命周期

    跟APP一样,微信小程序也有自己的生命周期,了解微信小程序的生命周期对于小程序开发者来说非常重要,关系到什么时候加...

  • 微信小程序之生命周期(四)

    微信小程序生命周期分类: 应用生命周期 页面生命周期 一、应用生命周期 App() 函数用来注册一个小程序。接受一...

  • uni-app 微信小程序学习笔记

    微信小程序的生命周期函数 应用的生命周期。onLaunchonShowonHideonError 页面的生命周期o...

  • 《微信小程序开发文档》使用指南

    微信小程序开发文档,主要介绍了微信小程序的开发教程,微信小程序的api文档,微信的应用号开发资料等。 一、关于微信...

  • 前端知识体系6.小程序

    本文目录 1.说下小程序框架的主要文件和目录的作用 2.微信小程序组件的生命周期 3.简单描述下微信小程序页面文件...

  • React生命周期

    什么是生命周期? 在开发微信小程序中,常见的生命周期方法有onLaunch,onLoad,onShow等。生命周期...

  • 小程序教学九(生命周期)

    微信为我们监听小程序和各个页面的状态提供了系统函数让我们知道各个状态,进而进行操作。 小程序的生命周期函数 微信小...

  • 微信小程序开发论坛:weappdev.com

    点击微信小程序开发论坛成为论坛成员 关于微信小程序开发论坛-一个垂直的微信小程序交流中心 大家好,欢迎来到微信小程...

网友评论

      本文标题:关于微信小程序的生命周期

      本文链接:https://www.haomeiwen.com/subject/kgrsvxtx.html