---

我白天是个 搞笑废物
表演不在乎
夜晚变成 忧伤怪物
撕扯着孤独
我曾经是个 感性动物
小心地感触
现在变成 无关人物
                     🎵
张碧晨/王赫野《何物》

---

微信小程序开发工具提供了一个便捷的开发环境，使开发者可以快速构建和部署小程序。在开始开发之前，理解小程序项目结构目录中的各个文件及其作用是非常重要的。本文将详细介绍微信小程序项目的结构和各个文件的作用。

目录结构示例

在微信开发者工具中创建一个新项目后，默认的目录结构如下：

project-root/├── pages/│   ├── index/│   │   ├── index.js│   │   ├── index.json│   │   ├── index.wxml│   │   └── index.wxss├── utils/│   └── util.js├── app.js├── app.json├── app.wxss├── project.config.json├── project.private.config.json└── sitemap.json

根目录文件

1. app.js
   app.js 是小程序的入口文件，主要用来监听和处理小程序的生命周期函数（如 onLaunch、onShow 等），以及声明一些全局数据。

App({onLaunch: function () {// 小程序启动时执行的代码},globalData: {userInfo: null}
})

2. app.json
   app.json 是小程序的全局配置文件，决定了小程序的页面路径、窗口表现、导航栏、底部 tab 等配置。

{"pages": ["pages/index/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"}
}

3. app.wxss
   app.wxss 是小程序的全局样式表文件，用于定义全局的样式，作用于整个小程序的各个页面。

page {background-color: #f8f8f8;
}

4. project.config.json
   project.config.json 是微信开发者工具的项目配置文件，包含项目的名称、appid、编译设置、调试设置等信息。

{"miniprogramRoot": "./","projectname": "MyProject","appid": "your-appid","setting": {"urlCheck": true,"es6": true,"enhance": true}
}

5. project.private.config.json
   project.private.config.json 主要用于存储私有的配置项，比如工具的某些特定设置。这个文件通常不需要手动修改。

6. sitemap.json
   sitemap.json 是小程序的站点地图文件，用于 SEO 配置，帮助微信搜索引擎更好地爬取小程序的页面。

{"rules": [{"action": "allow","page": "*"}]
}

页面目录（pages）

页面目录下通常包含多个子目录，每个子目录代表一个页面。以下是页面目录的结构和文件作用：

1. index.js
   index.js 是页面的逻辑文件，定义页面的数据、生命周期函数、事件处理函数等。

Page({data: {motto: 'Hello World'},onLoad: function () {console.log('Page loaded');}
})

2. index.json
   index.json 是页面的配置文件，可以覆盖 app.json 中的部分配置，比如页面的导航栏样式等。

{"navigationBarTitleText": "首页"
}

3. index.wxml
   index.wxml 是页面的模板文件，定义页面的结构和内容。

<view class="container"><text>{{motto}}</text>
</view>

4. index.wxss
   index.wxss 是页面的样式文件，定义页面的样式。

.container {padding: 20px;
}

工具库目录（utils）

这个目录通常用来存放一些工具函数、公共模块等。以下是工具库目录的结构和文件作用：

• util.js
  util.js 是工具函数文件，可以在这里定义一些常用的函数，然后在其他页面中引入使用。

function formatTime(date) {const year = date.getFullYear()const month = date.getMonth() + 1const day = date.getDate()return [year, month, day].map(formatNumber).join('/')
}module.exports = {formatTime: formatTime
}

其他

• .eslintrc.js
  .eslintrc.js 是 ESLint 配置文件，用于定义代码规范和检查规则。通过配置 ESLint，可以确保代码的一致性和质量。

module.exports = {extends: 'eslint:recommended',env: {browser: true,node: true},rules: {'no-console': 'off'}
}

结语

理解微信小程序的项目结构和各个文件的作用，是开发高质量小程序的基础。通过本文的介绍，希望能帮助你更好地理解和使用微信小程序开发工具，为你的开发工作提供便利。