【Javascript】微信小程序项目结构目录详解
我白天是个 搞笑废物
表演不在乎
夜晚变成 忧伤怪物
撕扯着孤独
我曾经是个 感性动物
小心地感触
现在变成 无关人物
🎵
张碧晨/王赫野《何物》
微信小程序开发工具提供了一个便捷的开发环境，使开发者可以快速构建和部署小程序。在开始开发之前，理解小程序项目结构目录中的各个文件及其作用是非常重要的。本文将详细介绍微信小程序项目的结构和各个文件的作用。
目录结构示例
在微信开发者工具中创建一个新项目后，默认的目录结构如下：
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
根目录文件
- app.js
app.js 是小程序的入口文件，主要用来监听和处理小程序的生命周期函数（如 onLaunch、onShow 等），以及声明一些全局数据。
App({onLaunch: function () {// 小程序启动时执行的代码},globalData: {userInfo: null}
})
- app.json
app.json 是小程序的全局配置文件，决定了小程序的页面路径、窗口表现、导航栏、底部 tab 等配置。
{"pages": ["pages/index/index"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle": "black"}
}
- app.wxss
app.wxss 是小程序的全局样式表文件，用于定义全局的样式，作用于整个小程序的各个页面。
page {background-color: #f8f8f8;
}
- project.config.json
project.config.json 是微信开发者工具的项目配置文件，包含项目的名称、appid、编译设置、调试设置等信息。
{"miniprogramRoot": "./","projectname": "MyProject","appid": "your-appid","setting": {"urlCheck": true,"es6": true,"enhance": true}
}
-
project.private.config.json
project.private.config.json 主要用于存储私有的配置项，比如工具的某些特定设置。这个文件通常不需要手动修改。 -
sitemap.json
sitemap.json 是小程序的站点地图文件，用于 SEO 配置，帮助微信搜索引擎更好地爬取小程序的页面。
{"rules": [{"action": "allow","page": "*"}]
}
页面目录（pages）
页面目录下通常包含多个子目录，每个子目录代表一个页面。以下是页面目录的结构和文件作用：
- index.js
index.js 是页面的逻辑文件，定义页面的数据、生命周期函数、事件处理函数等。
Page({data: {motto: 'Hello World'},onLoad: function () {console.log('Page loaded');}
})
- index.json
index.json 是页面的配置文件，可以覆盖 app.json 中的部分配置，比如页面的导航栏样式等。
{"navigationBarTitleText": "首页"
}
- index.wxml
index.wxml 是页面的模板文件，定义页面的结构和内容。
<view class="container"><text>{{motto}}</text>
</view>
- 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'}
}
结语
理解微信小程序的项目结构和各个文件的作用，是开发高质量小程序的基础。通过本文的介绍，希望能帮助你更好地理解和使用微信小程序开发工具，为你的开发工作提供便利。