微信小程序开发学习笔记——3.1app.js中的生命周期函数与globalData

>>跟着b站up主“咸虾米_”学习微信小程序开发中，把学习记录存到这方便后续查找。

课程连接：https://www.bilibili.com/video/BV19G4y1K74d?p=15&vd_source=9b149469177ab5fdc47515e14cf3cf74

一、生命周期

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

二、例子1，关于生命周期

App({
  onLaunch: function () {
    console.log("初始化项目");
    this.globalData.name='咸虾米'
  },
  onShow: function (options) {
    console.log("onShow触发了")
  },
  onHide: function () {
    console.log("onHide触发了")
  },
  onError: function (msg) {
    
  },
  globalData:{
    name:"weixin"
  } 
})

点击设置，跳转到设置页面，控制台会打印“onHide触发了”，因为监听到小程序切后台了。

再点击左上角返回键“<”，控制台会打印“onShow触发了”，因为监听到小程序切回前台了。

三、例子2，关于globalData

1、app.js文件中的代码

this用来找到所属的对象App，this.globalData.name='咸虾米' 将名字换成了咸虾米，所以最后打印的不再是weixin而是咸虾米。

App({

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    console.log("初始化项目");
    this.globalData.name='咸虾米'
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log("onShow触发了")
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log("onHide触发了")
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
  },
  globalData:{
    name:"weixin"
  } 
})

2、demo.js的代码

开头两行用来获取globalData的name。整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。

const app=getApp()
console.log(app.globalData.name);
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

3、打印结果