收藏
回答

onShow 生命周期被错误的重复调用

框架类型 问题类型 终端类型 微信版本 基础库版本
小程序 Bug 客户端 7.0.0.0 2.4.4

- 当前 Bug 的表现(可附上截图)

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


- 预期表现

onShow 被调用一次


- 复现路径

  1. 下拉小程序面板,点击进入小程序(onShow输出1次,正确)

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

  3. 保持小程序下拉面板,再次点进小程序(onShow 输出2次,不正确)

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




- 提供一个最简复现 Demo

Page({

    onShow(){

        console.log("onShow");

    }

})


回答关注问题邀请回答
收藏

4 个回答

  • 方跃明
    方跃明
    2020-09-19

    这个问题到目前还没被解决吗?刷新必然重复调用,对于需要授权认证的页面来说是噩梦啊,第一次onLuanch未完成就调用页面onShow,第二次onLuanch完成后又调用一次页面的onShow。非刷新不出这个问题。

    2020-09-19
    有用
    回复
  • 2019-01-09

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

    2019-01-09
    有用
    回复 2
    • 洒一地阳光
      洒一地阳光
      2019-01-09

      往前翻了下,很久之前就有这个bug了。。。。。

      2019-01-09
      回复
    • Simon ~ Bubble Popping
      Simon ~ Bubble Popping
      2019-01-10

      这个问题不是Page而已,是从App.js开始就被两次调用,然后延伸到Page的onShow被调用两次,这个问题变得在任何onShow里要侦测重复调用

      2019-01-10
      回复
  • 洒一地阳光
    洒一地阳光
    2019-01-09

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

    2019-01-09
    有用
    回复
  • Simon ~ Bubble Popping
    Simon ~ Bubble Popping
    2019-01-09

    我也遇到相同的问题了

    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() {}
    }));


    2019-01-09
    有用
    回复
登录 后发表内容