微信小程序核心目录及文件含义

核心目录及文件

1. node_modules

• 作用：存放项目通过 npm 安装的第三方依赖包（如 vant-weapp 等组件库）。
• 注意：此目录通常无需手动修改，依赖通过 package.json 管理。

---

2. pages

• 作用：存放小程序的所有页面，每个页面由 4个同名文件 组成：
  • .js：页面逻辑（数据、事件处理）。
  • .json：页面配置（导航栏标题、背景色等）。
  • .wxml：页面结构（类似 HTML）。
  • .wxss：页面样式（类似 CSS）。
• 示例：
  • pages/index：表示首页，包含 index.js、index.json、index.wxml、index.wxss。

---

3. utils

• 作用：存放公共工具函数或工具类文件（如网络请求封装、日期格式化、加密工具等）。
• 示例：
  • utils/request.js：封装 wx.request 实现统一 API 请求管理。

---

4. logs

• 作用：小程序运行时的日志文件（如用户访问记录、错误日志）。
• 注意：需在代码中主动调用日志写入方法，默认不会自动生成。

---

配置文件

1. .eslintrc.js

• 作用：ESLint 的配置文件，用于定义代码规范（如缩进、引号风格、变量命名规则）。
• 意义：提升代码可读性，避免低级语法错误。

---

2. app.js

• 作用：小程序入口文件，定义全局逻辑（如监听生命周期、设置全局变量）。
• 示例：

  App({
    onLaunch() { console.log('小程序启动'); },
    globalData: { userInfo: null }
  });
  

---

3. app.json

• 作用：全局配置文件，定义小程序的窗口样式、页面路径、网络超时时间等。
• 关键字段：

  {
    "pages": ["pages/index/index"], // 注册页面路径
    "window": {
      "navigationBarTitleText": "我的小程序" // 导航栏标题
    }
  }
  

---

4. app.wxss

• 作用：全局样式文件，定义所有页面的公共样式（如字体、颜色、边距）。
• 注意：页面级样式优先于全局样式。

---

5. package.json 与 package-lock.json

• package.json：记录项目依赖及版本信息（如 dependencies 和 devDependencies）。
• package-lock.json：锁定依赖版本，确保团队协作时依赖一致性。

---

6. project.config.json

• 作用：小程序开发者工具的个性化配置（如项目名称、AppID、调试端口）。
• 示例：

  {
    "appid": "wx1234567890abcdef", // 小程序唯一标识
    "projectname": "我的项目"
  }
  

---

7. sitemap.json

• 作用：控制小程序页面是否允许被微信搜索收录。
• 示例：

  {
    "rules": [
      {
        "action": "allow", // 允许被搜索
        "page": "pages/index/index"
      }
    ]
  }
  

---

总结

• 开发逻辑：页面逻辑在 pages 目录编写，公共功能放 utils，全局配置通过 app.json 管理。
• 调试工具：project.config.json 用于适配开发者工具，sitemap.json 控制搜索权限。
• 代码规范：.eslintrc.js 确保代码风格统一，package.json 管理依赖版本。