文章目录
核心目录及文件
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
管理依赖版本。