1、小程序的生命周期-App.js

  App() 必须在 app.js 中注册,且不能注册多个。所以App()方法在一个小程序中有且仅有一个。

App({
onLaunch: function () {
console.log('App Launch')
this.initCloud();
},
onShow: function () { },
onHide: function () {
console.log('App Hide')
},
globalData: {
hasLogin: false, },
}
})

  onLaunch 生命周期函数–监听小程序初始化

  当小程序初始化完成时,会触发 onLaunch(全局只触发一次)。

  onShow  生命周期函数–监听小程序显示

  当小程序启动,或从后台进入前台显示,会触发 onShow

  onHide 生命周期函数–监听小程序隐藏

  当小程序从前台进入后台,会触发 onHide

  onError 错误监听函数

  当小程序发生脚本错误,或者 api 调用失败时,会触发 onError 并带上错误信息

  其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问,上面的getPics就是函数, globalData是数据,这里面的函数和数据都是全局的。调用方式:在Pager中通过getApp()方法得到App对象并获得全局的数据和调用全局的函数。

前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。
只有当小程序进入后台一定时间,或者系统资源占用过高,才会被真正的销毁。

2.小程序页面的生命周期

Page({
data:{ },
onLoad:function(options){
// 生命周期函数--监听页面加载
console.log("test1 onLoad");
},
onReady:function(){
// 生命周期函数--监听页面初次渲染完成
console.log("test1 onReady");
},
onShow:function(){
// 生命周期函数--监听页面显示
console.log("test1 onShow");
},
onHide:function(){
// 生命周期函数--监听页面隐藏
console.log("test1 onHide");
},
onUnload:function(){
// 生命周期函数--监听页面卸载
console.log("test1 onUnload");
},
onPullDownRefresh: function() {
// 页面相关事件处理函数--监听用户下拉动作
console.log("test1 onPullDownRefresh");
},
onReachBottom: function() {
// 页面上拉触底事件的处理函数
console.log("test1 onReachBottom");
} })

  onLoad: 页面加载

  一个页面只会调用一次。接收页面参数,通过options可以获取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。

  onShow: 页面显示   

  每次打开页面都会调用一次。

  onReady: 页面初次渲染完成   

  一个页面只会调用一次,代表页面已经准备妥当,可以和视图层进行交互。

  onHide: 页面隐藏   

  当navigateTo或底部tab切换时调用。

  onUnload: 页面卸载

  当redirectTo或navigateBack的时候调用。

3、应用级生命周期,影响页面级生命周期 

  1. 小程序初始化完成后,页面首次加载触发onLoad,只会触发一次。

  2. 当小程序进入到后台,先执行页面onHide方法再执行应用onHide方法。

  3. 当小程序从后台进入到前台,先执行应用onShow方法再执行页面onShow方法。

参考链接:

https://www.cnblogs.com/nosqlcoco/p/wxsmallcycle.html

【微信小程序】App.js生命周期的更多相关文章

  1. 测试微信小程序页面的生命周期

    前言:本人是一个初学者,也是第一次写博客,敲键盘的时候还不知道发布后是什么效果,希望内容给其他初学的同学一点帮助,同时加深自己的理解.这篇随笔讲的是Page页面的生命周期,在开发中是基础中的基础,很容 ...

  2. 【Taro全实践】Taro在微信小程序中的生命周期

    一.Taro的本身生命周期 生命周期componentWillMount在微信小程序中这一生命周期方法对应页面的onLoad或入口文件app中的onLaunch componentDidMount在微 ...

  3. 微信小程序:应用生命周期

    小程序的生命周期分为应用生命周期和页面生命周期. 应用指的是一个文件,是小程序的入口文件app.js,入口文件最外层方法名称是App,页面的js文件最外层是page,组件的js文件的最外层是compo ...

  4. 微信小程序~App.js中获取用户信息

    (1)代码:主要介绍下获取用户信息部分 onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] l ...

  5. 微信小程序:页面生命周期

    小程序生命周期分为应用生命周期和页面生命周期 1.Onload:页面加载时触发,一般在onLoad中发送异步请求来初始化页面数据. 2.onShow:页面显示时触发 3.onReady:页面初次渲染完 ...

  6. 微信小程序~App.js中登录

    (1)初始化项目中App.js登录代码 // 登录 wx.login({ success: res => { // 发送 res.code 到后台换取 openId, sessionKey, u ...

  7. 微信小程序app.js中设置公有变量

    初始化GlobalData 在App.js的最上方可以设置GlobalData的初始值. App({ globalData:{ appid: '1wqas2342dasaqwe232342xxxxxx ...

  8. 微信小程序 --- app.js文件

    app.js文件是项目的入口文件: //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('l ...

  9. 微信小程序page的生命周期和音频播放及监听

    一.界面的生命周期 /** * 监听页面加载, * 页面加载中 */ onLoad:function(){ var _this = this console.log('index---------on ...

  10. 微信小程序--页面的生命周期和参数传递

    页面跳转: 1.函数 点击事件设置bindtap然后在本页面 js 设置函数 redirectTo:关闭当前页,跳转到指定页:   ( unload) navigateTo:保留当前页,跳转到指定页: ...

随机推荐

  1. python 使用tesseract进行图片识别

    from PIL import Image import pytesseract text = pytesseract.image_to_string(Image.open(r'E:\guo\2432 ...

  2. 松软科技web课堂:字符串方法和属性

    字符串方法帮助您处理字符串. 字符串方法和属性 原始值,比如“Bill Gates”,无法拥有属性和方法(因为它们不是对象). 但是通过 JavaScript,方法和属性也可用于原始值,因为在执行方法 ...

  3. Python Web(二)

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.Django-debug-toolbar django-debug-toolbar 是一组可配置的面板,可显示 ...

  4. HTML 本地存储

    HTML 本地存储:优于 cookies. 什么是 HTML 本地存储? 通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储. 在 HTML5 之前,应 ...

  5. Thinkphp 模板中 if 嵌套层级过多的问题,嵌套3级就报错,取消层级限制

    解决此问题有两种办法:1.第三层if换成eq或者原生<?php 'abc';>  2.修改Tp核心配置文件 1.第三层if换成eq或者原生<?php 'abc';> 如下图&l ...

  6. 2. Linux-3.14.12内存管理笔记【系统启动阶段的memblock算法(2)】

    memory:表示可用可分配的内存: 结束完memblock算法初始化前的准备工作,回到memblock算法初始化及其算法实现上面.memblock是一个很简单的算法. memblock算法的实现是, ...

  7. ArrayList的输出以及一些问题

    //首先需要创建一个ArrayList ArrayList arr=new ArrayList(); //然后往ArrayList里面插入一些值 arr.add("a"); arr ...

  8. element-ui 中dialog居中

      .el-dialog{        display: flex;        flex-direction: column;        margin:0 !important;       ...

  9. xen原理

    目录:1. Xen的简介1.1 Xen的大体结构1.2 Xen对VM的称呼1.3 Xen对CPU和内存的虚拟化过程1.4 Xen对IO设备的虚拟化过程1.5 Linux Kernel对Xen的支持1. ...

  10. 使用docker运行springboot项目

    本文主要讲的是使用docker运行springboot项目 获取一个springboot项目 这里我没有重新构建,用的之前写的一个项目,直接从github上下载下来,地址:https://github ...