本章内容出自《小程序开发不求人》电子书，点击下载完整版
启动界面
在小程序开发者工具（简称 IDE）的启动界面，开发者可以新建项目、打开现有项目、删除最近项目记录。
新建项目
新建项目类型分为两类：示例模板 与 空白脚手架。
示例模板项目
开放平台提供入门、UI、开放能力三类模板，内含大量示例代码（仍在持续更新中），为开发者演示如何实现小程序各项能力（参见 快速示例）。新建步骤如下：
- 点击 模板选取 标签。
- 点击需要创建的模板，然后点击 下一步；或者直接双击所需模板卡片。
-
在 新建项目 页面：
- 设置 项目名称 与 项目路径；
- 点击 完成，进入主界面。
空白脚手架项目
空白脚手架仅包含最基础的文件结构。新建步骤如下：
- 在左侧边栏选择 项目类型（例如支付宝小程序、淘宝商家应用等类型）。
- 在 最近使用 列表中，点击 ➕ 卡片。
-
在 新建项目 页面：
- 设置 项目名称 与 项目路径；
- 选配 后端服务：不启用云服务、小程序 Serverless 或 小程序云应用；
- 点击 完成，进入主界面。
打开项目
本地现有项目也有两种打开方式：选择最近项目 与 选择项目文件夹。
选择最近项目
在启动界面 最近使用 列表中，点击需要打开的项目，然后点击 打开；或者直接双击所需项目卡片。
选择项目文件夹
- 点击右上角的 打开项目，弹出文件窗口。
- 导航至项目文件夹，点击 选择文件夹。
-
在 打开本地项目 页面：
- 确认或修改 项目名称 与 项目类型；
- 点击 打开，进入主界面。
删除最近项目记录
如需维持启动界面整洁，首先右键点击希望清理的项目卡片，然后点击 删除。
注意：此项操作仅会清理启动界面记录，不会实际删除硬盘中的项目文件。
主界面
小程序开发者工具的主界面由 菜单栏、工具栏、功能面板、编辑器、调试器、模拟器 组成。
主界面各区域简要说明：
- 菜单栏：文件、编辑、窗口、工具、帮助等基础功能。
- 工具栏：更改小程序类型与关联、显示/隐藏界面区域、真机调试与预览等功能。
- 功能面板：切换文件树、搜索、git 管理、npm 管理、插件市场、实验室、云服务等边栏。
- 编辑器：输入与修改代码的区域。
- 调试器：用于模拟器调试、真机调试、性能调试。
- 模拟器：模拟运行小程序，便于快速预览、初步调试。
说明：使用工具栏中部三个按钮，可以显示或隐藏界面主要区域，其中 编辑器与 调试器 无法同时隐藏。
工具栏
小程序开发者工具（简称 IDE）的工具栏位于主界面顶部，包含 IDE 中最常用的主要功能。本文档从左至右介绍各项功能。
小程序
选择小程序的运行环境类型（默认为支付宝小程序），此外还支持淘宝、钉钉、高德等运行环境（参见 多端支持）。
关联小程序
每个开发者账号可以拥有多个小程序的开发权限，因此需要关联具体小程序，决定小程序代码的上传位置。
在此项下拉列表中，点击 + 创建小程序，进入小程序管理页面，可以创建小程序供后续关联。
说明：在创建小程序命名时，注意遵循名称规范。
如需关联其他账号中的小程序，但开发者账号还没有开发权限的话：
- 使用主账号登录小程序开发中心，点击所需小程序，跳转至开发管理页面。
- 在左侧导航栏选择 成员管理，点击 添加，按照提示添加开发成员。
- 使用开发者账号在支付宝客户端 朋友 > 服务提醒 中接受邀请。
- 使用开发者账号登录 IDE，关联小程序。
关联云服务
说明：在最初新建项目环节，如果后端选用云应用，此项功能才会显示。
如果未启用云服务或者选用 Serverless，此项功能则会隐藏。
每个小程序可以创建多个云应用，而云应用又包含测试与正式环境。因此需要关联具体的云应用环境，决定云应用代码的上传位置。在关联云应用环境之后，此项下拉列表右侧会出现 ⚙️ 按钮，用于上传代码与管理云应用。
在此项下拉列表中，点击 + 创建新服务，进入云服务管理页面，可以创建云应用后续关联。
显示/隐藏界面区域
点击 编辑器、调试器、模拟器，可以分别显示与隐藏这三个区域。
说明：功能面板/编辑器 会同时显示/隐藏，而 编辑器/调试器 无法同时隐藏。
编译模式
在普通编译模式下，小程序初始的启动页面是 app.json 文件 pages 列表的首个页面，且不带任何参数。
如需快速调试其他页面 或 设置参数：
- 在此项下拉列表中点击 + 添加编译模式。
- 在弹窗中填写 模式名称、页面参数、全局参数，选择 启动页面，点击 确定。
- 随后模拟器将会改用新的启动页面，同时自动传入设置好的参数。
说明：弹窗中如果勾选 下次编译时模拟更新，可以模拟小程序更新效果，详情请参见 UpdateManager。
清除缓存
清除 数据缓存、授权数据、文件缓存、构建缓存、网络缓存。
真机调试
通过 IDE 远程至真机，设置断点、查看运行信息。详情请参见 真机调试。
说明：如不希望频繁扫码，可以使用 自动预览 选项。
预览
使用真机预览小程序，初步查看 API 真机调用效果。
说明：如不希望频繁扫码，可以使用 自动预览 选项。
上传
上传项目代码至关联小程序的后台空间。在小程序完成开发之后，项目代码需要打包上传至开放平台，然后才能提交审核与发布上线。目前只能上传图片不支持上传视频。
前提条件
在上传代码之前，本地项目需要关联至后台小程序，用于确定上传位置。如果尚未关联，点击工具栏右侧的 上传 菜单时，会有弹窗提示进行关联。IDE 中选择的小程序与后台查看版本详情的小程序需要保持一致。
上传方法
- 在工具栏右侧的 上传 菜单栏中，点击 上传 按钮。
- 上传成功之后，后台会生成新的开发版本条目。查看方法：登录 小程序开发中心，点击所需小程序，版本条目会在开发管理页面的 版本详情 区域显示。
上传之前的选项：
- 上传版本：每次上传时版本默认递增 0.0.1（本次版本必须大于线上版本），从而确保后台每份代码版本唯一。
- 创建预审核任务：免费调用一台真机进行测试（每天 5 次限额），详情请参见 预审核。
配置域名白名单
在上传之前阶段（模拟器预览/调试、真机预览/调试），小程序默认不会限制域名访问；但在上传之后阶段（体验版本、审核版本、灰度版本、线上版本），小程序只能访问白名单域名。若未成功配置白名单，可能会导致小程序页面白屏。详细操作可参见 配置 H5 服务器域名白名单。
配置步骤：
- 登录 小程序开发中心，选择所需小程序。
- 在左侧导航栏点击 设置，进入设置页面。
- 点击 开发设置 标签，在 服务器域名白名单 区域点击 添加。
- 填写所需域名，点击 确定。
注意：添加的域名必须支持 HTTPS 协议，而且已经完成备案。
详情
- 查看关联应用名称、项目本地目录、线上版本。
- 选择是否启用自定义组件 component2 编译、axml 严格语法检查。
- 查看 my.request、web-view 域名白名单信息。
设置是否忽略这两项域名检查。
注意：小程序 体验版 与 提审之后版本 无法继续忽略检查，届时请务必设置域名白名单！
域名白名单设置入口有两处：
- 在详情页面，点击 域名信息 右侧蓝色按钮，进入设置页面，点击 开发设置。
- 登录 我的小程序，选择所需小程序；从左侧边栏进入 设置 > 开发设置。
登录/用户头像
- 在开发者未登录时，显示 登录 按钮。
- 在开发者登录后，显示开发者头像。可以查看消息通知，或者退出登录。
模拟器
小程序项目通过编译之后，自动在模拟器中运行，无需真机即可快速预览。基础互动方式是通过鼠标点击、拖拽来模拟手指触摸、拖动操作。
在默认设置下，每次保存已变更代码时都会触发模拟器自动刷新，实现准实时预览效果。关闭自动刷新的方法：取消勾选模拟器右下角 自动更新。
模拟器布局
模拟器顶部各项功能（从左至右）：
- 设备尺寸：选择预设的 iOS 或安卓设备尺寸，或者新建自定义的设备尺寸，用于测试适配性。
- 缩放比例：控制小程序的显示缩放比例。
- 刷新：重新编译代码并刷新模拟器。
- 小工具：打开/关闭模拟器的小工具菜单。
- 模拟器日志：在编辑器打开模拟器日志窗口。
- 独立窗口：改用独立窗口方式显示模拟器。
在独立窗口模式下，界面新增 窗口置顶 按钮；独立窗口 变为 合并窗口 按钮。
模拟器底部三项功能：
- 页面路径：显示当前页面路径。点击路径，可直接打开当前页面 js 文件。
- 页面参数：显示当前页面收到的参数。点击参数，可快速复制至剪贴板。
- 自动刷新：如需避免频繁刷新，可取消勾选此功能。
说明：点击 ^ 可以切换显示 页面路径 或 页面参数。
模拟器小工具
点击图中蓝色小工具图标，显示/隐藏更多模拟功能：
首页：模拟按下 Home 键，小程序退回后台。用于测试生命周期函数 onShow与 onHide，参见 小程序运行机制。
定位：输入设置 经纬度 模拟信息，用于测试 my.getLocation 获取用户位置端口（经纬度模拟信息需要输入浮点数，精确至 1 位小数以上）。
扫码：输入设置 扫码返回数据 模拟信息，用于测试 my.scan 扫一扫端口。
摇一摇：模拟摇一摇动作，用于测试 my.watchShake 摇一摇端口。
授权：设置 用户信息、地理位置、相册、相机、麦克风 模拟权限，可用于测试my.getLocation、my.chooseImage 等端口的权限请求步骤（在已获得用户信息授权时，还提供删除用户信息授权的选项）。
裁剪：模拟用户截屏情况，用于测试 my.onUserCaptureScreen 截屏事件监听端口。
内存警告：模拟内存不足情况，用于测试 my.onMemoryWarning 内存警告监听端口。
mtop 环境切换：可进行环境切换，切换为 日常、预发、线上。
