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

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

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

第一步：建项目目录

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

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

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

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

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

点新建，项目就建好了。

开发者工具界面怎么看？

打开后你会看到：

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

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

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

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

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

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

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

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

四个全局文件（根目录）

文件	作用
app.js	整个小程序的入口，全局变量、全局方法、启动逻辑都在这里，最先执行
app.json	全局配置：页面路由、导航栏样式、窗口配色、权限等。格式严格，写错直接编译失败
app.ttss	全局样式：所有页面通用的字体大小、颜色、边距等，一次设置全站生效
project.config.json	项目配置：APPID、目录、编译设置等，工具自动生成，不用手动改

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

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

文件	作用	对应网页开发
页面.js	页面逻辑：加载事件、点击事件、数据请求、交互逻辑	类似JS
页面.json	页面配置：导航栏、弹窗等，优先级高于全局app.json	无对应
页面.ttml	页面结构：标签、组件、布局	类似HTML
页面.ttss	页面样式：仅当前页面生效，优先级高于全局	类似CSS

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

两个实用技巧

1. 改完代码模拟器没反应？ 手动点一下顶部【编译】按钮就行，不是所有修改都会自动刷新的。

2. 出了问题怎么排查？ 工具底部自带调试器面板，跟浏览器调试工具一样——看DOM结构、网络请求、控制台日志、报错信息，90%的问题都能在这里找到原因。

写在最后

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

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

如果你有业务需求想做抖音小程序，又觉得从零学太慢，可以找我帮你做。我十几年全栈开发经验，从PHP到Golang到小程序，自己写的唯一客服系统，还有抖音开放平台存量私信接口权限——能把小程序和抖音私信打通，做自动回复、多账号聚合、AI客服。这个权限现在新申请的几乎拿不到了。

微信：llike620
官网：https://www.uniqchat.com