小程序开发第四弹: uni-app 必备知识

发表时间：2021-1-5

发布人：葵宇科技

浏览次数：50

生命周期

在了解组件之前 , 先来看下生命周期, 学过 vue 或者 react 同学肯定不会陌生这个概念, 简单概括就是小程序从创建到销毁的阶段所经历的钩子函数 ;

小程序的生命周期分为三种 , 「应用生命周期」 「页面生命周期」 「组件生命周期」

复杂的咱先不说 , 遇到情况直接翻文档 ; 说说简单的先

应用生命周期

值得注意的是应用的生命周期只在App.vue 中能够有效使用 ; 其他页面无效

<script>
export default {
 name: 'App',
 onLaunch() { // 全局只会触发一次
  console.log('App - 初始化完成时调用');
 },
 onShow() {
  console.log('App - 页面启动时, 或者应用后台进入前台时调用')
 },
 onHide() {
  console.log('App - 页面从前台进入后台时调用')
 }
}
</script>
复制代码

可以看出触发了 onLaunch onShow 但是没有触发 onHide 大家可以根据图中标注的红色位置, 手动触发 onHide 钩子 ;

页面生命周期

对应你工程下的 pages 中的每一个页面的钩子, 这个钩子还是比较多的, 暂时也只看几个常用的, 个人认为学习先入门, 做项目的时候再抠抠细节 , 毕竟不可能一个演示功能把所有的细节都带上 ;

onLoad : 监听页面加载 ; 可以传递参数 , 参数是上个页面传递的参数
onShow : 监听页面显示 , 页面「每次」出现在屏幕时都会触发
onReady : 监听页面初次渲染完成
onHide : 页面隐藏监听
onUnload : 页面监听卸载

这次的示例代码有些许不同 , 首先当页面首次加载的时候, 页面的生命周期肯定是和我的书写顺序是一致的 , 但是他们要销毁或者切换页面时呢 ? 这里我大致测试了三种情况

切后台
切入时先调用page的 onHide 在调用 app 的 onHide
切出时先调用 app 的 onShow 在调用 page 的 onShow

有缓存跳转 navigator
跳转时进入 onHide
回退到当前页面 onShow

没有缓存跳转 redirect
跳转时 onUnload
再次进入时, onLoad onShow onReady

<template>
 <view>
  <button type="default" @click="clickHandle">navigatorTo</button>
  <button type="primary" @click="clickHandle1">redirectTo</button>
 </view>
</template>

<script>
 export default {
  onLoad() {
   console.log('page - 页面加载');
  },
  onShow() {
   console.log('page - 页面显示');
  },
  onReady() {
   console.log('page - 页面初次渲染完成');
  },
  onHide() {
   console.log('page - 页面隐藏');
  },
  onUnload() {
   console.log('page - 页面卸载');
  },
  methods: {
   clickHandle() {
    uni.navigateTo({
     url: './new_file'
    })
   },
   clickHandle1() {
    uni.redirectTo({
     url: './new_file'
    })
   }
  }
 }
</script>
复制代码