微信小程序笔记(六)

193 阅读3分钟

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第28天,点击查看活动详情

前言

大家好呀,我是L同学。在上篇文章微信小程序笔记(五)中,我们学习了微信小程序的相关知识点,包括网络请求、界面弹窗、编程式路由、本地缓存,小程序的生命周期等相关知识点。在本篇文章中,我们将学习小程序的应用生命周期、页面生命周期、通过生命周期获取场景值、通过生命周期获取页面跳转参数等相关知识点。

应用生命周期

应用生命周期用来监听小程序应用级别的生命周期,主要有onLaunch、onShow、onHide 等生命周期钩子函数。

  • onLaunch: 在小程序启动时触发,全局只会触发1次。
  • onShow:在小程序前台运行时触发,会重复执行
  • onHide:在小程序后台运行时触发,会重复执行

在 app.js 中调用 App 函数来注册应用实例。

App({})

在 App() 的参数中定义:onLaunch、onShow、onHide 等生命周期钩子函数。

App({
  
  // 小程序启动时
  onLaunch: function () {
    // 全局只会触发1次
    console.log('小程序启动了...');
  },
  
  // 小程序前台运行时
  onShow: function () {
    // 重复执行
    console.log('小程序前台运行了...');
  },
  
  // 小程序后台运行时
  onHide: function () {
    // 重复执行
    console.log('小程序后台运行了...');
  },
  
})

页面生命周期

页面生命周期用来监听小程序页面级别的生命周期。

  • onLoad:页面加载时触发,只会触发1次。
  • onReady:当前页面初次渲染完毕时触发,只会触发1次
  • onShow:页面显示时触发(如返回、tabBar切换、前台运行)
  • onHide:页面隐藏时触发(跳转、tabBar切换、后台运行)
  • onUnload:页面卸载(微信发现这个小程序很久没用了,会自己卸载,一般不用管)

通过生命周期获取场景值

打开小程序的方式多种多样,比如扫码、转发、搜索、公众号等。通过场景值可以分辨出用户是以何种途径打开我们的小程序的。通过生命周期获取场景值可以获知用户是通过什么途经进入到我们的小程序中。场景值的实际作用可以在程序中,按照不同的场景值为用户展示不同的界面,可以用来统计热门入口,帮助改善市场推广的策略,提升推广效率,降低推广成本。

为 app.js 中的应用生命周期钩子函数 onLaunchonShow 添加参数,并从参数中获取场景值。

App({
  onLaunch(options) {
  	// 根据打开小程序的方式不同 options.scene 的值也不一样
    console.log(options.scene);
  },
  
  onShow(options) {
  	// 这里也可以获取场景值
    console.log(options.scene);
  }
})

通过生命周期获取页面跳转参数

在通过页面路径访问小程序页面时,可在路径中携带查询字符串形式的参数,如:

/pages/test1/test1?name=Tom&age=12

然后在该页面js中,可通过生命周期钩子 onLoad的参数获取传入的参数:

onLoad(options)