微信小程序中,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)从项目根目录计算,简洁且易于维护,但需要配置支持。

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

相关推荐
00后程序员张1 天前
python 抓包在实际项目中的合理位置,结合代理抓包、设备侧抓包与数据流分析
android·ios·小程序·https·uni-app·iphone·webview
2501_915918412 天前
使用 HBuilder 上架 iOS 应用时常见的问题与应对方式
android·ios·小程序·https·uni-app·iphone·webview
2501_916007472 天前
iOS 崩溃日志的分析方法,将崩溃日志与运行过程结合分析
android·ios·小程序·https·uni-app·iphone·webview
2501_916007472 天前
React Native 混淆在真项目中的方式,当 JS 和原生同时暴露
javascript·react native·react.js·ios·小程序·uni-app·iphone
00后程序员张2 天前
苹果应用商店上架App流程,签名证书、IPA 校验、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_916007472 天前
iOS 上架需要哪些准备,围绕证书、描述文件和上传方式等关键环节展开分析
android·ios·小程序·https·uni-app·iphone·webview
qq_12498707532 天前
基于微信小程序的私房菜定制上门服务系统(源码+论文+部署+安装)
java·spring boot·微信小程序·小程序·毕业设计·毕设
2501_915106322 天前
iOS 上架费用解析,哪些成本可以通过流程优化降低。
android·ios·小程序·https·uni-app·iphone·webview
换日线°2 天前
微信小程序找不同游戏(有效果图)
游戏·微信小程序
风月歌2 天前
小程序项目之超市售货管理平台小程序源代码(源码+文档)
java·微信小程序·小程序·毕业设计·源码