抖音小程序开发第一课：工具安装、项目创建和源码结构全拆解

上节课讲了抖音小程序从注册到上线的完整流程，很多老板看完就来找我："懂了，那具体怎么开发？"

今天这篇，咱们直接上手——打开开发者工具，建项目，看源码结构，把开发的"地基"先打好。

第一步：建项目目录

在电脑上建一个空文件夹，专门当小程序项目的工作目录。

⚠️ 文件夹名称必须是纯英文，不要有中文、空格、特殊符号。这不是强迫症，是避免后面编译报错——踩过坑的人都知道有多烦。

第二步：开发者工具新建项目

打开抖音开发者工具，选小程序项目类型，点新建。

• 项目目录：选刚才建的空文件夹
• 项目名称：随便写，公司名产品名都行
• APP ID：仅本地开发测试的话，直接选【沙盒APPID】，不用填正式的
• 后端服务：选"不使用云服务"
• 开发语言：JavaScript
• 项目模板：选空白模板

点新建，项目就建好了。

开发者工具界面怎么看？

打开后你会看到：

• 左侧：模拟器，实时预览小程序运行效果
• 右侧：文件树源码列表，业务代码在这里写

上方一排按钮是核心功能，挨个说清楚：

编译：改完代码点这个，模拟器会刷新显示最新效果。平时用得最多。

预览：生成一个二维码，用抖音扫码就能在手机上看到真实效果。给客户看演示就用这个。

真机调试：不用数据线，手机和电脑连同一个WiFi，扫码就能把代码同步到手机上，还能实时看日志、断点调试。找bug必备。

上传：开发完了、测试没问题了，才用这个把代码包上传到抖音后台，然后提交审核上线。

源码文件结构，搞懂这个就入门了

打开项目文件夹，你会看到这些文件。我把每个文件的作用讲清楚：

四个全局文件（根目录）

每个页面的四个文件（pages目录里）

小程序的每个页面都固定由四个文件组成：

如果你学过HTML/CSS/JS（之前我写的那个系列教程），这个结构理解起来会很快——tttml就是HTML的抖音版，ttss就是CSS的抖音版。

两个实用技巧

1. 改完代码模拟器没反应？ 手动点一下顶部【编译】按钮就行，不是所有修改都会自动刷新的。
2. 出了问题怎么排查？ 工具底部自带调试器面板，跟浏览器调试工具一样——看DOM结构、网络请求、控制台日志、报错信息，90%的问题都能在这里找到原因。

写在最后

今天讲的内容是抖音小程序开发的基础中的基础——工具怎么用、文件结构怎么理解。把这些搞清楚了，后面写页面逻辑、对接接口、做交互都不难。

不过说实话，小程序开发涉及的东西不少：页面搭建、接口对接、审核规范、类目限制，自己摸索要花不少时间。