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插件
    在完成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是依赖包文件。

  • 最后执行npm run start开启本地服务,在浏览器中输入http://localhost:3000来查看运行效果。

(4).html工程可选择【标准工程】和【演示工程】模版;标准工程是一个纯html的空工程;演示工程是一个mtl相关功能演示的demo工程。
(5).【工程元数据】下修改【工程名称】和【组织】,修改后会在【选项菜单】中自动修改【应用唯一标识】。 【选项菜单】下修改【应用名称】和【应用描述】,【应用唯一标识】不可修改而是根据【工程名称】和【组织】自动生成的。


添加页面

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

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

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

MTL扩展

MTl 支持用户以扩展mtl API的方式扩展自己的自定义接口。

实现 Javascript 接口

实现 JavaScript 接口供前端使用,这可能是扩展mtl API最重要的部分。您可以随意根据自身需求扩展mtl 方法,但是您需要调用 MTL.extend 方法将其关联到 mtl 中,symbolPath为扩展的模块名称,module是此扩展模块下包含的属性和方法,可通过mtl.platform在不同的端做差异处理。如下:

function initMtlMyFunc() {
    MTL.extend({
        symbolPath: "myModule",
        module: {
            myProp: "foo",
            myFunc: function (object) {
                const result = { plat: "plat",
                                param:object.params.param 
                            };
                if (mtl.platform === 'h5'){//可根据不同平台做差异处理
                    result.plat = "h5"
                }
                object.success && object.success(result);
                object.complete && object.complete(result);
            }
        }
    });
}

前端调用方式如下:

{
    const value = mtl.myModule.myProp; // "foo" 
    mtl.myModule.myFunc({
        params:{param:"data"},//参数可传可不传
        success: function (res) {
            const value = res.plat;
            alert(value);// "plat"
            alert(res.param);// "data"
        }
    });
    alert(value);// "foo"
}

如果您需要给扩展的方法传参数可以通过params(其实这个参数可以随便起名称,毕竟是用户自己扩展的方法)像上述代码中一样。如图所示:

打开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命令的可以自行定义

  • build 构建脚本(build)用于打包工程,支持Android、iOS打包。目前此构建功能由友空间负责。最新工具已经没有打包脚本,用户也可以从老的工程中把打包脚本拷过来进行打包。
  • debug 调试
  • preview 执行后会生成预览二维码分为以下几种

MTL API快速预览使用

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

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


代码编辑

自动补全

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

API名称提示

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