【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

根目录文件

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() + 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'
  }
}

结语

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