uni-app生命周期以及路由跳转

生命周期分为应用生命周期、页面生命周期和组件生命周期

一、应用生命周期

应用生命周期只能在App.vue中监听应用
option获取用户进入应用的场景值

在控制台打印出1001场景值

应用生命周期函数
1、onLaunch：初始化完成时触发，获取切后台进入的时候的场景值
语法：

onLaunch: function() {
    console.log('App Launch')
}

此时控制台中打印：App Launch

2、onShow：当uni-app启动，监听用户进入小程序
语法：

onShow: function() {
   console.log('App Show')
}

此时控制台中打印：App Show

3、onHide：监听用户离开小程序
语法：

onHide: function() {
    console.log('App Hide')
}

4、onError：报错时触发
语法：

onError: function() {
 console.log('App Error')
}

5、onUniNViewMessage：监听nvue页面发送的数据

二、页面声明周期

页面生命周期函数
1、onLoad：页面初始化执行并且只执行一次
语法：

onLoad() {
  console.log("页面初始化执行一次 onLoad")
}

页面初始化时控制台中打印：页面初始化执行一次 onLoad

2、onShow：进入页面时执行可以执行多次
语法：

onShow() {
  console.log("页面进入执行 执行多次  onShow")
}

进入页面时控制台中打印

3、onReady：页面加载完毕时执行并且只执行一次
语法：

onReady() {
   console.log("页面加载完毕 执行一次 onRady")
}

控制台中打印

4、onHide：离开页面后执行可以执行多次
语法：

onHide() {
  console.log("页面离开 执行多次 onHide")
}

控制台中打印

5、onUnload：监听页面卸载
6、onResize：监听窗口尺寸变化
7、onPullDownRefresh：监听下拉动作，一般用于下拉刷新
语法：

onPullDownRefresh() {
  console.log("用户执行了下拉动作")
}

控制台中打印

效果：

8、onReachBottom：页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
语法：

onReachBottom(){
   console.log("下拉")
}

在pages.json中设定触发距离 单位是px

控制台在下拉到50px时打印

9、onTabItemTap：监听用户点击TabBar
语法：

onTabItemTap:function(e){
   console.log(e)
}

点击TabBar控制台中打印

10、onShareAppMessage：用户点击右上角分享
语法：

onShareAppMessage(){
  console.log("用户进行了分享")
   return{
       //转发标题
       title:"易烊千玺",
       // 转发的路径
       path:"pages/news/news",
   }
}

效果：

点击转发

控制台中打印

11、onPageScroll：监听页面滚动
语法：

onPageScroll : function(e) {
   console.log("滚动距离为：" + e.scrollTop);
}

scrollTop：页面在垂直方向已滚动的距离
控制台中打印

12、onNavigationBarButtonTap：监听原生标题栏按钮点击事件
13、onBackPress：监听页面返回
14、onNavigationBarSearchInputChanged：监听原生标题栏搜索输入框输入内容变化事件
15、onNavigationBarSearchInputConfirmed：监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
16、onNavigationBarSearchInputClicked：监听原生标题栏搜索输入框点击事件

三、组件生命周期

1、beforeCreate：在实例初始化之后被调用
2、created：在实例创建完成后被立即调用
3、beforeMount：在挂载开始之前被调用 相关的 render 函数首次被调用 静态数据可以挂载模板不会重新渲染
语法：

beforeMount() {
   console.log("在挂载开始之前被调用")
}

进入到该组件所在的页面，控制台中打印

4、mounted：挂载到示例上去之后调用
语法：

mounted() {
    console.log("挂载到实例上去之后调用");
    this.$nextTick(function(){
        // 渲染完毕
        console.log("ok")
    })
}

控制台中打印

5、beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前，因为只有初次渲染会在服务端进行，所以在服务器端渲染期间不被调用
6、updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子，并且在服务器端渲染期间不被调用。
7、beforeDestroy：实例销毁之前调用。在服务器端渲染期间不被调用。
8、destroyed：vue实例销毁后调用 在服务器端渲染期间不被调用。
完整代码
页面

<template>
   <view class="content">
       <test />  <!-- 调用组件 -->
    </view>
</template>
<script>
import test from "../../components/test.vue" //引入组件
export default {
    data() {
        return {
            title: 'Hello'
    }
},
components:{
    test //注册组件
}
}
</script>

组件

<script>
    export default {
        data() {
            return {
                say:"Mesa"
            };
        },
        props:["msg"],
        beforeMount() {
            console.log("在挂载开始之前被调用")
        },
        mounted() {
            console.log("挂载到实例上去之后调用");
            this.$nextTick(function(){
                // 渲染完毕
                console.log("ok")
            })
        },
        methods:{
            test(){
                // this.$emit("testShowName",{name:"Hello"})
                uni.$emit("testEmit",{name:"green"})
            }
        }
    }
</script>

四、路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。
1、uni.navigateTo：跳转时保留老页面，一般用于返回

uni.navigateTo({
      url:"../one/one?name=Msea"
 })

2、uni.reLaunch ：关闭所有页面，打开到应用内的某个页面

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

export default {
    onLoad: function (option) {
    console.log(option.id);
	}
}

3、uni.switchTab ：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面（系统配置的tabbar里注册的页面）

uni.switchTab({
      url:"../news/news"
 })

4、uni.redirectTo ：关闭当前页面，跳转新页面（系统配置的tabbar里没有注册的页面）
5、uni.navigateBack： 关闭当前页面，返回上一页面或多级页面

toPath(){
      uni.redirectTo({
            url:"../two/two"
        })
 },
 goBack(){
      uni.navigateBack()
  }

注意：uni.redirectTo最好和uni.navigateBack结合使用