工作中遇到的问题

1. iOS 和 Android 平台上 new Date() 时间格式的差异

在 iOS 和 Android 平台上，new Date() 方法接受的时间格式是不同的。iOS 平台上接受的格式是 "2024/01/24"，而 Android 平台上则可以接受 "2024-01-24" 和 "2024/01/24" 这两种格式。如果在 iOS 平台上使用 "2024-01-24" 这种格式，会返回 "Invalid Date"，这可能会在格式化时间时造成问题。因此，如果你的代码需要在多平台上运行，建议统一使用 "2024/01/24" 这种格式。

以下是一个示例，展示了如何将日期字符串格式化为 iOS 平台所接受的格式，并将其转换为自定义的日期和时间格式：

const dateStr = '2024-01-24';
const formattedDateStr = dateStr.replace(/-/g, '/');
const date = new Date(formattedDateStr);

function convertToCustomFormat(dateString) {
  // 如果日期字符串为空，则直接返回
  if (!dateString) return;

  // 将日期字符串中的连字符替换为斜杠
  const date = new Date(dateString.replace(/-/g, '/'));
  
  // 定义月份的数组
  const months = ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'];
  
  // 获取日期、小时和分钟，并确保它们总是两位数
  const day = ('0' + date.getDate()).slice(-2);
  const hour = ('0' + date.getHours()).slice(-2);
  const minute = ('0' + date.getMinutes()).slice(-2);
  
  // 返回自定义的日期和时间格式
  return `${months[date.getMonth()]}${day}日 ${hour}:${minute}`;
}

2. 移动端开发：iOS 机制与浏览器缓存问题

问题描述

在移动端开发中，页面逻辑涉及到通过链接跳转页面，然后点击浏览器导航回退。此时，上级页面created、mounted不会重新加载，而是直接读取浏览器缓存，导致一些失效的信息依然显示在页面上。这个问题主要出现在 iPhone 和部分 Android 内置浏览器（如 vivo nex、华为荣耀手机）。

原因分析

这个问题的根源在于浏览器的“往返缓存（Back-Forward Cache，简称 bfcache）”特性。bfcache 是 Firefox 提出的一种缓存机制，用于加快用户在点击浏览器前进或后退按钮时的速度。虽然 Chrome 放弃了 bfcache，但 iOS（webkit）的微信浏览器、Safari 浏览器以及部分 Android 的内置浏览器（webkit）仍然支持。bfcache 会将离开页面时的 DOM 和 JS 状态全部保存下来，也就是说，整个页面会被保存在页面的缓存中。

解决方案

首先，我们可能会想到 onload 事件，但是从浏览器缓存中读取页面时不会触发 onload 事件。此时，我们可以使用 onpageshow 事件，它会在每次加载页面时触发。无论页面是否来自 bfcache，都会触发 onpageshow 事件。我们可以使用 PageTransitionEvent 对象的 persisted 属性来判断页面是否从浏览器的缓存中读取。

window.onpageshow = function (e) {
  if (e.persisted) {
    // 如果页面是从缓存中读取的
    // 执行逻辑...
  } else {
    // ...
  }
}