MTL IDE快速开始

MTL IDE是一款轻量级Web可视化开发工具,依托强大的vscode,不需要复杂的安装步骤,即装即用。 IDE为MTL开发者量身打造,开发者可以十分方便简捷的创建工程、添加页面、预览、调试、打包、发布。 同时,在开发过程中,IDE提供了强大的代码提示、补全能力,只需知道API的部分名称,IDE会自动提示并补全代码。 更多强大功能,等待开发者去探索。。。

1.获取VS Code

Visual Studio Code(以下简称vscode)是一个轻量且强大的跨平台开源代码编辑器(IDE),支持Windows,OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统。 vscode具有广泛的开发者受众基础,因此MTL IDE基于vscode平台进行开发。 [点击下载vscode]

2.安装运行环境

(1). 安装node.js及npm,若之前安装过,则忽略此步骤。[点击下载node.js][安装教程]

(2). 安装mtl运行环境,打开终端输入npm -g install mtl-cli。

(3). 安装git,由于mtl用到git命令需要用户安装git。[点击下载git][安装教程]

3.安装MTL插件

在完成vscode的安装后,我们需要安装mtl-vs插件,之后即可开始MTL开发之旅。
(1). 点击vscode左侧菜单栏的插件按钮
(2). 在搜索框中搜索mtl-vs或mtl,即可找到插件
(3). 点击进行安装即可 如图所示:

4.创建工程

MTL工作区,如图所示:

(1). MTL工作区内,开发者可以创建工程,打开工程,添加页面,配置工程文件,查看帮助等。若工作区被关闭,可以点击目录区右上角的工程向导按钮重新打开工作区。
(2). 选择创建工程,修改工程名,选择工程存放目录,选择模板,点击生成工程按钮,即可创建一个mtl工程。
(3). 工程创建成功后,会自动打开所创建的工程。
(4). 开发者根据各自的业务,开始编写代码。

5.添加页面

MTL IDE除了提供工程模板以为,还提供丰富的页面目标供开发者使用。如图所示:

(1). 在工作区内选择添加页面,添加页面名称->选择页面模板,点击添加,即可添加页面至工程目录内
(2). 创建后的页面如下图所示:

*若添加页面成功后,工程目录内没有显示,点击刷新即可

6.调试

成功添加页面后,我们使用MTL IDE进行调试;
(1).修改project.json工程配置文件,startPage修改成刚刚添加的页面路径即"Login/index.html",如图所示:

(2).在脚本区,选择debug ->wx.js,也可以选择Android、iOS、钉钉的debug方式

(3).可以使用浏览器进行调试[具体细节请参阅]

7.预览

MTL IDE提供十分便利的预览方式,帮助开发者查看、适配自己的代码在各端的运行情况。
(1).脚本区点击preview目录,选择需要预览的平台,如图所示:

(2).编译成功后,会生成对应平台的二维码,使用各端的preview程序扫码进行预览。[具体细节请参阅]
(3).预览程序下载地址

8.打包

后续由友空间提供构建打包相关文档。

9.MTL IDE功能说明

如图所示:

(1). 点击左侧菜单栏按钮即可打开MTL IDE,包含工程目录、执行脚本目录、API目录、工程配置区等功能模块。
(2). 工程目录即开发者打开或创建的mtl工程,可以清晰的看到整个工程结构。
(3). 脚本目录存放开发者常用脚本,功能包括打包、调试、预览等;另外,脚本支持自定义,开发者可在标准mtl工程目录的script目录下添加自己的脚本:

  • 构建脚本(build)用于打包工程,目前支持Android、iOS打包。此构建功能由友空间负责。最新工具已经没有打包脚本,用户也可以从老的工程中把打包脚本拷过来进行打包。
  • 调试脚本(debug)用于页面调试,以iOS为例,该脚本会启动iPhone模拟器并启动一个端口为3000的本地服务,方便开发者调试在手机上的运行效果;[更多细节请参阅]
  • 预览脚本(preview)用于项目预览,该脚本会对工程进行编译并把编译后的静态页面发布到mtl服务器,同时生成一个预览二维码,使用mtl预览程序即可实时预览在多个端的运行效果。[更多细节请参阅]
  • API目录存放开发常用的API示例,包含五大类型100多个api,每个api都有详细说明,另外在实际开发过程中,可点击,api的示例代码即会出现在光标位置。api会随着MTL IDE的更新不断的丰富,方便开发者调用原生能力。

(4). mtl-ide支持打开和打包summer工程,如下图所示: