编译：编译当前小程序项目

刷新页面：刷新当前页面

清除缓存：可以清除文件缓存、数据缓存、登录状态和授权数据

上传：填写APP版本号及更新日志，将小程序应用内容上传至服务器

预览：生成二维码并预览上传的版本

详细信息：显示当前小程序的本地目录、文件系统、基础版本和编译版本，并可设置验证TLS版本和证书

特征

多终端应用

一组代码，一次发布，可在字节跳动各大应用上同时使用，让你快速触达今日头条、抖音、西瓜视频等平台用户。

完整内容装载

小程序可根据内容需求和关联度搭载文章、视频、直播等多种类型内容，满足用户从内容到服务的升级需求。

信息流分配

信息流分发为小程序带来无限扩展的精准流量，优质内容的小程序可以获得千万级以上的曝光机会。

货币化能力

为开发者提供多种商业变现方式，将流量获取直接转化为收入变现，致力于不断提高流量变现效率。

直接搜索

基于搜索场景精准引流，通过直接搜索词推荐、字节如意等多种展现形式，强化小程序形态，直观展示小程序服务。

用户覆盖率

构建开发者多点触达用户的能力，为开发者提供多种回访入口，最大化提高召回率，进一步挖掘流量价值。

官方教程

安装开发者工具

开发之前需要安装小程序开发工具。

你可以直接下载开发者工具并根据你使用的操作系统选择对应的安装包，安装完成后即可打开小程序开发者工具，目前支持手机登录和邮箱登录。

更详细的操作指南请参考小程序开发助手，具体能力描述请参考官方开发文档，如有疑问欢迎在字节跳动开放社区咨询反馈。

开发自己的 Byte 小程序

在开发者工具中登录平台账号后，点击“创建小程序”，新建项目。根据提示设置项目类型、项目目录、项目名称（见“开发者平台-开发管理-开发设置”）。点击确定，进入主界面。

编译预览

点击工具栏上的编译按钮，可以在工具左侧的模拟器界面看到小程序的渲染结果。你还可以点击预览按钮，用今日头条、抖音等APP扫描小程序，在手机上体验你的第一个小程序。

小程序代码组成

小程序项目中的单个页面会依赖不同类型的文件：

带 .json 后缀的 JSON 配置文件

带有 .ttml 后缀的 TTML 模板文件

TTSS 样式文件，后缀名为 .ttss

.js后缀的JS脚本文件

接下来我们来看一下这四个文件的作用。

JSON 配置

JSON 是一种数据格式，而不是一种编程语言。在小程序中，JSON 起到的是静态配置的作用。

我们可以看到在项目的根目录下有一个app.json和..json，另外在/logs目录下还有一个logs.json，我们来一一讲解一下它们的用途。

小程序配置app.json

app.json 是当前小程序的全局配置，包括小程序所有页面路径、接口表现、网络超时、底部tab等，一般包含以下内容：

我们先简单说一下这个配置中每一项的含义：

字段 - 用于描述当前小程序的所有页面路径，是为了让客户端知道你的小程序页面当前定义在哪个目录下。

字段-定义小程序所有页面顶部背景颜色，文字颜色定义等。

其他配置详情请参考文档小程序的配置app.json。

工具配置..json

通常人们在使用一个工具的时候，都会根据自己的喜好来进行一些个性化的配置，比如界面颜色，编译配置等，当换到另一台电脑重新安装该工具的时候，还是要重新进行配置。

考虑到这一点，小程序开发者工具会在每个项目的根目录下生成一个.json 文件，你在工具上做的任何配置都会写入这个文件。当你重新安装工具或者换电脑的时候，只需要加载同一个项目的代码包，开发者工具就会自动恢复成你开发项目时的个性化配置，包括编辑器的颜色、上传代码时的自动压缩等一系列选项。

页面配置page.json

这里的page.json其实是用来表示小程序页面相关的配置的，比如/logs目录下的logs.json。

如果你整个小程序的风格都是蓝色的，那么你可以在 app.json 中声明顶部颜色为蓝色。实际情况可能不是这样的，可能你的小程序中每个页面为了区分不同的功能模块，都有不同的色调。所以我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，比如刚才提到的顶部颜色，是否允许下拉刷新等。

JSON 语法

这里介绍一下小程序中 JSON 配置的一些注意事项。

