微信小程序day01_07之小程序的生命周期

本文代码地址 https://gitee.com/jaythc/wxxcx_learen/tree/master/day01/day01_07/my-first-demo

一. 生命周期回调函数的介绍

onLaunch(在微信官方文档中, 已经改成了onLoad): 第一次打开小程序的时候, onLaunch事件会被触发, 并且只会调用一次.

onShow: 会随着onlanuch一起触发, 小程序在前台打开时, 会展现的方法

onHide : 小程序从前台转到后台了, 就会触发此事件.

onError: 小程序出错的时候, 触发此事件. 类似于java的异常.

其他: 开发者可以添加任意的函数或数据到 Object 参数中，在页面的函数中用 this 可以访问

在小程序官方文档的 框架—> 注册页面中, 有对生命周期的方法,进行一些介绍. https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

二. 生命周期函数的代码示例

在全局的app.js中,编写如下的内容

//app.js
App({
  //打开微信小程序时,触发的onLaunch函数
  onLaunch(options){
    console.log("触发  onLaunch")
  },
  onShow() {
    console.log("触发 onShow")
  },
  onHide() {
    console.log("触发 onHide")
  },
  courseName: '小程序实战'
})

当运行小程序时, 控制台打印如下, 说明了开启小程序时,会触发onLaunch事件一次, 并且会触发onShow一次, 如果把小程序切换后台了,那么会触发onHide事件

全局参数的应用 在上面的app.js中, 定义了courseName全局参数, 在index.js中使用如下, 在onLoad函数中, 通过getApp() 获取小程序的实例, 通过该实例获取全局参数, 并把该参数用set方法,绑定到页面中

Page({
  // data为数据绑定
  data: {
    mytext: '第一个demo',
    color: "red"
  },
  onLoad: function () {
    // getApp 为获取小程序的实例
    var appInstance = getApp();
    // appInstance.courseName 为获取自定义的参数
    console.log(appInstance.courseName);
    this.setData({
      mytext: appInstance.courseName
    })
  }
})

页面中显示的效果如下