MTL-IDE使用文档

安装MTL IDE

  • 1.获取VS Code
    Visual Studio Code(以下简称vscode)是一个轻量且强大的跨平台开源代码编辑器(IDE),支持Windows,OS X和Linux。内置JavaScript、TypeScript和Node.js支持,而且拥有丰富的插件生态系统。 vscode具有广泛的开发者受众基础,因此MTL IDE基于vscode平台进行开发。 [点击下载vscode]
  • 3.安装MTL插件2.安装运行环境
    在完成vscode的安装后,我们需要安装mtl-vs插件,之后即可开始MTL开发之旅。
    (1). 点击vscode左侧菜单栏的插件按钮
    (2). 在搜索框中搜索mtl-vs或mtl,即可找到插件
    (3). 点击进行安装即可 如图所示:


MTL Workspace

安装成功后会出现MTL工作区 点击进入,再点击工程向导按钮打开工程向导面板。


创建工程

MTL工作区,如图所示:

(1).MTL工作区内,开发者可以创建工程,打开工程,添加页面,配置工程文件,查看帮助等。若工作区被关闭,可以点击目录区右上角的工程向导按钮重新打开工作区。
(2).选择创建工程,修改工程名,选择工程存放目录,用户可选择react工程模板和html工程模版,点击创建按钮,即可创建一个mtl工程。
(3).react工程模版中用户又可选择【标准工程】模版。

  • 创建完React【标准工程】后需要执行npm install命令安装依赖包。

  • 依赖包安装完成会自动生成node_modules文件夹,里面就是安装的相关依赖包;public文件和src文件夹都是react标准工程自带的,script文件夹是mtl调试、预览、打包等相关的js文件;project.json是工程配置文件,package.json是依赖包文件。

(4).html工程可选择【标准工程】和【演示工程】模版;标准工程是一个纯html的空工程;演示工程是一个mtl相关功能演示的demo工程。
(5).【工程元数据】下修改【工程名称】和【组织】,修改后会在【选项菜单】中自动修改【应用唯一标识】。 【选项菜单】下修改【应用名称】和【应用描述】,【应用唯一标识】不可修改而是根据【工程名称】和【组织】自动生成的。 【依赖】中包含【通用原生能力】【智能能力】【多端协同】【分享插件】等能力。


添加页面

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

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

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

打开summer工程

  • 开发者可以打开本地Summer工程,进行编写代码,打包。如下图所示:
  • 工程目录内没有显示构建脚本的话,点击 刷新即可生成summer-android.js和summer-ios.js打包执行脚本。

  • 执行summer-android.js和summer-ios.js文件进行打包,并可以在config参数中添加userName = "ump",也可以修改用户(即:云构建账号),如果不添加默认用户为"ump"。


  • 打包完成以后会在native/output文件夹下生成下载二维码图片,找到二维码用手机扫码安装即可。

配置工程文件

  • 开发者可通过【配置工程文件】修改应用的一些基础设置如:应用名称、工程名称、版本号、起始页、应用标识等信息,对应工程里project.json文件中的相关信息。如下图所示:

  • 配置工程文件中有基础配置、高级、其它和依赖。其中基础配置和依赖在创建工程中已经讲过了,此次我们着重介绍一下高级和其它。

  • 【高级】里面可以修改静态页面的生成目录,并显示此工程用的是何种技术栈,如html、react等。

  • 【其它】里面包含:

    1、小程序设置

    主要来设置钉钉的AppCode和微信的AppCode


    2、iOS原生工程设置

    主要设置URL Scheme


    3、Android原生工程设置


    主要设置URL Scheme和安卓最低版本号


    4、用户信息设置

    主要用来设置打包时候用的友互通ID


工程目录区

  • 工程的资源文件都在这个工程目录下。

     1、html工程在app/css/themes/default/app/android、ios 文件夹下更改android、ios的图标和启动图。<br />       2、react工程在css/themes/default/app/android、ios 文件夹下更改android、ios的图标和启动图。<br />       3、summer工程在public/css/themes/default/app/android、ios 文件夹下更改android、ios的图标和启动  图
  • 操作栏

    • 刷新
    • debug文件
    • 新建按钮,添加页面或创建工程


script 执行脚本区

操作处理

  • 默认脚本
    • 点击查看
    • 向右箭头执行脚本
  • 操作栏
    • 刷新

脚本执行含义
注意:熟悉mtl-cli命令的可以自行定义

MTL API快速预览使用

快速查看mtl api 点击向右箭头快速插入代码,点击?快速查看详细文档

  • api目录结构
    • 点击查看
    • 点击向右箭头插入 编辑文档的光标位置
    • 问号、会索引到官网查看详细文档


代码编辑

自动补全

输入mtl. 会自动提示 mtl相关api

API名称提示

直接输入方法名可以提示相应的api