2、开发环境搭建：注册开发者账号、安装IDE、创建第一个多端项目

好，咱们正式开始动手了。

这一章，说白了就是「把家伙事儿备齐」。你想想看，一个木匠开工前得先磨斧子，咱们做小程序开发也一样——账号、工具、项目模板，这三样缺一不可。

我个人习惯是先把账号注册好，再装IDE，最后创建项目。这个顺序最顺，因为有些IDE在安装过程中会要求你登录账号。嗯，咱们一步步来。

2.1 注册抖音开发者账号

首先，你得有个抖音开放平台的账号。别跟个人抖音号搞混了，这是两码事。

打开浏览器，访问 developer.open-douyin.com。你会看到一个「注册」按钮，点它。

注册流程其实挺简单的：

• 选择主体类型：个人开发者就选「个人」，公司团队就选「企业」。我建议初学者先用个人身份注册，省事。
• 填写基本信息：手机号、邮箱、密码。邮箱一定要用常用的，后面很多通知都发到邮箱里。
• 实名认证：这一步躲不掉。上传身份证照片，人脸识别一下。嗯，大概几分钟就能通过。

注册完成后，登录后台。你会看到左侧有个「小程序」菜单。点进去，创建一个新的「抖音小程序」。这时候系统会给你分配一个 AppID——这东西相当于小程序的身份证，后面配置项目时要用到。

2.2 安装抖音开发者工具（IDE）

账号搞定了，接下来装IDE。抖音官方提供了专门的开发者工具，叫「抖音开发者工具」。你可以在开放平台的「资源中心」找到下载链接。

支持 Windows 和 macOS。我个人用的是 macOS，但两个平台的操作几乎一样，别担心。

安装过程没什么特别的，一路「下一步」就行。不过有几点我得提醒你：

• 安装路径不要有中文：有些同学喜欢把软件装到「D:\软件」这种目录，后面编译时可能会报奇怪的错误。我吃过这个亏。
• 建议安装最新稳定版：别追 beta 版，稳定版 bug 少。我曾经为了尝鲜装了个内测版，结果调试器打不开，折腾了一下午。
• 安装完成后先别急着打开：先确认一下电脑上有没有装 Node.js。抖音开发者工具依赖 Node.js 环境。打开终端（cmd 或 terminal），输入 node -v，如果能看到版本号，说明有了。如果没有，去 nodejs.org 下载一个 LTS 版本装上。

2.3 创建第一个多端项目

好，账号有了，IDE 也装好了。现在咱们来创建第一个项目。

打开抖音开发者工具，你会看到这样的界面：

• 左侧是「项目列表」，显示你之前创建过的项目
• 中间有个大大的「新建项目」按钮

点击「新建项目」，弹出一个配置窗口。这里有几个关键字段：

字段	说明	我的建议
项目名称	你的项目叫什么	用英文小写+连字符，比如 my-first-app
目录	项目存在哪个文件夹	单独建一个 douyin-projects 目录，方便管理
AppID	刚才注册时拿到的那个	填进去，别填错了
模板	选择项目模板	选「默认模板」或「多端模板」

这里我要特别说一下「模板」的选择。咱们这个课程是讲「多平台小程序同步开发」，所以你应该选「多端模板」。这个模板自带了一套示例代码，包含了抖音小程序和抖音小游戏的基本结构。

选好之后，点击「确定」。IDE 会自动拉取模板代码，并安装依赖。这个过程大概需要 1-2 分钟，取决于你的网速。

项目创建成功后，你会看到这样的目录结构：

my-first-app/
├── app.js          # 小程序入口文件
├── app.json        # 全局配置
├── app.ttss        # 全局样式
├── pages/          # 页面文件夹
│   ├── index/      # 首页
│   │   ├── index.js
│   │   ├── index.ttml
│   │   ├── index.ttss
│   │   └── index.json
│   └── logs/       # 日志页
│       ├── ...
├── utils/          # 工具函数
│   └── util.js
└── project.config.json  # 项目配置文件

嗯，这个结构是不是看着眼熟？如果你做过微信小程序，会发现几乎一模一样。没错，抖音小程序的开发范式跟微信小程序高度相似，这也是咱们能「多端同步」的基础。

2.4 运行第一个项目

项目创建好了，总得跑起来看看效果吧？

在 IDE 的顶部工具栏，有个「预览」按钮。点它，IDE 会编译代码，然后在模拟器里打开你的小程序。

你会看到一个简单的页面，上面写着「Hello, 抖音小程序！」。别小看这一行字，这意味着你的开发环境已经全部打通了。

如果你有手机，还可以用「真机调试」功能。点击「预览」旁边的下拉箭头，选择「真机调试」。IDE 会生成一个二维码，用抖音 App 扫码就能在手机上看到效果。

2.5 避坑指南

最后，分享几个我踩过的坑，你遇到了可以少走弯路：

• AppID 填错了怎么办？ 别慌，在项目根目录找到 project.config.json，把 appid 字段改成正确的就行。
• 模拟器白屏？ 大概率是代码编译报错了。看 IDE 底部的「控制台」面板，红色文字就是错误信息。最常见的错误是 app.json 里配置了不存在的页面路径。
• 依赖安装失败？ 试试用管理员权限运行 IDE（Windows 右键「以管理员身份运行」），或者关掉杀毒软件。有些安全软件会拦截 npm 的请求。
• 真机调试时页面空白？ 检查一下手机上的抖音 App 是不是最新版。旧版本可能不支持最新的调试协议。

好了，环境搭建就到这里。你现在应该有了一个能跑起来的抖音小程序项目。下一章，咱们会深入代码，看看这个「多端模板」到底是怎么工作的。

记住，开发环境就像你的工具箱——工具顺手了，活才能干得快。花点时间把这一步走稳，后面会顺畅很多。