4、项目结构解析：pages目录、components目录、utils目录、app.json、app.js、app.ttss等核心文件作用

好，咱们现在开始真正动手了。你可能会想：抖音小程序的项目里，这么多文件和文件夹，到底都是干嘛的？

我刚开始接触那会儿，也懵。打开一个空项目，看到一堆目录和配置文件，心里直打鼓。但别怕，今天我就带你把这些文件挨个捋一遍。捋完了，你再看项目结构，就跟看自家客厅一样熟悉。

4.1 项目根目录：一眼看穿全局

先看最外层。一个标准的抖音小程序项目，根目录下大概长这样：

my-douyin-app/
├── pages/          # 页面文件夹
├── components/     # 组件文件夹
├── utils/          # 工具文件夹
├── app.json        # 全局配置
├── app.js          # 全局逻辑
├── app.ttss        # 全局样式
└── project.config.json  # 项目配置（不重要，先不管）

嗯，就这么简单。核心就这六个东西。我见过不少新手，一上来就想着把代码全塞到 pages 里，结果项目一大了就乱成一锅粥。咱们从一开始就养成好习惯。

4.2 pages目录：你的每个页面都在这里

pages 目录，说白了就是存放所有页面的地方。每个页面一个文件夹，里面通常有四个文件：

• .js — 页面的逻辑代码（数据、事件处理）
• .ttss — 页面的样式（相当于 CSS）
• .json — 页面的配置（标题、导航栏等）
• .ttml — 页面的结构（类似 HTML）

举个例子，如果你有一个首页和一个个人中心页，目录结构应该是：

pages/
├── index/
│   ├── index.js
│   ├── index.ttss
│   ├── index.json
│   └── index.ttml
└── profile/
    ├── profile.js
    ├── profile.ttss
    ├── profile.json
    └── profile.ttml

我个人习惯，每个页面文件夹的名字和页面功能保持一致。比如首页就叫 index，商品详情就叫 goods-detail。千万别起什么 page1、page2，你想想看，三个月后你自己都分不清哪个是哪个。

4.3 components目录：复用代码的利器

你有没有遇到过这种情况？好几个页面都用到了同一个按钮，或者同一个商品卡片。如果每个页面都复制一遍代码，改起来就太痛苦了。

components 目录就是干这个的。它用来存放可复用的组件。每个组件也是一个文件夹，结构和页面类似：

components/
├── custom-button/
│   ├── custom-button.js
│   ├── custom-button.ttss
│   ├── custom-button.json
│   └── custom-button.ttml
└── goods-card/
    ├── goods-card.js
    ├── goods-card.ttss
    ├── goods-card.json
    └── goods-card.ttml

我在项目中遇到过一件事：有个商品列表页，一开始直接把卡片代码写在页面里。后来需求变了，个人中心也要展示商品卡片。我只好把那段代码复制过去，改了半天。嗯，从那以后，但凡可能复用的东西，我都先做成组件。

4.4 utils目录：工具函数大本营

utils 目录，用来放一些通用的工具函数。比如格式化时间、网络请求封装、数据校验等等。

举个例子，你可能会写一个 util.js：

// utils/util.js
function formatTime(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${year}-${month}-${day}`
}

function request(url, data) {
  // 封装网络请求
  return new Promise((resolve, reject) => {
    tt.request({
      url: url,
      data: data,
      success: resolve,
      fail: reject
    })
  })
}

module.exports = {
  formatTime: formatTime,
  request: request
}

然后在页面里引入：

const util = require('../../utils/util')
console.log(util.formatTime(new Date()))

说白了，utils 就是你的工具箱。我建议把所有跟业务无关的通用逻辑都放这里。比如日期处理、字符串处理、网络请求封装。这样代码更干净，也更容易维护。

4.5 app.json：小程序的“大脑”

app.json 是全局配置文件。它决定了小程序长什么样、有哪些页面、窗口怎么显示。来看一个典型的配置：

{
  "pages": [
    "pages/index/index",
    "pages/profile/profile"
  ],
  "window": {
    "navigationBarTitleText": "我的小程序",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的"
      }
    ]
  }
}

这里有几个关键点：

• pages：数组，列出所有页面路径。第一个页面就是首页。
• window：设置导航栏标题、背景色、文字颜色等。
• tabBar：底部导航栏，最多5个。

我曾经犯过一个低级错误：在 pages 数组里写错了路径，结果页面死活加载不出来。调试了半天才发现是少写了一个斜杠。所以，写路径的时候一定要仔细。

4.6 app.js：全局逻辑的起点

app.js 是小程序的入口文件。它里面定义了一个 App 对象，包含一些生命周期函数：

App({
  onLaunch: function() {
    // 小程序启动时执行
    console.log('小程序启动了')
  },
  onShow: function() {
    // 小程序从后台切到前台时执行
  },
  onHide: function() {
    // 小程序从前台切到后台时执行
  },
  globalData: {
    userInfo: null
  }
})

你想想看，app.js 最适合放什么？全局数据、登录逻辑、初始化操作。比如用户登录后，把用户信息存到 globalData 里，所有页面都能通过 getApp() 拿到。

4.7 app.ttss：全局样式表

app.ttss 是全局样式文件。写在里面的样式，对所有页面和组件都生效。通常用来定义一些公共样式：

/* app.ttss */
page {
  background-color: #f5f5f5;
  font-size: 14px;
  color: #333;
}

.button-primary {
  background-color: #07c160;
  color: white;
  border-radius: 4px;
  padding: 10px 20px;
}

我个人习惯，把颜色变量、字体大小、公共按钮样式都放在 app.ttss 里。这样每个页面就不用重复写这些基础样式了。但要注意，别把页面特有的样式也塞进来，不然 app.ttss 会变得又大又乱。

4.8 总结：一张表看懂所有文件

文件/目录	作用	使用场景
pages/	存放所有页面	每个功能页面一个文件夹
components/	存放可复用组件	按钮、卡片、弹窗等
utils/	存放工具函数	日期格式化、网络请求封装
app.json	全局配置	页面注册、窗口设置、tabBar
app.js	全局逻辑	生命周期、全局数据、登录
app.ttss	全局样式	公共颜色、字体、基础样式

好了，项目结构就讲到这里。你可能会觉得这些内容有点基础，但相信我，把基础打牢了，后面写代码才会顺手。下一章咱们就开始写第一个页面了，到时候这些文件你都会亲手用到。

公众号:蓝海资料掘金营，微信deep3321