微信小程序的生命周期的详解

 更新时间:2017年10月19日 09:29:34   作者:Crab0314  
这篇文章主要介绍了微信小程序的生命周期的详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下

今天记录一下微信小程序的app生命周期及各页面的生命周期。

(一)小程序的生命周期

在app.json中进行监听,三个方法

①onLauch方法只在小程序启动时触发一次。

②onShow方法,在小程序启动时,及由后台切换至前台显示时触发。

③onHide方法,在小程序由前台显示切换至后台时触发。

可以通过 ↓ 这张图片,感受一下各生命周期。


比较有趣的地方是,小程序启动时会触发两次onShow,我不知道是为什么。希望了解的同学解释一下。

(二)页面的生命周期

1.在index中我添加了两种方式跳转到新增的crab页面 ↓ 在这里简单介绍一下

①在index.wxml文件中通过在<navigator>标签中添加url实现跳转

②将button绑定到index.js中的方法实现跳转,此处我将方法命名为turnCrabFunction,并在index.js中实现该方法。



2.下面介绍crab.js中的各生命周期

↓图为该文件部分代码,使用console.log进行打印,方便我们进行观察各生命周期。(各函数后面注释对应功能说明。)


其中,onSomeFunction是我随意命名的,其他方法均有固定名字及含义。

3.在index界面,我们选择任意一种方式进入crab界面。↓图进行详细说明


(如果无法实现下拉刷新,请检查app.json中window参数,或检查当前页面的crab.json文件是否覆盖该参数为false)


如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • JS处理数据实现分页功能

    JS处理数据实现分页功能

    这篇文章介绍了JS处理数据实现分页功能的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • 微前端框架qiankun源码剖析之上篇

    微前端框架qiankun源码剖析之上篇

    这篇文章主要为大家介绍了微前端框架qiankun的源码剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • TS 项目中高效处理接口返回数据方法详解

    TS 项目中高效处理接口返回数据方法详解

    这篇文章主要为大家介绍了TS 项目中如何高效的处理接口返回的数据的方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01
  • JavaScript 中的文档对象模型 DOM

    JavaScript 中的文档对象模型 DOM

    DOM,即文档对象模型,前端开发工程师必学的基础知识,在本文将介绍如何在 HTML 文档中选择元素、如何创建元素、如何更改内联 CSS 样式以及如何监听事件,需要的朋友可以参考一下
    2021-10-10
  • vue axios请求超时的正确处理方法

    vue axios请求超时的正确处理方法

    这篇文章主要介绍了vue axios请求超时,设置重新请求的完美解决方法,一并给大家介绍了axios基本用法,需要的朋友可以参考下
    2018-04-04
  • JS前端实现fsm有限状态机实例详解

    JS前端实现fsm有限状态机实例详解

    这篇文章主要为大家介绍了JS前端实现fsm有限状态机实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • JS前端可视化GraphQL使用详解

    JS前端可视化GraphQL使用详解

    这篇文章主要为大家介绍了JS前端可视化GraphQL使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • JSON Schema概念及使用场景

    JSON Schema概念及使用场景

    这篇文章主要为大家介绍了JSON Schema概念及使用场景示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • You-Dont-Know-JS词法作用域及两种常见的模型学习文档

    You-Dont-Know-JS词法作用域及两种常见的模型学习文档

    这篇文章主要为大家介绍了JS 词法作用域及两种常见的模型详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Css-In-Js实现classNames库源码解读

    Css-In-Js实现classNames库源码解读

    这篇文章主要为大家介绍了Css-In-Js实现classNames库源码解读,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12

最新评论