小程序踩坑系列3——小程序退出后扫码再进入，“外部”代码不会再次执行

2023-11-28 08:21:27

小程序退出后再次扫码进入，只会执行生命周期函数里的代码，“外部”代码不会再执行。在我们的项目里，我们会将一部分本地变量不写在小程序 pageConfig 的 data 中，而直接在文件头进行声明。这样是为了减少 data 的大小，加快页面渲染速度。但这也无意中带来了新问题，让我来告诉你为什么。

问题

我们在项目中有一个页面，在这个页面中，我们使用了一个本地变量 count 来记录用户点击按钮的次数。我们把这个变量声明在文件头，而不是在 data 中。

// page.js
let count = 0;

Page({
  data: {
    // ...其他数据
  },

  onLoad() {
    console.log(count); // 输出 0
  },

  onClick() {
    count++;
    console.log(count); // 输出 1
  }
});

当用户第一次进入这个页面时，count 的值为 0，因为我们在 onLoad 函数中输出了它的值。然后用户点击按钮，count 的值加 1，并在控制台输出 1。

但是，如果用户退出这个页面，然后再次扫码进入，count 的值不会被重置为 0。这是因为小程序退出后，所有非生命周期函数中的代码都不会再执行，包括文件头的变量声明。

// page.js
// count 的值不会被重置为 0
let count = 0;

Page({
  data: {
    // ...其他数据
  },

  onLoad() {
    console.log(count); // 输出 1
  },

  onClick() {
    count++;
    console.log(count); // 输出 2
  }
});

现在，当用户再次进入这个页面时，count 的值是 1，而不是 0。这可能会导致一些问题，例如用户点击按钮后，count 的值不是从 0 开始计数，而是从 1 开始计数。

解决方案

为了避免这个问题，我们可以将本地变量声明在 data 中。

// page.js
Page({
  data: {
    count: 0
  },

  onLoad() {
    console.log(this.data.count); // 输出 0
  },

  onClick() {
    this.setData({
      count: this.data.count + 1
    });

    console.log(this.data.count); // 输出 1
  }
});