微信小程序 应用级 页面级生命周期

微信小程序整体架构

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。

微信小程序逻辑层

小程序的实例应用注册

每个小程序都需要在 app.js 中调用 App 方法注册小程序实例
4.3.1.App内容语法
应用生命周期函数、自定义事件、自定义全局变量，整体格式是object

注意：
App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

App({

• 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）

onLaunch: function () {
// 只有冷启动才会触发
// 应用场景：记录访问时间 获取用户的来源 登录授权、小程序兼容性问题等
console.log(‘触发 onLaunch’)
},

• 当小程序启动，或从后台进入前台显示，会触发 onShow
  */
  onShow: function (options) {
  // 冷启动和热启动都会触发
  console.log(‘小程序启动，或从后台进入前台显示’)

// 调用不存在的事件
// console.log(this)
// this.fun();

// 调用存在事件
this.user()
this.users()
this.userss()

},

/**

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

• 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  */
  onError: function (msg) {
  console.log(‘报错了’)
  console.log(msg)
  // 可以将错误信息统计发送给后端服务器
  // wx.request({
  // url: ‘http://www.shop.com?msg=’+msg,
  // })
  },

/**

• 当小程序发生脚本错误，小程序要打开的页面不存在时触发。也可以使用 wx.onPageNotFound 绑定监听
  */
  onPageNotFound: function () {
  console.log(‘页面不存在’);
  // 我们帮助用户重定向到一个存在页面
  wx.reLaunch({
  url: ‘pages/user/main’,
  })
  },

// ========自定义事件=
// 声明式函数定时方式
user:function(){
console.log(‘我是李四’)
console.log(this)
// 使用全局变量
console.log(this.globalData.name)
},

// ES6简写(建议写法)
users(){
console.log(‘我是张三’)
console.log(this)
setTimeout(()=>{
console.log(this)
},500)
},

// 箭头函数
userss:()=>{
console.log(‘我是王五’)
console.log(this)
},

// =====自定义全局变量
globalData:{
name:“lisi”,
age:20,
array:[1,3,4,5]
}

})

4.4.微信小程序页面注册
通过页面的.js文件中的page完成页面注册，格式object
4.4.1.page内容语法
页面初始化的数据data 页面生命周期 自定义事件 自定义变量

// pages/index/index.js // let app = getApp(); //
console.log(app.globalData.name) Page({

 页面的初始数据
 
data: {
    name:'李四',
    age:20
},

// ====================自定义事件================
fun:function(){},
funs(){},
fun:()=>{},

/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
    //应用场景：获取页面之间跳转传递的参数  
    //         获取业务数据
    console.log('onLoad')
},

/**
 * 生命周期函数--监听页面初次渲染完成
 */
onReady: function () {
    //应用场景： 获取页面元素的节点
    console.log('onReady')
},

/**
 * 生命周期函数--监听页面显示
 */
onShow: function () {
    // 应用场景：获取业务数据
    console.log('onShow')
},

/**
 * 生命周期函数--监听页面隐藏
 */
onHide: function () {
    console.log('监听页面隐藏')
},
})

.页面栈

---

     let pages = getCurrentPages();
     console.log(pages)

.生命周期总结
进入小程序时：
首先执行应用生命周期函数，再次执行页面生命周期函数
离开小程序时：
首先执行页面生命周期函数，再次执行应用生命周期函数