界面

启动页

第一次打开 IDE 时会出现项目选择界面,您可以通过以下两种方式打开项目:

  • 新建项目:新建一个新的小程序脚手架或通过 demo 模板新建项目,适合开发新的小程序。
  • 打开项目:打开已经存在本地磁盘的项目文件。您可以选择以下两种方式:
    • 选择打开本地已经存在的小程序文件路径。
    • 从左侧项目记录中选择最近打开过的项目。
      undefined

新建页

您可以选择空白模板或开放平台提供的 demo 模板进行开发。

推荐您选择不同的 demo 模板来了解小程序可以实现的能力,demo 模板还在不断的动态更新中。

选择好模板后,点击 下一步 进入项目设置页。

undefined

项目设置页

在项目设置页, 您需要设置以下选项:

  • 项目名称:项目在 IDE 中的显示的名称。
  • 项目路径:项目在磁盘上存储的位置。
  • 后端服务:当前项目是否需要开启云服务,具体参见 云服务介绍
    设置完成点击 完成 打开 IDE。

undefined

主界面

主界面由 菜单栏工具栏功能面板编辑器模拟器 组成。

undefined

工具栏

undefined

下面按照从左到右的顺序依次介绍工具栏中的选项。

1.应用类型

当前小程序的开发环境,默认在小程序环境中运行。因为小程序除了可以在支付宝客户端运行,还支持在钉钉、mPaaS、高德等其他 app 环境中运行,具体参见 多端支持

2.关联应用

一个开发者账号下可以有多个小程序,所以账号登录后,需要去关联当前正在开发的小程序。关联应用会决定您在点击上传代码时会将代码包上传到哪个小程序。

3.云服务

仅当项目类型是云服务时出现,会决定您当前的云服务代码上传到哪个云服务服务器上。

4.编译模式

默认是普通编译模式,即默认刷新模拟器会打开首页,并且没有传入任何参数。您可以添加自定义的编译模式,让模拟器刷新时从其他页面启动,并带上相关参数,提升调试效率。
界面 - 图6
5.刷新

点击刷新按钮会将当前模拟器刷新,当更改代码并保存时也会自动进行刷新。

6.远程调试

真机调试时可以在 IDE 中查看调试信息,具体参见 调试

7.预览

将临时代码推送到客户端,可以在手机中查看真机效果,具体参见 调试

8.上传

根据所关联的应用将小程序代码上传到小程序后台,可以指定上传版本,若不指定会默认在当前版本的最后一位加 1(当前版本必须大于上一个版本),上传结束后会在小程序后台生成一条唯一的开发版本。

关于版本管理的标准规范,可以参考 Semver
界面 - 图7
9.详情

查看当前开发环境的相关信息,此处的急速构建模式是新的编译模式,具体参见 新构建方案
界面 - 图8

模拟器

模拟器是 IDE 的核心功能,开发者可以通过模拟器模拟小程序在客户端内真实的运行环境。
界面 - 图9

  • 设备切换

开发者可以选择不同的设备,也可以添加自定义设备来调试小程序在不同尺寸机型上的适配问题。
界面 - 图10

  • 显示百分比

开发者可以控制模拟器的显示比例。
界面 - 图11

  • 编译日志

点击后会打开编译日志窗口,一般用于排查编译错误。

  • 模拟屏幕

通过整个屏幕查看开发的效果。

  • 路径

当前模拟器调试的小程序页面路径地址。

  • 页面参数

当前模拟环境的参数后缀。

  • mock

在模拟器进行调试的时候,很多真实手机上的操作,比如截屏、晃动,可以通过 mock 面板来模拟。

undefined

功能面板

  • 目录树

查看或者打开当前项目中的文件

  • 搜索

在所有的文件中通过关键字进行查找。

集成了常用的 git 命令,能够可视化的对 git 进行各种操作。

利用云测报告,可以帮助广大开发者更全面地检测小程序缺陷,评估产品质量,提高审核通过率。

小程序后端解决方案,快速搭建后端应用。

可视化管理所有的包依赖,替代在命令行中输入代码。

原文: https://docs.alipay.com/mini/ide/mbtk4s