CrossPage.js 是一个简单的页面间通信模块，包括 CrossPageExchangeItem 类和 CrossPageExchange 类。
CrossPageExchangeItem 类用于创建一个新的通信项 exchangeItem，CrossPageExchange 类拥有 createItem/getItem/deleteItem 静态方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

/**
 * 简单的页面间通信的模块
 */

class CrossPageExchangeItem {
  constructor(id) {
    this.id = id;
    this.setDataHandler = null;
    this.cancelHandler = null;
  }
  getId() {
    return this.id;
  }

  onSetData(cb) {
    this.setDataHandler = cb;
  }

  setData(data) {
    if (typeof this.setDataHandler === 'function') {
      this.setDataHandler(data);
    }
  }

  onCancel(cb) {
    this.cancelHandler = cb;
  }

  cancel() {
    if (typeof this.cancelHandler === 'function') {
      this.cancelHandler();
    }
  }

  remove() {
    this.setDataHandler = null;
    CrossPageExchange.deleteItem(this.id);
  }
}

class CrossPageExchange {
  static latestId = 0;
  static items = new Object(null);

  static createItem() {
    let newItem = new CrossPageExchangeItem(this.latestId);
    this.items[this.latestId] = newItem;
    this.latestId++;

    return newItem;
  }

  static getItem(id) {
    return this.items[id] || null;
  }

  static deleteItem(id) {
    delete this.items[id];
  }
}

module.exports = {
  CrossPageExchange,
};

WaitObject 类，它通过 Promise 提供了一种等待的机制。
wait 方法是一个异步函数，它等待 this.p 的状态被解决（resolved）。通过 await this.p ，函数回暂停执行，直到 this.p 被解决，然后返回被解决的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

class WaitObject {
  constructor() {
    this.p = new Promise((resolve, reject) => {
      this.resolve = resolve;
      this.reject = reject;
    });
  }

  async wait() {
    return await this.p;
  }
}

module.exports = {
  WaitObject,
};

小程序异步模型

一直觉得我主管浩哥是个很强的技术大佬，正好他让我接手了一个小程序项目，那么就来学习一下他写的代码吧！

小程序

data 应只包括渲染相关的数据，所以这里如果只是为了保存定时器 ID，没必要使用 setData

建议将定时器 ID 保存在 this 上即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Page({
  timerId: null,

  onLoad: function () {
    // 初始化定时器
    this.timerId = setInterval(() => {
      console.log('定时器在运行');
    }, 1000);
  },

  onUnload: function () {
    const { timerId } = this;
    if (timerId) {
      // 清除定时器
      clearInterval(timerId);

      // 将定时器ID设置为null
      this.timerId = null;
    }
  },
});

wx.request 封装

为什么执行reject()之后，还要执行 resolve()？

看到这里时，我有点疑惑，为什么执行reject()之后，还要执行 resolve()？
执行reject()之后，Promise 状态已经被固定了，再执行resolve()也没有意义。打了个断点（**f11 **step into next function call ）看下，发现resolve(res)并没有执行。

为了不造成混淆，建议在res.data.code !== 0代码块末尾加个return，或者在reject()前面加个return

错误处理：通过自定义的错误类 ErrorRequest、ErrorBiz 和 ErrorAuth 对不同类型的错误进行了分类

看下控制台：

并没有提示错误信息输出。父类构造函数Error起到了什么作用？

点击 Error，如图所示：

可以看到构造函数ErrorConstructor接收一个 message 参数，那我们把接口的错误消息传递进去看下，修改下代码

效果如下：

修改过后在控制台展示了更详细的错误信息。

将后端的数据复制给 this.data this.data = data这点挺好的，这样，在捕获到错误之后，可以通过error.data来获取后端给的信息。

但是我没看到他是怎么使用的，所以我在错误类上加了个获取 this.data 的方法，方便在业务层面获取到：如下

1
2
3
4
5
6

class ErrorBiz extends ErrorRequest {
  // 添加一个方法，用于获取业务错误信息
  getBizErrorData() {
    return this.data;
  }
}

业务中使用：

1
2
3
4
5

try {
  const age = await api.getPhotoCheckAge(phoneUrl);
} catch (err) {
  const bizErrorData = err.getBizErrorData();
}

css

指向特定元素，通过附加类的预选元素的选择器，中间没有空格。如.title.active

适配刘海屏设备安全区域，保证内容不被遮挡。

1. padding-bottom: env(safe-area-inset-bottom);：
   • env() 函数是 CSS 中的一个环境变量函数，用于获取设备环境变量的值。
   • safe-area-inset-bottom 表示底部安全区域的大小。
   • 这行样式代码的作用是设置底部内边距为底部安全区域的大小。
2. padding-bottom: constant(safe-area-inset-bottom);：
   • constant() 函数是 CSS 中的一个函数，用于获取一个常量的值。
   • safe-area-inset-bottom 同样表示底部安全区域的大小。
   • 这行样式代码的作用也是设置底部内边距为底部安全区域的大小，但使用了 constant 函数。

任务进度条
后端提供任务总时长，过了多少时间除以总时间就可以算出当前进度，Math.round((Date.now() - startTime) / totalTime * 100)

Js

列表滚动加载，判断是否已全部加载结束
const isLoadEnd = respList.length < this.data.pageSize，也就说，如果本次请求响应的条数小于本次请求的条数，就可以表示已全部加载结束

不需要后端给你总页数pages/total，再根据const isLoadEnd = current < pages 或者 const isLoadEnd = showList.length < total判断是否已全部加载结束