我白天是个 搞笑废物
表演不在乎
夜晚变成 忧伤怪物
撕扯着孤独
我曾经是个 感性动物
小心地感触
现在变成 无关人物
🎵
张碧晨/王赫野《何物》
微信小程序开发工具提供了一个便捷的开发环境,使开发者可以快速构建和部署小程序。在开始开发之前,理解小程序项目结构目录中的各个文件及其作用是非常重要的。本文将详细介绍微信小程序项目的结构和各个文件的作用。
目录结构示例
在微信开发者工具中创建一个新项目后,默认的目录结构如下:
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() + 1
const 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'
}
}
结语
理解微信小程序的项目结构和各个文件的作用,是开发高质量小程序的基础。通过本文的介绍,希望能帮助你更好地理解和使用微信小程序开发工具,为你的开发工作提供便利。