小程序の页面App生命周期&路由传参

App生命周期

属性	说明	用法
onLaunch	监听小程序初始化	应用第一次启动就会触发的事件(一般用做程序启动获取用户的个人信息)[比onShow先触发]
onShow	监听小程序启动或切前台	应用被用户看到时触发,比onLaunch慢,会频繁触发[重置应用的数据和页面效果]
onHide	监听小程序切后台	应用被隐藏[暂停或清除定时器,减少内存]
onError	错误监听函数	应用代码发生报错会触[收集用户的错误信息,通过异步请求将错误的信息发送到后台]
onPageNotFound	页面不存在监听函数	应用第一次启动的时候,如果找不到第一个入口页面,才会触发[如果首页找不到了,重新跳到第二个首页]

Page生命周期

属性	说明	用法
onLoad	监听页面加载	发送异步请求来初始化页面数据(页面加载时第一个调用)
onShow	监听页面显示	页面加载时第二个调用
onReady	监听页面初次渲染完成	页面加载时第三个调用
onHide	监听页面隐藏
onUnload	监听页面卸载
onPullDownRefresh	监听用户下拉动作	页面数据和样式初始化,需要配置 “enablePullDownRefresh”: true
onReachBottom	页面上拉触底事件的处理函数	上拉加载下一页数据
onShareAppMessage	用户点击右上角转发
onPageScroll	页面滚动触发事件的处理函数	小程序横屏竖屏切换时触发 [需要在json文件中配置 “pageOrientation”:”auto”]开启横竖屏切换
onResize	页面尺寸改变时触发
onTabItemTap	当前是tab页,点击tab时触发

路由传参和参数获取

场景: 微信小程序的路由跳转方式分为两种: 1) 组件跳转 2) API跳转

1. 组件跳转时传参

   // 通过拼接url参数进行组件传参 target-> 在小程序内跳转
   // 注意点: 不能通过es6的模板字符串进行拼接,tabBar跳转无法传递参数
   <navigator target="self" url='/packagePlayer/pages/music-player/index?id={{id}}' ></navigator>

2. API跳转

   <button catchtap="onJumpUrl">跳转</button>
   
   Page({
     onJumpUrl(e){
       // API调用因为是写在js里的,可以使用ES6的模板字符串
       wx.navigateTo({
         url: `/packagePlayer/pages/music-player/index?id=${this.data.id}`,
       });
     }
   })

注意: 微信小程序是多种路由跳转方式的,但是传参基本一致,这里为了演示如何拼接参数只使用了部分API(组件跳转可以在open-type中设置跳转属性)

3. 路由参数获取

   1. 生命周期获取
      定义: 在Page的onLoad生命周期可以通过options参数获取

      Page({
        onLoad(options){
          const { id } = options
        }
      })

   2. API获取

      let pages = getCurrentPages();     // 获取跳转页面的信息数组
      let currentPages = pages[pages.length - 1]    // 每次都取上一个页面的信息
      let options = currentPages.options    // 通过options里获取参数
      const { goods_id } = options
      this.getGoodsDetails(goods_id)