介绍

抖音开发者工具是面向字节系小程序开发者的桌面端集成开发坏境(以下简称抖音 IDE )，抖音 IDE 支持小程序开发、调试、预览、上传等功能。本文将介绍如何用 uni-app 开发字节小程序，以及开发过程中的注意事项，旨在为这一类开发者提高开发体验。

准备

抖音开发者工具

未下载抖音 IDE 的开发者可以前往官网进行下载，若已下载抖音 IDE 的开发者建议检查是否更新到最新版本。

HBuilder

uni-app 官方推荐使用 HBuilder 进行开发，可前往官网进行下载。

开发

建议参考 uniapp 官网快速了解如何使用 HBuilder 创建、运行和发布 uni-app 小程序，本文将不再进行赘述。

配置设置

抖音 IDE 启动路径设置

在 HBuilder 中点击工具栏的运行->运行到小程序模拟器->字节跳动开发者工具后会自动运行抖音 IDE，因此需要在 HBuilder 中设置抖音 IDE 的路径。

点击工具栏的 HBuilder->偏好设置，在运行配置中的【字节跳动小程序开发者工具路径】中设置为抖音 IDE 应用程序的路径即可。

macOS

在访达中找到抖音 IDE 应用程序并拖拽到终端中，将文件地址复制到 HBuilder 中。

Windows

通过抖音 IDE 快捷方式找到程序安装位置，并复制文件路径到 HBuilder 中。

小程序配置设置

小程序项目中的 project.config.json 文件为配置文件，在 uni-app 中可以在 manifest.json 文件中提前设置部分配置，编译完成后会自动同步到 project.config.json 文件中。

打开 manifest.json->字节跳动小程序配置：

uni-app 仅支持部分配置，对于更多其他配置可以在本文常见问题中找到更多解决方案。

注意：

在 uni-app 中勾选了检查安全域名和 TLS 版本后表示需要校验合法域名，而在抖音 IDE 里的不校验合法域名、web-view(业务域名)、TLS 版本以及 HTSS 证书选项恰好相反，注意区分。

导入项目

在 HBuilder 中点击工具栏的运行->运行到小程序模拟器->字节跳动开发者工具后仅打开了抖音 IDE 的前置页，需要手动将 uni-app 的产出导入到抖音 IDE 中(产物默认路径为${uniapp project path}/unpackage/dist/dev/mp-toutiao)。

导入步骤

输入项目的路径后点击右下角的导入按钮即可完成导入。

常见问题

使用 uniapp 开发，每一次编译后都需要在抖音 IDE 重新设置配置

修改项目源代码后会导致 uni-app 重新编译，编译过程中会重新生成 project.config.json 文件，导致在抖音 IDE 中的设置被覆盖。

解决办法：

方法一：在 uni-app 源码工程下的 manifest.json 文件中字节跳动小程序配置进行小程序的配置设置，但 uni-app 只支持部分设置，若有其他配置需求，可使用方法二；

方法二：通常情况下，uni-app 编译后会将产物输出到 unpackage/dist/dev/mp-toutiao 目录下，可以在 dev 目录下(与 mp-toutiao 目录同级)创建 project.config.json 文件，文件内容可参考如下配置，导入时导入 dev 目录而不是 mp-toutiao，此时在抖音 IDE 里面修改的配置将会写入到外层的配置文件中。

uni-app dev 模式下代码未压缩，包体积过大导致不能预览和调试

解决办法：

方法一：

uni-app 已经支持在 dev 模式下开启压缩代码压缩功能，点击 HBuilder 工具栏中的运行->运行到小程序模拟器，开启运行时是否压缩代码选项即可；

方法二：

抖音 IDE 4.0.1 版本已经支持开启调试阶段放宽包体积限制选项，可点击工具栏的详情按钮打开配置面板，在【工程配置】中勾选“调试阶段提升包体积限制上限”选项开启，该配置开启后，主包、分包、总体积限制将会分别提升至 8MB、4MB、24MB(注意：该配置仅在预览和真机调试中生效，上传不支持)。