面向零基础初学者，从环境搭建到发布上线，手把手教你开发第一个微信小程序（第3章-认识项目结构）

3.1 整体目录结构

微信小程序采用固定的项目结构：

复制代码

gov-sms-helper/              ← 项目根目录
├── app.js                   ← 应用入口（必须）
├── app.json                 ← 应用配置（必须）
├── app.wxss                 ← 全局样式（非必须）
├── project.config.json      ← 项目配置文件（工具自动生成）
├── sitemap.json             ← 站点地图配置
│
├── pages/                   ← 页面文件夹
│   ├── index/               ← 首页
│   │   ├── index.wxml       ← 页面结构
│   │   ├── index.wxss       ← 页面样式
│   │   ├── index.js         ← 页面逻辑
│   │   └── index.json        ← 页面配置
│   │
│   ├── history/             ← 历史记录页
│   │   └── ...
│   │
│   └── settings/            ← 设置页
│       └── ...
│
├── components/              ← 组件文件夹
│   ├── sms-preview/
│   │   ├── sms-preview.wxml
│   │   ├── sms-preview.wxss
│   │   └── sms-preview.js
│   └── template-card/
│       └── ...
│
├── utils/                   ← 工具函数文件夹
│   ├── greeting.js          ← 问候语生成
│   ├── sms-generator.js     ← 短信生成
│   └── storage.js           ← 存储工具
│
├── config/                  ← 配置文件夹
│   └── templates.js          ← 模板配置
│
└── assets/                  ← 静态资源文件夹
    └── icons/               ← 图标资源

在开发者工具中展开目录树

3.2 必须的文件

微信小程序必须包含两个文件：

文件	位置	作用
`app.js`	根目录	应用入口，定义全局数据
`app.json`	根目录	应用全局配置

其他文件都是可选的。

app.js - 应用入口

javascript 复制代码

// app.js
App({
  onLaunch() {
    // 小程序启动时执行
    console.log('小程序启动了')
  },

  globalData: {
    // 全局共享的数据
    userInfo: null,
    settings: null
  }
})

标注：onLaunch 生命周期函数

app.json - 应用配置

json 复制代码

{
  "pages": [
    "pages/index/index",      // 页面路径
    "pages/history/history",
    "pages/settings/settings"
  ],
  "window": {
    "navigationBarTitleText": "政务短信助手"
  }
}

标注：pages 数组定义所有页面

pages数组中的第一个页面是小程序的首页。

3.3 页面的四种文件

每个页面都必须有.js文件，其他三种文件可选：

文件	必须	作用
`.js`	✅	页面逻辑、数据、事件处理
`.wxml`	-	页面结构（类似HTML）
`.wxss`	-	页面样式（类似CSS）
`.json`	-	页面私有配置

页面的四种文件示例

javascript 复制代码

// pages/index/index.js
Page({
  data: {
    message: 'Hello World'
  }
})

html 复制代码

<!-- pages/index/index.wxml -->
<view>{{message}}</view>

css 复制代码

/* pages/index/index.wxss */
view {
  color: #333;
}

json 复制代码

/* pages/index/index.json */
{
  "navigationBarTitleText": "首页"
}

3.4 组件结构

组件是可供页面复用的UI部件，结构与页面类似：

复制代码

components/
└── sms-preview/           ← 组件名
    ├── sms-preview.wxml   ← 组件结构
    ├── sms-preview.wxss   ← 组件样式
    └── sms-preview.js     ← 组件逻辑

组件与页面的区别

区别	页面	组件
创建方式	右键新建页面	右键新建组件
使用方式	在app.json中注册	在页面.json中引用
复用性	每个页面唯一	可被多个页面引用

对比展示页面和组件的文件结构

3.5 工具函数

utils/ 文件夹用于存放可复用的JavaScript函数：

javascript 复制代码

// utils/greeting.js

/**
 * 获取当前时间的问候语
 * @returns {string} 问候语
 */
function getGreeting() {
  const hour = new Date().getHours()

  if (hour < 12) return '早上好'
  if (hour < 14) return '中午好'
  if (hour < 18) return '下午好'
  return '晚上好'
}

module.exports = {
  getGreeting
}

使用工具函数

在页面中引入并使用：

javascript 复制代码

// pages/index/index.js
const { getGreeting } = require('../../utils/greeting.js')

Page({
  onLoad() {
    const greeting = getGreeting()
    console.log(greeting)  // 输出：下午好
  }
})

标注：require 导入路径

标注：使用工具函数

3.6 配置文件的优先级

小程序的配置有多个层级，优先级从高到低：

复制代码

页面配置 (index.json)   ← 最高优先级
    ↓
应用配置 (app.json)    ← 次优先级
    ↓
默认配置               ← 最底层默认值

示例：导航栏标题

app.json 定义 "navigationBarTitleText": "政务短信助手"
pages/index/index.json 定义 "navigationBarTitleText": "首页"

最终首页显示"首页"，其他页面显示"政务短信助手"。

3.7 项目结构实践

现在你已经了解项目结构，接下来我们来添加新页面试试：

步骤1：新建页面

在 pages 文件夹上右键，选择"新建页面"，输入名称 about：

标注：新建页面菜单

标注：输入页面名

步骤2：观察变化

新建页面后：

pages/about/ 文件夹自动创建
四个文件自动生成
app.json 的 pages 数组自动添加新页面

标注：自动生成的文件

标注：app.json 自动更新

3.8 本章小结

✅ 理解了小程序的目录结构

✅ 掌握了必须文件 app.js 和 app.json

✅ 学会了页面四种文件的区别与作用

✅ 了解了组件的结构

✅ 学会了使用工具函数

下一章：第4章 WXML入门 →