3、开发环境搭建：开发者工具安装、项目初始化、目录结构解析
好，咱们正式开始动手了。
这一章我带你走一遍开发环境的搭建流程。说白了，就是把你电脑变成一个小程序工厂。我见过太多人卡在这一步——工具装不对、项目初始化失败、目录结构看不懂。别急，跟着我来，半小时内搞定。
3.1 开发者工具安装
抖音小程序用的是字节跳动自家的开发者工具，叫「抖音开发者工具」。它不是微信那个，别搞混了。
3.1.1 下载与安装
去官网下载对应你操作系统的版本。我建议你下载稳定版，别追 beta 版。为什么？因为我在项目中遇到过 beta 版突然崩溃，差点耽误上线。
- Windows 用户： 下载 .exe 安装包，双击安装，一路下一步就行
- macOS 用户： 下载 .dmg 文件，拖到 Applications 文件夹
- 注意： 安装路径不要有中文，否则可能报一些莫名其妙的错
3.1.2 登录与激活
安装完成后，打开工具。你会看到一个登录界面。用你的抖音账号扫码登录就行。
嗯，这里有个坑。我第一次用的时候，扫完码发现没反应。后来发现是网络问题——开发者工具需要访问字节的服务器，有些内网环境会拦截。如果你也遇到这种情况，试试切换手机热点。
3.2 项目初始化
工具装好了，咱们来创建第一个项目。
3.2.1 创建项目
打开开发者工具，点击「新建项目」。你会看到这样一个界面：
| 字段 | 说明 | 我的建议 |
|---|---|---|
| 项目名称 | 你的小程序名字 | 用英文或拼音，比如 my_shop |
| 目录 | 项目存放路径 | 单独建一个文件夹，别放桌面 |
| AppID | 小程序的唯一标识 | 去抖音开放平台申请，或者先用测试号 |
| 模板 | 初始代码模板 | 选「空项目」，从零开始 |
填好后点击「确定」。工具会自动生成一套基础文件结构。
3.2.2 初始化配置
项目创建后，第一件事是改 app.json。这是小程序的全局配置文件。我习惯先把基础信息填好：
{
"pages": [
"pages/index/index",
"pages/cart/cart",
"pages/user/user"
],
"window": {
"navigationBarTitleText": "我的小店",
"navigationBarBackgroundColor": "#ff6b81",
"navigationBarTextStyle": "white"
},
"tabBar": {
"color": "#999",
"selectedColor": "#ff6b81",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "images/home.png",
"selectedIconPath": "images/home_active.png"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车",
"iconPath": "images/cart.png",
"selectedIconPath": "images/cart_active.png"
},
{
"pagePath": "pages/user/user",
"text": "我的",
"iconPath": "images/user.png",
"selectedIconPath": "images/user_active.png"
}
]
}
}你看，我直接配了一个底部导航栏。首页、购物车、个人中心——这是电商小程序的标配。颜色我选了粉色系，因为抖音用户偏年轻，暖色更讨喜。
3.3 目录结构解析
项目初始化完了，咱们来看看这些文件夹和文件都是干嘛的。我当初学的时候，看着一堆文件头都大了。其实没那么复杂，你记住一个原则就行：小程序是「页面 + 组件 + 配置」的组合。
3.3.1 顶层文件
| 文件/文件夹 | 作用 | 必填？ |
|---|---|---|
app.js |
全局逻辑，小程序启动时执行 | 是 |
app.json |
全局配置，页面路径、窗口样式等 | 是 |
app.css |
全局样式，所有页面共享 | 否 |
pages/ |
存放所有页面 | 是 |
components/ |
存放自定义组件 | 否 |
utils/ |
工具函数、API 封装 | 推荐 |
images/ |
静态图片资源 | 推荐 |
你想想看，app.js 就像小程序的「大脑」，一启动就跑。而 app.json 是「骨架」，告诉小程序有哪些页面、长什么样。
3.3.2 页面内部结构
每个页面都是一个文件夹，里面通常有 4 个文件。拿 pages/index/ 举例：
index.js— 页面逻辑，处理点击、数据请求等index.json— 页面配置，比如标题、导航栏颜色index.css— 页面样式，只影响当前页面index.ttml— 页面结构，类似 HTML
这 4 个文件名字必须一样，后缀不同。工具会自动把它们关联起来。我曾经犯过一个低级错误——把 index.js 写成了 index.jsx，结果页面死活不渲染。找了半天才发现是后缀名不对。
README.md，记录这个页面用了哪些组件、调了哪些接口。团队协作时特别有用。
3.3.3 组件目录
组件和页面结构很像，也是 4 个文件。区别在于：
- 组件没有
app.json那种全局配置 - 组件需要在
json文件里声明"component": true - 组件可以被多个页面复用
举个例子，电商小程序里的「商品卡片」就是一个典型组件。你会在首页、搜索页、推荐页都用它。把它抽成组件，改一处就全改了。
// components/product-card/index.json
{
"component": true,
"usingComponents": {}
}3.3.4 工具函数目录
utils/ 文件夹放的是通用函数。比如：
api.js— 封装所有网络请求format.js— 格式化时间、价格auth.js— 登录、token 管理
我习惯把 utils/ 里的函数都写成模块化导出，这样任何页面都能 import 使用。
app.js 和 app.json 必须放在根目录，页面必须放在 pages/ 下。这是抖音小程序的硬性规定。
3.4 验证环境
最后一步，验证你的环境是不是搭好了。在开发者工具里点击「预览」，用手机抖音扫码。如果能在手机上看到你的小程序界面，恭喜你，环境搭建成功。
如果报错，别慌。90% 的问题出在：
- AppID 没填对
- 路径写错了（比如
pages/index/index少写了一个index） - 网络不通（检查代理设置）
嗯，环境搭建就这些。下一章咱们开始写真正的代码——从首页的商品列表做起。