uni-app实战之路-生命周期

何处锦绣不灰堆

发布于 2020-05-29 14:57:28

1.4K0

发布于 2020-05-29 14:57:28

写在前面

首先说一下什么是生命周期，不管是vue还是别的什么，生命周期说人话就是页面从初始化到销毁的整个过程被称为生命周期，vue的生命周期的话我帖子之前也没写过，也不知道整天做什么呢，这都不写，一样吧，趁这次整理uni-app的机会将vue的生命周期也简单的说一下，我只能说每一个环节适合做什么，具体内部的实现原理，我这里怕是误导别人，所以就不说了，我们重点按照uni-app的官网来说，毕竟是边学边记录的。

uni-app的生命周期

uni-app生命周期

我们没有进行描述之前首先要明白的是，uni-app的生命周期是氛围三部分的，分别是应用的生命周期、页面的生命周期和组件的生命周期，那么分别对应项目中哪一个文件，下面会详细的说明，然后具体有哪些用，下面也会详细描述。

应用生命周期

应用的生命周期说的就是我们的项目中的APP.vue的文件，主要包括下面几个阶段：

onLaunch 这个是初始化完成的时候触发，我们进行一个简单的测试就可以看的出来：

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

这个option参数你可以不加，加上做什么呢？我们可以知道我们小程序是怎么进来的，看截图的代码：

>[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zEcp3Vo0-1584802579658)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p159)]

这里的scene就是代表下面的代码：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k7PuSvVF-1584802579659)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p160)]

也就是我们说的场景值。

onShow

这里onshow就很奇怪了，和onLaunch是一样的，但是为什么还有有一个onshow呢？不要着急，当我们第一次启动小程序以后，确实可以看到，这里是两个状态同时显示的：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6r55Xnbe-1584802579660)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p161)]

当时当我们点击且后台的时候再看：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iCUlBmoH-1584802579661)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p162)]

是不是发现只有onshow会出现，obLaunch并不会出现了！

调用时机：小程序启动，或从后台进入前台显示时触发。如果想要在小程序每次进入到前台时都执行一些事情，那么可以将代码放在这个里面。比如一些实时动态更新的数据，用户每次进来都要从服务器更新，那么我们就可以在这个里面做。
onHide uni-app从前台进入后台，说人话就是看代码：
调用时机：微信自身被切换到后台或者小程序暂时被切换到后台，可以在这个方法中共做一些数据的保存。小程序从前台进入后台时触发。
onError uni-app脚本出错或者api调用出错的时候，没代码—

页面生命周期

页面的生命周期说的是我们的vue文件，我数了一下，一共有16个生命周期函数，这里如果一个一个的写，可能比较浪费时间，写几个比较常用的吧！我们新建一个页面，里面啥都不做，只做生命周期的演示：test_lifecycle.vue

onLoad 只有第一次进来的时候才会执行

onLoad() {
			console.info("onLoad")
		},

结果：onLoad
onShow 页面只要切换了就会执行，会执行多次，根据你的页面切换

onShow() {
			console.info("onShow")
		},

结果：

- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kmda1ORl-1584802579662)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p163)]

这里可以看的出来，这里只执行了一次的onLoad，但是每次我切换的时候onShow都会被执行

onReady 这个很有意思，我理解的是vue里面的created和mounted的关系，这个是页面挂载技术执行的，有待考究

onReady(){
			console.info("onReady")
		},

结果：

- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HqKngfjt-1584802579662)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p164)]

onHide 页面隐藏的时候执行，同样会被执行多次

onHide() {
			console.info("onHide")
		},

结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pe7Mwqv3-1584802579663)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p165)]

onPullDownRefresh 这个很实用，下拉刷新，这个如果不提供的话，我们自己写的话，就比较恶心了，之前写jquery的时候就写过这个，确实恶心，这个封装好的确实不错，但是这里需要注意几点：

onPullDownRefresh() {
			console.info("onPullDownRefresh")
		},

直接写是不行的，我们需要配置一个json，看文档

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"enablePullDownRefresh" : true
	}

全局样式里面的enablePullDownRefresh 设置为true，这样我们就可以直接进行下拉刷新了
效果：

- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PXSxGD4D-1584802579664)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p166)]

注意：这里如果直接全局设置的话，那么我们的每一个页面都会有这个下拉的功能，只是说不会触发该页面的函数，因为函数是独立的，那么如果我们不需要每一个都有的话，就可以直接在对应的页面下面进行设置该选项：比如说我们首页不需要下拉刷新的功能.有点意思

- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FE7ePQx1-1584802579664)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p167)]

onTabItemTap 切换tab的时候触发

onTabItemTap() {
			console.info("onTabItemTap")
		},
onTabItemTap(el) {
//当然，你可以直接打印出来当前页面的tab属性
			console.info(el)
		},

结果：

- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kBzsXz9K-1584802579665)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p168)]

onShareAppMessage 分享的时候触发

onShareAppMessage() {
			console.info("onShareAppMessage")
		},

-结果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wGqPikYE-1584802579666)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p169)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-trOQwBjl-1584802579666)(evernotecid://72A0867B-C2C9-4394-90F0-D1AD032DA4AC/appyinxiangcom/24072006/ENResource/p170)]

注意：这里是可以设置我们分享的一些东西的

onShareAppMessage() {
			console.info("onShareAppMessage")
			return {
				title : '惊天大新闻',
				path : 'pages/index/index',
			    imageUrl : 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1584709020708&di=f416dcf538c30a81955753ff6f7dd865&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F78%2F52%2F01200000123847134434529793168.jpg'
			}
		},