JSON文件都是用大括号{}包裹的，以键的方式表达数据。JSON键必须用双引号包裹。在实际编写JSON时，忘记给键值加双引号或者把双引号写成单引号是一个常见的错误。

JSON 值只能采用以下数据格式。任何其他格式都将触发错误，例如以下示例中的格式。

数字，包括浮点数和整数

字符串必须用双引号括起来

布尔值，true 或

数组需要用方括号 [] 括起来

对象需要用花括号 {} 包裹

Null 另请注意，JSON 文件中不能使用注释。尝试添加注释将导致错误。

TTML 模板

做过网页编程的朋友都知道，网页编程是使用 HTML + CSS + JS 的组合，其中 HTML 用于描述当前页面的结构，CSS 用于描述页面的外观，而 JS 通常用于处理页面与用户的交互。同样，小程序也有同样的作用，TTML 扮演着和 HTML 类似的角色。例如下面的内容：

TTML 与 HTML 非常相似，由标签、属性等组成。但是，它们之间存在许多差异，我们将逐一解释：

标签名称略有不同

在编写 HTML 时，经常使用的标签有 div、p、span。开发者在编写页面时可以基于这些基础标签组合出不同的组件，例如日历、弹窗等。也就是说，既然大家都需要这些组件，我们为何不能将这些常用的组件封装起来，以大大提高我们的开发效率。

从上面的例子可以看出，小程序的TTML中使用的标签有view、text等，这些标签是小程序为开发者封装好的基础能力，我们还提供了地图、视频、音频等组件能力。

更详细的组件描述，请参考下一章小程序能力

还有更多属性，如 tt:if 和表达式，如 {{ }}

在一般的网页开发过程中，我们通常会通过 JS 操作 DOM（对应 HTML 描述生成的树）来响应用户行为引起界面的一些变化。比如当用户点击按钮时，JS 会把一些状态记录在 JS 变量中，通过 DOM API 操作 DOM 的属性或行为，从而引起界面的一些变化。当项目越来越大时，你的代码中就会充斥着很多界面交互逻辑和程序的各种状态变量。显然这不是一个好的开发模式，于是就有了 MVVM 开发模式（例如 Vue），提倡渲染和逻辑分离。简单来说就是不要再让 JS 直接操作 DOM 了，JS 只需要管理状态，然后用一个模板语法来描述状态和界面结构之间的关系。

小程序的框架如果需要在界面上显示一个字符串，也是用这个思路。

TTML 写法如下：

{消息}}

JS只需要管理状态：

这个。（{ 消息： “ “ }）;

通过 {{ }} 语法把变量绑定到接口上，就叫数据绑定。单靠数据绑定还不足以完整描述状态和接口之间的关系，还需要 if/else、for 等控制能力。在小程序中，这些控制能力都是用 tt: 开头的属性来表达的。

TTSS 风格

TTSS拥有CSS的大部分功能，同时小程序还对TTSS做了一些扩展和修改。

增加了新的尺寸单位，开发者在编写 CSS 样式时，需要考虑移动设备屏幕的宽度和设备像素比例不同，使用一些技巧对部分像素单位进行转换。TTSS 在底层支持了新的尺寸单位 rpx，开发者可以省去转换的麻烦，直接交给小程序底层即可。由于转换使用了浮点运算，计算结果会与预期结果略有不同。

提供了全局样式和本地样式，概念和前面的app.json、page.json一样，可以写一个app.ttss作为全局样式，会作用于当前小程序所有页面，本地页面样式page.ttss只对当前页面有效。

此外，TTSS 仅支持一些 CSS 选择器。

软件优势

高效访问

一次开发即可对接字节跳动各类APP，为各类业务提供高效的场景搭建和丰富的玩法，打造最佳的开发体验。

精准配送

小程序作为新型的内容载体，利用字节跳动的推荐算法和搜索能力，向用户精准推荐小程序。

内容丰富

开发者可以利用小程序更多的开放能力和原生体验，在小程序上实现更多的体验闭环，留住更多有价值的用户。

变更日志

3.0.6

重构 IDE 风格

删除了几个多余的菜单

修复搜索异常问题

修复css中访问本地资源异常的问题

修复部分小程序预览图显示异常的问题

修复部分API权限混乱问题

修复自定义编译条件读取失败的问题

修复启动参数不生效的问题

修复打开多个模拟器时IDE显示异常的问题