微信小程序中，import 两种路径引入方式的区别和使用场景

在微信小程序中，import 语句用于引入模块，路径的写法会影响模块的正确导入。以下是两种路径引入方式的区别和使用场景：

1、 相对路径 (import { formatTimestamp } from “…/…/…/utils/util”)

解释

• 相对路径是相对于当前文件所在目录的路径。
• …/…/…/utils/util 表示从当前文件向上移动三个目录，然后进入 utils 目录，最后引入 util.js 文件。

假设你的文件结构如下

miniprogram/
├── pages/
│ ├── message/
│ │ ├── message-list/
│ │ │ ├── message-list.js
│ │ │ └── …/…/…/utils/util.js
│ └── app.js

在 message-list/message-list.js 文件中，你需要向上移动三层目录才能找到 utils/util.js 文件。因此，使用相对路径 …/…/…/utils/util 是合适的。

优点

直观地反映了文件系统中的实际路径。
可以在多级目录结构中精确控制路径。

缺点

如果目录结构变化，路径可能需要相应地调整。
相对路径较长时，可能会变得难以维护。

2、绝对路径 (import { formatTimestamp } from “miniprogram/utils/util”😉

解释

• 绝对路径是从项目根目录或指定的根路径开始的路径。
• miniprogram/utils/util 表示从项目的根目录开始查找 miniprogram/utils/util.js 文件。

如果你的项目配置了绝对路径，且 miniprogram 是根目录下的一个目录，那么 import { formatTimestamp } from “miniprogram/utils/util”; 是有效的。

优点

路径更简洁，尤其是当文件层级较深时。
更易于维护和阅读。

缺点

– 需要确保项目配置支持绝对路径解析。微信小程序默认不支持绝对路径，需要配置 jsconfig.json 或 tsconfig.json 来支持这种路径。
– 如果项目结构发生变化，可能需要重新配置路径映射。
配置绝对路径（在微信小程序中）
微信小程序默认不支持绝对路径。如果你想使用绝对路径，可以在 jsconfig.json 或 tsconfig.json 中配置路径别名（如果你的开发工具支持）。

jsconfig.json

{
“compilerOptions”: {
“baseUrl”: “miniprogram”, // 设置根目录
“paths”: {
“utils/": ["utils/”]
}
}
}

3、总结

• 相对路径（例如 …/…/…/utils/util）从当前文件的位置计算，适用于大多数项目结构。
• 绝对路径（例如 miniprogram/utils/util）从项目根目录计算，简洁且易于维护，但需要配置支持。

在使用绝对路径时，确保你的开发环境或工具支持这种路径映射，否则推荐使用相对路径来确保模块能够正确引入。