2022-09-06 uni-app学习笔记(三) uni-app的生命周期:常用应用生命周期和页面生命周期以及示例

1.uniapp生命周期的引入

学习一个工具的核心目的是为了解决核心业务的逻辑问题,让其在合适的时机做合适的事情
即,在页面运行过程中,各个阶段的会对函数就是页面中的时机,也称作"生命周期钩子函数"

uniapp的生命周期完整支持vue的生命周期,同时新增了uniapp自己的应用生命周期和页面生命周期

2.应用生命周期

官网位置:https://uniapp.dcloud.net.cn/collocation/App.html#applifecycle

3.页面生命周期

官网位置:https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle

4.应用生命周期的应用示例:onPageNotFound

4.1.创建404.vue页面:pages>创建页面>404.vue

在App.vue中添加应用生命周期钩子函数onPageNotFound
应用生命周期在App.vue中设置

onPageNotFound:function(){
	uni.navigateTo({
		url:"./pages/404/404"
	})
}

*此时page.json会自动更新404.vue的路径

,{
       "path" : "pages/404/404",
       "style" :                                                                                    
       {
           "navigationBarTitleText": "页面不存在",//修改标题文本
           "enablePullDownRefresh": false
       }      
   }

4.2.运行到小程序并修改成错误路径

结果:自动跳转到404.vue

说明成功触发了应用生命周期onPageNotFound

5.页面生命周期的应用示例

5.1.钩子函数onLoad:监听页面加载

404.vue:实现当前页面1s后自动跳转回首页index

onLoad(){
	const timer=setTimeout(()=>{
		clearTimeout(timer);
		uni.navigateTo({
			/*此处路径不能以点开始,多这个"."将导致跳转失败!"*/
			// url:"./pages/index/index"
			url:"/pages/index/index"
		});
	},1000);
}

5.2.钩子函数onPullDownRefresh:监听用户下拉动作，一般用于下拉刷新

• 先在pages.json中配置index路径,使之可以下拉

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "uni-app",
		"enablePullDownRefresh":true//可以下拉
	}
}

• 然后在index.vue中写钩子函数onPullDownRefresh

页面生命周期在index.vue中设置

onPullDownRefresh() {
	console.log("页面下拉了...")
},

• 运行>在小程序中运行,在微信开发者平台中下拉页面,触发钩子函数
  

6.总结

uniapp的生命周期分为应用生命周期,和页面生命周期,

应用生命周期的例子onPageNotFound:
先在pages文件夹中新建一个404文件,然后在pages.json中会自动创建该文件的路径
在App.vue中写onpagenotfound的方法,让它1s后自动跳转到404页面
使用到了uni.navigateTo()用于页面跳转,url中的路径不要写成"./pages/404/404",多这个点会导致跳转失败,且不报错

在微信开发者平台上编译是从"普通编译"到"错误编译",即让它故意报错
从而触发上述应用生命周期钩子函数,报错后会自动跳转到404.vue(里面随便写点东西)

页面生命周期的例子onLoad,还有一个自动下拉时触发的页面生命周期
这个生命周期是写在index.vue里面的,直接在data和methods同级别的花括号中接着写onLoad即可

页面生命周期例子onPullDownRefresh,需要在pages.json中把index路径的enablePullDownRefresh"=true
然后就可以调试了,比如在钩子函数中console.log了一个语句,下拉时就会输出该语句

7.知识点

uniapp项目文件介绍

• pages.json:对uniapp进行全局配置,决定页面文件的路径,窗口样式,原生的导航栏,底部的原生tabbar等等

...
{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "uni-app",
		"enablePullDownRefresh":true//可以下拉
	}
}

• App.vue是根组件,所有页面都是在此处切换,是页面入口文件,在这里调用应用生命周期钩子函数

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