uni-app的生命周期和路由配置

一、uni-app生命周期

1、应用生命周期

uni-app的应用生命周期仅可在App.vue中监听，包括onLaunch、onShow、onHide等函数 。

• onLaunch函数在uni-app初始化完成时触发(全局只触发一次)；
• onShow函数在页面显示时触发；
• onHide函数在页面隐藏时触发 。

2、页面生命周期

uni-app的页面生命周期包括：onLoad、onShow、onReady、onHide、onUnload 和 onResize 。

• onLoad函数在页面加载时触发；
• onShow函数在页面显示时触发；
• onReady函数在页面渲染完成后触发；
• onHide函数在页面隐藏时触发；
• onUnload函数在页面卸载时触发；
• onResize函数在页面大小改变时触发。

二、路由配置

        uni-app的页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在 app.json 中配置页面路由一样。所以 uni-app 的路由用法与 Vue Router 不同，如仍希望采用 Vue Router 方式管理路由，可在插件市场搜索 Vue-Router 。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情页"
      }
    }
  ],
  "tabBar": {
    "color": "#999",
    "selectedColor": "#f00",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/detail/detail",
        "text": "详情页",
        "iconPath": "static/tabbar/detail.png",
        "selectedIconPath": "static/tabbar/detail-active.png"
      }
    ]
  }
}

1、获取当前页面栈

在uni-app中，可以使用getCurrentPages()方法获取当前页面栈。该方法返回一个数组，包含了当前页面栈中的所有页面对象。每个页面对象都包含以下属性：

• route:页面路由路径
• path:页面路径
• query:页面参数
• options:页面配置项
• meta:页面元数据

const pages = getCurrentPages(); // 获取当前页面栈
const currentPage = pages[pages.length - 1]; // 获取当前页面对象
console.log(currentPage); // 输出当前页面对象信息

2、路由传参与接收

        在起始页面跳转到test.vue页面并传递参数

uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

        在test.vue页面接受参数 

export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

3、小程序路由分包配置

        因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。所谓的主包，即放置默认启动页面及 TabBar页面，而分包则是根据pages.json的配置进行划分。

        在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示，此时终端界面会有等待提示。

{
  "subPackages": [
    {
      "root": "subpkgA", // 分包 A 的根目录，必须是绝对路径。如果没有设置，则默认为 pages.json 所在目录的子目录 subpkgA。
      "pages": [
        {
          "path": "page1", // 在分包 A 中的页面路径。如果没有设置，则默认为当前页面的同级目录下的 page1.vue。
        },
        {
          "path": "page2", // 在分包 A 中的页面路径。如果没有设置，则默认为当前页面的同级目录下的 page2.vue。
        }
      ]
    },
    {
      "root": "subpkgB", // 分包 B 的根目录
      "pages": [
        {
          "path": "page3", // 在分包 B 中的页面路径。
        },
        {
          "path": "page4", // 在分包 B 中的页面路径。
        }
      ]
    }
  ]
}

三、页面跳转

uni-app常用的页面跳转方法： 

• uni.navigateTo(Object): 保留当前页面，跳转到应用内的某个页面；
• uni.navigateBack: 返回上一个页面；
• uni.redirectTo(Object): 关闭当前页面，跳转到应用内的某个页面；
• uni.reLaunch(Object): 关闭所有页面，打开到应用内的某个页面；
• uni.switchTab(Object): 跳转到tabBar页面。