第二章 开发环境搭建：微信开发者工具（抖音版）安装、项目初始化、目录结构解析、真机调试与预览
好，咱们正式开始动手了。
这一章，我会带你从零搭建抖音直播带货小程序的开发环境。别小看这一步，我见过太多人卡在环境上，折腾半天连个Hello World都跑不出来。嗯，咱们不犯这种低级错误。
2.1 微信开发者工具（抖音版）安装
首先，你得搞明白一件事：抖音小程序用的是「微信开发者工具」的定制版。说白了，就是字节跳动基于微信的工具改了一版，专门用来开发抖音小程序。
下载地址：去抖音开放平台官网，找到「开发者工具」下载页。别去微信官网下，那个不兼容抖音的API。
安装步骤：
- 下载对应操作系统的安装包（Windows选.exe，macOS选.dmg）
- 双击安装，一路默认选项就行
- 安装完成后，打开工具，你会看到登录界面
注意：登录时要用抖音开放平台的账号，不是你的抖音个人号。我刚开始就搞混过，用个人抖音号扫了半天码，一直提示「无权限」。
登录成功后，你会看到类似微信开发者工具的界面，但左上角写着「抖音小程序」字样。嗯，这就对了。
2.2 项目初始化
工具装好了，咱们来创建第一个项目。
操作流程：
- 点击「新建项目」
- 填写项目名称，比如
douyin-live-goods - 选择目录（建议单独建一个文件夹，别乱放）
- AppID：填你从抖音开放平台申请到的AppID
- 开发模式：选择「小程序」
- 模板：选「空白项目」或「基础模板」
个人经验：我习惯用「空白项目」起步。模板里带了很多用不上的代码，删起来麻烦。自己从零写，心里有数。
点击确定后，工具会自动生成项目骨架。你会看到左侧多了一个文件列表，右侧是模拟器界面。
2.3 目录结构解析
项目创建好了，咱们看看里面都有啥。这是抖音小程序的标准目录结构：
douyin-live-goods/
├── app.js # 全局逻辑
├── app.json # 全局配置
├── app.ttss # 全局样式（注意后缀是ttss，不是css）
├── project.config.json # 项目配置文件
├── pages/ # 页面文件夹
│ ├── index/ # 首页
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.ttml # 模板文件（类似html）
│ │ └── index.ttss # 页面样式
│ └── logs/ # 日志页（示例，可以删掉）
└── utils/ # 工具函数
└── util.js
我来给你拆解一下每个文件的作用：
| 文件/文件夹 | 作用 | 备注 |
|---|---|---|
app.js |
小程序入口，生命周期钩子写在这里 | 全局变量也放这 |
app.json |
配置页面路径、窗口样式、tabBar等 | 改完要重启工具才生效 |
app.ttss |
全局样式，所有页面都能用 | 注意别和页面样式冲突 |
pages/ |
每个页面一个文件夹 | 页面名和文件夹名保持一致 |
utils/ |
公共工具函数 | 比如格式化时间、请求封装 |
重点说一下 app.json：
{
"pages": [
"pages/index/index",
"pages/goods/goods",
"pages/cart/cart"
],
"window": {
"navigationBarTitleText": "直播带货",
"navigationBarBackgroundColor": "#ff6b81",
"navigationBarTextStyle": "white"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/goods/goods",
"text": "商品"
},
{
"pagePath": "pages/cart/cart",
"text": "购物车"
}
]
}
}
避坑指南：我曾经在
app.json 里写错了页面路径，结果工具一直报「找不到页面」。检查了半小时才发现是路径少了个斜杠。所以，路径一定要写对，大小写也要注意。
2.4 真机调试与预览
代码写好了，总不能在模拟器里自嗨吧？得上真机跑一跑。
真机调试步骤：
- 在开发者工具里，点击工具栏的「真机调试」按钮
- 工具会生成一个二维码
- 用抖音App扫码（注意：是抖音App，不是抖音极速版）
- 手机上会打开调试界面，能看到console日志和网络请求
个人习惯：我一般先用模拟器跑通基本流程，再用真机调试。因为模拟器有些API不支持，比如摄像头、蓝牙这些。真机调试能发现很多模拟器上发现不了的问题。
预览模式：
- 点击「预览」按钮，同样生成二维码
- 扫码后看到的是最终效果，没有调试信息
- 适合给客户或老板展示用
注意：真机调试和预览都需要网络畅通。如果扫码后一直加载，检查一下手机和电脑是否在同一个局域网。我遇到过几次，都是因为公司网络策略限制了端口。
常见问题排查：
- 扫码后白屏：检查
app.json里的页面路径是否正确 - API调用失败：确认是否在抖音开放平台开通了对应权限
- 样式错乱：抖音小程序不支持某些CSS属性，比如
position: sticky
嗯，环境搭建这块就这些。别嫌啰嗦，基础打牢了，后面写代码才顺手。下一章咱们开始写真正的直播带货页面，到时候你会感谢今天认真搭环境的自己。