基本介绍

onShow、onLoad与onReady都是小程序页面生命周期函数。

onLoad 在页面加载时调用，仅一次；

onShow页面显示/切入前台时触发，两个生命周期非阻塞式调用。

onReady 是页面初始化数据已经完成后调用的，并不意味着onLoad和onShow执行完毕。

调用顺序是onLoad > onShow > onReady

根据对应的执行机制，我们预期有三种执行的逻辑

A. 页面每次出现都会执行

1. 从其他页面返回
2. 手机锁屏唤醒，重新看到小程序页面
3. 把当前小程序页面重写切换到前台（多任务）

B. 页面加载后只需执行一次（页面第一次载入）

C. 只在页面非第一次执行时才执行（A情况的子集，页面非第一次展示时）

需求与问题

逻辑1：

因为onLoad和onShow是非阻塞执行的，当我们有一个这样的需求：页面载入执行A方法，页面展示执行B、C、D方法时，A需要在BCD之前执行，此时把A放在onLoad中，BCD放在onShow中就无法实现需求

逻辑2：

还有一种需求是：页面第一次执行A，非第一次执行R-A，这里onLoad和onShow并没有非第一次的逻辑，需要手动判断。

一种实践方法

下面是纯粹使用onShow代替onLoad，完成所有逻辑的示例，保证了业务逻辑的执行顺序可控。

options获取使用其他方式代替。

为了保持onShow中逻辑的清晰性，尽量使用EventChannel去替代原本onShow+globalData的逻辑。

data:{
  first: true
},
async onShow(){
   //代替onLoad中的options的获取
   const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;

  this.funD() // C2 页面每次都调用的逻辑
   if(this.data.first){
    this.data.first = false;
    await this.funA(); //A 仅在页面初次调用的逻辑（按需是否阻塞调用）
  }else{
    await this.funB(); //B 仅在页面非初次时调用的逻辑
  }
  await this.funC(); //C1 页面每次都调用的逻辑
}

另外一种使用实践

data:{
  first: true
}
onShow(){
  this.funD() //页面每次都调用的逻辑(仅非阻塞)
  if(!this.data.first){
    this.funC() //仅在页面非初次时调用的逻辑
  }
  await this.funE() //页面每次都调用的逻辑（可阻塞，可非阻塞）
},
onLoad(){
  //仅在页面初次调用的逻辑
   this.funA();
  await this.funB();
}
onReady(){
  this.data.first = false;
}

如有错误，恳请指出。