MTL原生插件扩展

一、概述

从5.0版本开始,mtl添加了对原生插件自定义扩展的支持,通过mtl提供的原生插件扩展机制,开发者可以不限于mtl目前提供的原生功能,无限制的扩展原生能力。要开发一个原生插件,需要具备一定的原生开发能力(ios,android)。

二、根据模板创建一个原生插件

1.确保mtl-cli命令行工具安装完成 2.新建一个目录,在终端输入"mtl createPlugin",如下图所示:image.png

3.选择mtl-plugin-custom插件模板,之后会生成一个标准的扩展插件,如下图所示: image.png

4.package.json文件,描述了插件名称,插件版本,插件ID,插件描述等基本信息 5.plugin.xml文件,添加了与原生相关的配置,如下图所示: image.png

6.pluginJS/index.js,封装了js调用原生的方法,需要通过window.mtl.bridgeCall()方法调用原生方法,如下图所示: image.png 其中,getCustomResult()为业务调用的js方法,object为调用方法时传入的参数,MTLCustomService为plugin.xml中配置的key,getCustomPluginReslut为key对应的原生类(MTL_CustomService)中的原生方法。 7.scr/android和scr/ios两个文件夹中,存放着android和ios的原生类,用户需要自己实现其中的方法,以供js调用。

三、发布插件

1.打包,将开发完成的插件压缩成zip包 2.使用友户通账户登录http://123.103.9.204:8050/ump/html/login.jsp# 3.选择构建管理--MTL插件,如下图所示: image.png

4.点击新增,上传刚刚打好的压缩包,如下图所示:

image.png

5.点击确定,即自定义插件上传成功。

四、插件调用

1.在工程中添加插件,使用"mtl add-plugin"命令,选择自己上传的插件,如下图所示: image.png

2.添加插件后,检查project.json文件,出现下图中的插件配置信息,即表示插件添加成功,同时,在工程目录下会出现customPlugin文件夹,该文件夹下包含所有用户添加的插件js文件

image.png

3.在需要使用插件中方法的页面,使用mtl.loadCustomPlugin()方法加载自己的插件,在业务逻辑需要调用的地方,通过window调用即可,如下图: image.png

上图中,在页面的声明周期方法中加载自定义插件,在按钮点击事件中,调用自定义插件中的方法