界面
启动页
第一次打开 IDE 时会出现项目选择界面,您可以通过以下两种方式打开项目:
- 新建项目:新建一个新的小程序脚手架或通过 demo 模板新建项目,适合开发新的小程序。
- 打开项目:打开已经存在本地磁盘的项目文件。您可以选择以下两种方式:
- 选择打开本地已经存在的小程序文件路径。
- 从左侧项目记录中选择最近打开过的项目。
新建页
您可以选择空白模板或开放平台提供的 demo 模板进行开发。
推荐您选择不同的 demo 模板来了解小程序可以实现的能力,demo 模板还在不断的动态更新中。
选择好模板后,点击 下一步 进入项目设置页。
项目设置页
在项目设置页, 您需要设置以下选项:
- 项目名称:项目在 IDE 中的显示的名称。
- 项目路径:项目在磁盘上存储的位置。
- 后端服务:当前项目是否需要开启云服务,具体参见 云服务介绍。
设置完成点击 完成 打开 IDE。
主界面
主界面由 菜单栏、工具栏、功能面板、编辑器、模拟器 组成。
工具栏
下面按照从左到右的顺序依次介绍工具栏中的选项。
1.应用类型
当前小程序的开发环境,默认在小程序环境中运行。因为小程序除了可以在支付宝客户端运行,还支持在钉钉、mPaaS、高德等其他 app 环境中运行,具体参见 多端支持。
2.关联应用
一个开发者账号下可以有多个小程序,所以账号登录后,需要去关联当前正在开发的小程序。关联应用会决定您在点击上传代码时会将代码包上传到哪个小程序。
3.云服务
仅当项目类型是云服务时出现,会决定您当前的云服务代码上传到哪个云服务服务器上。
4.编译模式
默认是普通编译模式,即默认刷新模拟器会打开首页,并且没有传入任何参数。您可以添加自定义的编译模式,让模拟器刷新时从其他页面启动,并带上相关参数,提升调试效率。
5.刷新
点击刷新按钮会将当前模拟器刷新,当更改代码并保存时也会自动进行刷新。
6.远程调试
真机调试时可以在 IDE 中查看调试信息,具体参见 调试。
7.预览
将临时代码推送到客户端,可以在手机中查看真机效果,具体参见 调试。
8.上传
根据所关联的应用将小程序代码上传到小程序后台,可以指定上传版本,若不指定会默认在当前版本的最后一位加 1(当前版本必须大于上一个版本),上传结束后会在小程序后台生成一条唯一的开发版本。
关于版本管理的标准规范,可以参考 Semver。
9.详情
查看当前开发环境的相关信息,此处的急速构建模式是新的编译模式,具体参见 新构建方案。
模拟器
模拟器是 IDE 的核心功能,开发者可以通过模拟器模拟小程序在客户端内真实的运行环境。
- 设备切换
开发者可以选择不同的设备,也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。
- 显示百分比
开发者可以控制模拟器的显示比例。
- 编译日志
点击后会打开编译日志窗口,一般用于排查编译错误。
- 模拟屏幕
通过整个屏幕查看开发的效果。
- 路径
当前模拟器调试的小程序页面路径地址。
- 页面参数
当前模拟环境的参数后缀。
- mock
在模拟器进行调试的时候,很多真实手机上的操作,比如截屏、晃动,可以通过 mock 面板来模拟。
功能面板
- 目录树
查看或者打开当前项目中的文件
- 搜索
在所有的文件中通过关键字进行查找。
集成了常用的 git 命令,能够可视化的对 git 进行各种操作。
利用云测报告,可以帮助广大开发者更全面地检测小程序缺陷,评估产品质量,提高审核通过率。
小程序后端解决方案,快速搭建后端应用。
可视化管理所有的包依赖,替代在命令行中输入代码。