抖音开放平台Logo
开发者文档
小程序
控制台
  • 开发者工具
  • 开发者工具概述
  • Lite 模式
  • 界面
  • 启动页
  • 菜单栏
  • 工具栏
  • 模拟器
  • 编辑器
  • 调试器
  • 设置
  • 代码编辑
  • 代码编译
  • 代码调试
  • 代码质量
  • 开发辅助
  • 下载
  • IDE 模拟器实现差异
  • 常见问题
  • 抖音云
    • 小程序项目通过编译之后，自动在模拟器中运行，模拟小程序在字节系 App 客户端的表现，无需真机即可快速预览。基础互动方式是通过鼠标点击、拖拽来模拟手指触摸、拖动操作。
    ​
    首次进入，模拟器默认位于主界面左侧：
    ​

    模拟器顶部功能

      •机型：开发者可以选择不同的设备来调试小程序，以观察小程序在不同尺寸机型上的适配问题。
      •缩放比例：开发者可以控制模拟屏幕的显示比例。
      •屏幕高度：开发者可以切换分屏模式调试小程序直播场景。
      •网络连接：开发者可以切换网络来模拟不同网络场景。
      •抖音登录：开发者通过抖音扫码登录，在小程序拿到真实抖音用户信息。
      •模拟工具：模拟手机的部分操作，用以触发特定事件。常见的事件比如切后台、截屏、内存警告等。
      •独立窗口：开发者可以通过点击【独立窗口】按钮，将模拟器区域从开发者工具主窗口弹出，以独立窗口的形式展现。
      •布局切换：该功能可以将模拟器的位置与编辑器、调试器进行左右切换。
    ​

    设备皮肤

    在模拟器中，IDE 提供了常见设备皮肤（iOS/Android）供开发者直观调试小程序在不同机型上的效果，开发者可以通过模拟器顶部菜单栏上的设备列表进行切换。
    ​

    自定义设备

    除了固定的设备外，开发者可以选择不同的设备，也可以选择自定义设备，拖动模拟器来调试小程序在不同尺寸机型上的适配问题。
    ​

    抖音测试账号登录

    从 IDE 3.3.7 版本起，模拟器支持使用抖音扫码绑定测试账号。扫码绑定后，模拟器中依赖用户身份的开放能力，如tt.login，tt.getUserProfile，code2Session 等，将使用该抖音用户的信息，与抖音 App 表现相同。
    开放能力
    模拟器未登录
    模拟器登录抖音账号
    tt.login
    以开发者账号模拟登录，返回开发者账号的模拟 code
    以抖音账号登录，返回抖音账号的 code
    tt.getUserProfile
    返回开发者账号的信息
    返回抖音账号的真实信息
    code2Session
    返回模拟的 openid
    返回抖音账号的真实 openid
    操作方法：
    点击头像区域触发登录二维码，使用抖音 App 扫码登录。
    登录后，头像区域展示抖音头像。
    登录后再次点击头像区域，可以退出登录。
    此外，在模拟器未登录的情况下，若用户使用抖音扫码登录 IDE，模拟器将自动绑定该抖音用户。此时用户如需更改模拟器绑定的抖音用户，可以手动退出登录后，重新使用其他抖音账号扫码绑定。
    ​

    工具栏

    点击模拟器上方小工具图标，显示/隐藏更多模拟功能。
      •主页：切后台事件。
      •返回：返回上一页事件。
      •webview：当前页面有 web-view 组件时，点击按钮后打开当前 web-view 组件所加载页面的控制台。
      •截图：模拟手机截屏事件。
      •内存警告：模拟内存警告事件。
      •定位：模拟手机定位数据，支持地图选择地址经纬度和输入经纬度。
      •罗盘：模拟手机罗盘数据。
      •录屏：模拟手机录屏事件。
      •静音：模拟手机静音能力。
    ​

    主页

    模拟按下主页键，小程序退回后台，展示场景值页面。用于设置场景值和测试生命周期函数 onShow 与 onHide，可查看小程序启动流程。
    ​

    返回

    快速返回到上一页。
    ​

    Webview

    用户调试当前页面为 web-view 标签内嵌的 HTML5 页面。点击 Webview 按钮，会打开当前 web-view 的调试工具。
    说明：此功能仅在 web-view 页面可用，其他页面下置灰无法点击。
    ​

    截图

    模拟用户截屏情况，用于测试 tt.onUserCaptureScreen 截屏事件监听 API。
    ​

    内存警告

    模拟内存不足情况，用于测试 tt.onMemoryWarning 内存警告 API。
    ​

    定位

    通过地图或者输入框设置经纬度模拟信息，用于测试 tt.getLocation 获取用户位置。
    模拟器工具栏「定位」功能使用了高德地图 SDK。
    ​

    罗盘

    用户手机罗盘变化。用于测试 tt.onCompassChange 罗盘数据监听 API。
    ​

    录屏

    模拟用户录屏情况，用于测试 tt.onUserScreenRecord 用户主动录屏监听 API。
    ​

    静音

    模拟手机静音，用于开发音视频静音测试，支持缓存效果。
    ​

    独立窗口

    有不少开发者基于小程序三方框架接入，需要结合自己偏好的编辑器开发，只用开发者工具看效果和调试，因此模拟器支持作为独立窗口弹出。在模拟器右上角单击按钮，可以使用独立窗口显示模拟器或调试器。
    ​

    布局切换

    首次打开工程，模拟器默认位于主界面左侧，当点击“布局切换”按钮，模拟器将切换布局，展示在右侧。
    模拟器布局与工程绑定并缓存到本地中。当下次进入时，模拟器会展示在上次设置的布局位置。
    ​

    模拟器底部功能

    模拟器底部存在四个功能，分别是「页面参数」、「启动路径」、「场景值」、「骨架屏」。
      •页面参数：显示当前页面路径。点击打开，可直接打开当前页面 js 文件；点击复制可快速复制路径至剪贴板；点击右键则展示目录下文件后缀，点击即可打开对应文件。
      •启动路径：显示当前页面收到的参数。点击复制可快速复制参数至剪贴板。
      •场景值：显示当前编译模式设置的场景值。点击复制可快速复制参数至剪贴板。
      •骨架屏：显示当前页面配置的骨架屏路径。详情可以参考骨架屏。