微信小程序的路由，以及生命周期

路由

什么是路由？

路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程。我们可以理解微信小程序页面路由，根据路由规则（路径）从一个页面跳转到另一个页面的的规则。

 主要有以下几种跳转方式

1.        wx.switchTab(Object object) 

功能描述

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

 示例代码

wx.switchTab({
  url: '/index'
})

 2.        wx.reLaunch(Object object)

功能描述

关闭所有页面，打开到应用内的某个页面

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内页面路径 (代码包路径)，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 'path?key=value&key2=value2'
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

 示例代码

wx.reLaunch({
  url: 'test?id=1'
})

 3.        wx.redirectTo(Object object)

功能描述

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

 示例代码

wx.redirectTo({
  url: 'test?id=1'
})

4.        wx.navigateTo(Object object)

功能描述

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

参数

Object object

属性	类型	默认值	必填	说明
url	string		是	需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2'
events	Object		否	页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

object.success 回调函数

参数

Object res

属性	类型	说明
eventChannel	EventChannel	和被打开页面进行通信

示例代码

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过 eventChannel 向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

5.        wx.navigateBack(Object object)

功能描述

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

参数

Object object

属性	类型	默认值	必填	说明
delta	number	1	否	返回的页面数，如果 delta 大于现有页面数，则返回到首页。
success	function		否	接口调用成功的回调函数
fail	function		否	接口调用失败的回调函数
complete	function		否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是 A 页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是 B 页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在 C 页面内 navigateBack，将返回 A 页面
wx.navigateBack({
  delta: 2
})

---

---

生命周期

生命周期(Life Cycle)是指一个对象从创建->运行->销毁的整个阶段，强调的是一个时间段；小程序运行的过程也是有生命周期，小程序的启动表示生命周期的开始、小程序的关闭表示生命周期的结束，中间小程序运行的过程就是小程序的生命周期。

生命周期分类

在小程序中，生命周期分为两类，分别是：

应用生命周期：特指小程序从启动 -> 运行 -> 销毁的过程

页面生命周期：特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

其中，页面的生命周期范围比较小，应用程序的生命周期范围比较大。

生命周期函数

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如：页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

 生命周期函数分类

小程序中的生命周期分为两类，分别是：

应用生命周期函数：特指小程序从启动 -> 允许 -> 销毁期间依次调用的那些函数

小程序的应用生命周期函数需要在 app.js 中进行声明，代码如下：

// app.js

App({

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

  onLaunch: function () {

  

  },

  //当小程序启动，或从后台进入前台显示，会触发 onShow

  onShow: function (options) {

  

  },

  //当小程序从前台进入后台，会触发 onHide

  onHide: function () {

  

  }

})

页面生命周期函数：特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数

小程序的页面生命周期需要在页面的.js文件中进行声明

//页面.js文件

Page({

    onLoad  : function(options){ }, //监听页面加载，一个页面只调用一次

    onShow  : function() { },       //监听页面显示

    onReady : function() { },       //监听页面初次渲染完成，一个页面只调用一次

    onHide  : function() { },       //监听页面隐藏

    onUnload: function() { }        //监听页面卸载，一个页面只调用一次

})