onShow 生命周期被错误的重复调用
发布于 6 年前 作者 zgu 4331 次浏览 来自 问答
  • 当前 Bug 的表现（可附上截图）

小程序首页 onShow 生命周期 在保持小程序面板不关闭的情况下会被调用两次

  • 预期表现

onShow 被调用一次

  • 复现路径

  1. 下拉小程序面板，点击进入小程序（onShow输出1次，正确）

  2. 点击右上角关闭小程序

  3. 保持小程序下拉面板，再次点进小程序（onShow 输出2次，不正确）

    小程序下拉面板指的时下图红框内部分，个人测试发现一旦收起该面板重新下拉再进入 onShow 能够正常被调用1次


  4. ）

  • 提供一个最简复现 Demo

Page({

    onShow(){

        console.log(“onShow”);

    }

})

3 回复

看你说的，发现我们也是的，onSHow和onHide都调用了2次

我也遇到相同的问题了

App.js里的onShow也一样有相同的问题

暂时只能自己设个标识来侦测onShow是否已经被调用过了

以下这个办法是不得已的办法，但是如果要在每个Page里都做这个判断的话问题就严重了，得重写Page，用Component来替代，但是那又牵扯出更多的问题。

onShow: function() {

 console.log(this.globalData.onShow); // 第一次被调用返回为False，第二次错误被调用返回为True

  if (!this.globalData.onShow) {
    // execute code
    this.globalData.onShow = true;
  }
},
 
onHide: function() {
  this.globalData.onShow = false;
}

找到一个应该可以暂时使用的方法，也不影响已经定义的onShow和onHide

// custom-page.js

let customPage = function(options) {

   options.onShowFlag = false;


    let onShowFunction = options.onShow; // 这里自行做错误监测
    options.onShow = function() {
        if (!this.onShowFlag) {
            onShowFunction.call(this, arguments);
            this.onShowFlag = true;
        }
    };
 
    let onHideFunction = options.onHide;  // 这里自行做错误监测
    options.onHide = function() {
        this.onShowFlag = false;
        onHideFunction.call(this, arguments);
    };   
 
    return options;
}
 
// page
Page(new customPage({
    onShow: function() {},
    onHide: function() {}
}));

希望官方关注一下哈，这种对于需要自动登陆的小程序 会有很大的影响

回到顶部