微信小程序路由和生命周期

一、微信小程序路由

小程序有两种路由触发模式

1、标签式路由触发

页面栈表现方式

// redirect 对应 API 中的 wx.redirect 方法
<navigator url="/page/redirect/redirect?title=redirect" open-type="redirect">在当前页打开</navigator>

// navigator 组件默认的 open-type 为 navigate 
<navigator url="/page/navigate/navigate?title=navigate">跳转到新页面</navigator>

// switchTab 对应 API 中的 wx.switchTab 方法
<navigator url="/page/index/index" open-type="switchTab">切换 Tab</navigator>

// reLanch 对应 API 中的 wx.reLanch 方法
<navigator url="/page/redirect/redirect?title=redirect" open-type="redirect">//关闭所有页面，打开到应用内的某个页面

// navigateBack 对应 API 中的 wx.navigateBack 方法
<navigator url="/page/index/index" open-type="navigateBack">关闭当前页面，返回上一级页面或多级页面</navigator>

2、编程式路由触发

路由方式

微信小程序一共有五个页面跳转路由：
// 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，但是 redirectTo 
wx.navigateTo({
  url: 'page/home/home?user_id=1'
})


// 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

wx.navigateTo({
  url: 'page/home/home?user_id=1'　　// 页面 A
})
wx.navigateTo({
  url: 'page/detail/detail?product_id=2'　　// 页面 B
})
// 跳转到页面 A
wx.navigateBack({
  delta: 2  //返回指定页面
})


// 关闭当前页面，跳转到应用内的某个页面。
wx.redirectTo({
  url: 'page/home/home?user_id=111'
})


// 跳转到tabBar页面（在app.json中注册过的tabBar页面），同时关闭其他非tabBar页面。
wx.switchTab({
  url: 'page/index/index'
})


// 关闭所有页面，打开到应用内的某个页面。
wx.reLanch({
  url: 'page/home/home?user_id=111'
})

二、生命周期

onLaunch() {
  console.log('onLaunch监听小程序初始化');
}

onShow() {
  console.log('onShow监听小程序显示');
}

onHide() {
  console.log('onLaunch监听小程序隐藏');
}

小程序生命周期

1.整体应用的生命周期

       App({
        //程序启动时的只加载一次
       	onLaunch() {},
       	//切换到前台运行
       	onShow() {},
         //切换后台运行
       	onHide() {},
       	//监听和收集代码错误信息
       	onError() {},
       	....
       })

2.页面的生命周期

Page({
  //页面加载时只执行一次
	onLoad() {},
	//监听页面初次渲染完成,此果就可以和页面进行各种交互，只加载一次
	onReady() {},
	//只要页面显示时就会触发
	onShow() {},
	//只要页面离开地就会触发
	onHide() {},
	//到达页面底端触发
	onReachBottom() {},
	//监听下拉刷新，注意要开启enablePullDownRefresh为true
	onPullDownRefresh() {},
	//监听页面滚动
	onPageScroll() {}
})