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

核心目录及文件

1. node_modules

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

2. pages

  • 作用:存放小程序的所有页面,每个页面由 4个同名文件 组成:
    • .js:页面逻辑(数据、事件处理)。
    • .json:页面配置(导航栏标题、背景色等)。
    • .wxml:页面结构(类似 HTML)。
    • .wxss:页面样式(类似 CSS)。
  • 示例
    • pages/index:表示首页,包含 index.jsindex.jsonindex.wxmlindex.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.jsonpackage-lock.json

  • package.json:记录项目依赖及版本信息(如 dependenciesdevDependencies)。
  • 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 管理依赖版本。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值