文档章节

3.小程序的生命周期

o
 osc_h3robkrt
发布于 2018/02/28 11:02
字数 923
阅读 11
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

软件生命周期(Software Life Cycle,SLC)是软件的产生直到报废或停止使用的生命周期。

微信小程序的生命周期函数有2个

一个是App的生命周期

另一个是Page的生命周期

 

App的生命周期

示例:演示App的生命周期函数
app.js:
App({
  onLaunch: function () {
    console.log("App生命周期函数——onLaunch函数");
  },
  onShow: function () {
    console.log("App生命周期函数——onShow函数");
  },
  onHide: function () {
    console.log("App生命周期函数——onHide函数");
  },
  onError: function (msg) {
    console.log("App生命周期函数——onError函数");
  }
})

运行:
(1)程序启动时,会触发以下2个函数
第一执行onLauch函数——当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
第二执行onShow函数——当小程序启动,或从后台进入前台显示,会触发 onShow

(2)当点击“后台”时,会触发以下函数(即程序被转到后台时)
onHide函数——当小程序从前台进入后台,会触发 onHide

当点击“前台”时,就会再次触发onShow函数

Page的生命周期

 

示例: 演示Page的生命周期函数
logs.js:
Page({
  data:{ },
  onLoad:function(options){
// 生命周期函数--监听页面加载
console.log("Page onLoad函数");
  },
  onReady:function(){
// 生命周期函数--监听页面初次渲染完成
console.log("Page onReady函数");
  },
  onShow:function(){
// 生命周期函数--监听页面显示
console.log("Page onShow函数");
  },
  onHide:function(){
// 生命周期函数--监听页面隐藏
console.log("Page onHide函数");
  },

 onUnload:function(){

// 生命周期函数--监听页面卸载

console.log("Page onUnload函数");

  }

})

运行:
(1)

当启动index页面时,会触发以下3个函数
第一执行onLoad函数——在文档加载的时候会执行
第二执行onShow函数——在页面显示的时候会执行
第三执行onReady函数——在页面初次渲染完成时执行

(2)在logs页面时,当点击左上角“返回”,会触发以下函数
onUnload函数——在页面销毁时执行

(3)在logs页面时,当点击“后台”时,会触发以下函数(即程序被转到后台时)
onHide函数——在页面隐藏时会执行

(4)在logs页面时,当点击“前台”时,会触发以下函数(即程序从后台被重新转回前台时)
onShow函数——在页面显示时会执行

示例:演示App生命周期函数和Page生命周期函数的结合使用

app.js:

在app.js文件添加以下几个生命周期函数

App({

  onLaunch: function () {

    console.log("App生命周期函数——onLaunch函数");

  },

  onShow: function () {

    console.log("App生命周期函数——onShow函数");

  },

  onHide: function () {

    console.log("App生命周期函数——onHide函数");

  },

  onError: function (msg) {

    console.log("App生命周期函数——onError函数");

  }

})

 

index.js:

在index.js文件添加以下几个生命周期函数

Page({

  data:{ },

  onLoad:function(options){

// 生命周期函数--监听页面加载

console.log("Page onLoad函数");

  },

  onReady:function(){

// 生命周期函数--监听页面初次渲染完成

console.log("Page onReady函数");

  },

  onShow:function(){

// 生命周期函数--监听页面显示

console.log("Page onShow函数");

  },

  onHide:function(){

// 生命周期函数--监听页面隐藏

console.log("Page onHide函数");

  },

  onUnload:function(){

// 生命周期函数--监听页面卸载

console.log("Page onUnload函数");

  }

})

 

运行:

(1)程序启动时

首先执行的是App的生命周期函数

接着再执行Page的生命周期函数

 

(2)当点击“后台”时,会触发以下函数(即程序被转到后台时)

首先执行Page的onHide生命周期函数

再执行App的onHide生命周期函数

 

(3)当点击“前台”时(即程序返回前台时)

首先执行Page的onShow生命周期函数

再执行App的onShow生命周期函数

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
5分钟 maven3 快速入门指南

前提条件 你首先需要了解如何在电脑上安装软件。如果你不知道如何做到这一点,请询问你办公室,学校里的人,或花钱找人来解释这个给你。 不建议给Maven的服务邮箱来发邮件寻求支持。 安装Mav...

fanl1982
2014/01/23
1.2W
6
密码管理程序--pwgrep

为了管理我的密码,我写了一个小的 bash/awk 脚本用来管理一个密码数据库并使用 GnuPG 进行加密。使用 pwgrep 的好处是: 密码加密 密码版本化,不用担心丢失老密码 Since a versioning sys...

匿名
2013/03/11
1.3K
0
数据中心生命周期管理--Foreman

Foreman是一个集成的数据中心生命周期管理工具,提供了服务开通,配置管理以及报告 功能,和Puppet Dahboard一样,Foreman也是一个Ruby on Rails程序.Foreman和 Dashboard不同的地方是在于,Fore...

匿名
2012/10/24
1.5W
0
律师事务所管理程序--eLawOffice

eLawOffice eLawOffice是第一个在sourceforge上的开源的管理律师事务所的程序,并且也是最完整的。但是eLawOffice特别为意大利会计法律及事物处理方便定制。 这个是一个跨平台的java套件,用...

匿名
2012/10/26
2K
0

没有更多内容

加载失败,请刷新页面

加载更多

认识Node

什么是Node? Node 是 JavaScript 的一种运行环境。可以使 JS 代码不依赖浏览器也可以执行。他俩的差异如下: 两个运行环境都包含了 ECMScript 。另一方面 JavaScript 包含了 BOM 和 DOM。 ...

长臂猿猴
31分钟前
13
0
正则表达式中的非捕获组是什么? - What is a non-capturing group in regular expressions?

问题: 非捕获组(即(?:) )如何在正则表达式中使用,它们有什么用? 解决方案: 参考一: https://stackoom.com/question/Ejkl/正则表达式中的非捕获组是什么 参考二: https://oldbug.net...

技术盛宴
31分钟前
6
0
他在国外演讲时说,学Python只要看答案做完这几十道题,就足够了

你想学Python?其实很简单,因为Python本身就是一门比较简单的编程语言。 你要做的也就是看着答案做完这几十道题就可以了,不管你是不是有编程基础,因为答案摆在那儿,你不可能不会做。 为什...

python小天
32分钟前
0
0
「2020最新」Spring最易学习教程 4—整合Mybatis 事务控制

0 复习 代理模式 代理模式,可以为目标类添加额外功能。 Spring 动态代理 定义目标类对象 定义额外功能,增强。实现Spring内置的接口 配置增强类 定义切入点 编织组装 增强类型 前置增强 Me...

鹿老师的Java笔记
51分钟前
21
0
OpenCV开发笔记(六十九):红胖子8分钟带你使用传统方法识别已知物体(图文并茂+浅显易懂+程序源码)

若该文为原创文章,未经允许不得转载 原博主博客地址:https://blog.csdn.net/qq21497936 原博主博客导航:https://blog.csdn.net/qq21497936/article/details/102478062 本文章博客地址:h...

红模仿_红胖子
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部