uniapp小程序组件所在页面的生命周期函数

本文主要是介绍uniapp小程序组件所在页面的生命周期函数，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

最近有一个圣诞节活动需求：浏览除登录之外的任意三个页面，页面出现一个小雪人的浮窗，可点击进入活动页

首先是h5，用的vue，可以直接在app.vue中调用小雪人浮窗组件，并在监测页面跳转watch $route中记录次数（因为要求没那么严格，我就只存在了浏览器缓存）

　<template>　 　　　<div> 　　　　　<keep-alive> 　　　　　　　<router-view v-if="$route.meta.keepAlive"></router-view> 　　　　　</keep-alive> 　　　　　<snowman v-if="open"></snowman> //调用小雪人组件 　　　</div> 　</template>

<script>
　　import snowman from '@/components/nev/snowman.vue　　//引入小雪人浮框组件
　　export default {
　　　　watch: {
   　　　　$route(to, from){
       　　　　if(to.path != '/login' && localStorage.getItem('token') && this.status == 0) {
           　　　　this.count = localStorage.getItem('snowCount')
           　　　　this.count++
           　　　　if(this.count == 3) {
           　　　　　　this.open = true
               　　　　this.count = 0
               　　}else {
                  　　this.open = false
               　　}
               　　localStorage.setItem('snowCount',this.count)
           　　}
       　　}
　　　　}
　　}
</script>

可以看出h5就很轻松的完成了，但是轮到小程序了，小程序用的uniapp，uniapp里"App.vue本身不是页面，这里不能编写视图元素。"，这一看，完了呀，那往哪写...因为每个页面都有机会显示小雪人所以相当于每个页面都要调用这个组件，这个问题我研究了两天，发现了一个方法，用vue-template-compiler把组件名放在每个页面（源码），我一顿操作之后页面一直报错，下午就要测，第二天就要上线，我只能先搁置一下，还是用了那个笨办法，先把组件设置为全局组件直接调用，用到的是uniapp的easycom，只要匹配的到的组件都会自动成为全局组件，然后每个页面调用小雪人

//在page.json中
"easycom": {
     "^u-(.*)": "@/components/u-$1/u-$1.vue" // 匹配components目录内的vue文件
 }

然后一开始写的页面计数是在组件中mounted里面，但是我发现只有第一次打开页面会访问到mounted，组件中平常用的created那些生命周期都不行，当时啥也不知道，就觉得这下更糟糕了，每个页面都已经加了一行代码了，包已经快撑不住了，要在每个页面的mounted里面计算次数，然后问了大佬，大佬说有一个lifetimas可以试试(如何转换为uniapp)，我打开一看好像发现了宝藏，这个可以访问组件所在页面的生命周期函数

onPageShow() {　　this.count = uni.getStorageSync('snowcount');
　　this.count++
　　if(this.count == 3) {
　　　　this.isshow = true
　　　　this.count = 0
　　}else {
　　　　this.isshow = false
　　}
　　uni.setStorageSync('snowcount', this.count);
}

凑合上线吧...

要是各位大神有其他解决方法，麻烦一定留言告诉我凹，求求了～

这篇关于uniapp小程序组件所在页面的生命周期函数的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！