1. 模块开发介绍

1.1 简介

中控移动应用开发平台移动端引擎通过系统Webkit浏览器，实现了HTML+CSS+Javascript开发语言和Objective-C/Java/C/C++等Native开发语言之间的桥接，极大的丰富和增强了标准Javascript的能力，令前端开发者通过JS即可调用移动设备的底层功能，如：电话、短信、定位、多媒体等，并能将如高德地图、支付宝等第三方厂商的SDK很容易的集成到自己的App中来。

为满足广大开发者自定义扩展Native plugin的需求，中控移动应用开发平台推出插件扩展SDK，本SDK开放桥接机制，方便具有一定Android基础的开发者自由开发定义Native扩展插件，丰富JS的能力，提升App的用户体验。

1.2 阅读对象

本文档面向所有使用该SDK的Android开发人员、测试人员、合作伙伴以及对此感兴趣的其他用户。阅读该文档要求用户熟悉Android应用开发，并且对Html、CSS、Javascript有一定了解。中控移动应用开发平台移动端引擎强调传输数据的简洁性和统一性，因此选择轻量级的JSON作为Javascript和Native语言之间通讯的数据载体，所以要求开发者同时要熟悉JAVA和Javascript中JSON格式数据的操作。

1.3 开发环境

• Android Stuido3.5或更高版本
• window7/window10/mac

1.4 下载SDK

点击下载完整示例代码

2. 模块开发示例

2.1 项目结构

编译完成后，项目工程结构如下：

需要注意4点：

1）module_app只是一个壳，不要作任何改动，代码只在module_ext_plugin中编写。

2) plugins_开头的.json文件为重要配置文件，新增的话也必须以plugins_开头。

3) 继承JSBridge的java文件才是native方法出口，和.json文件要一一对应。

4) 主要依赖,请勿修改:

api 'com.github.powyin:module_supcon:3.2.0'

2.2 代码编写

1.modile_ext_plugin的配置及开发说明。

1）assets下.json文件为配置文件，必须按照格式编写

参数说明

注：如果有多个功能插件，必须新增对应的以plugins_开头的.json文件，否则无效。

参考案例

2）SimpleAndroidPluginNativiePart.calss 这里才是实现功能插件的核心，主要的代码逻辑都在execute方法中。

action参数：一个功能插件根据需求可能又分为几个小功能模块，那么这里就用到了action参数，此为调用功能模块的标识，对应上述methods中的名称，编写自己的代码逻辑，和原生开发相同。使用方式如下：

args参数： 前端需要传递的参数，都在这里进行接收，根据约定的格式进行获取。

例如：args.getJSONObject(0).getString("参数名");

callbackContext参数： 调用callbackContext返回成功后的数据或者错误时的信息给前端。

例如：callbackContext.success("请求成功");callbackContext.error("解析错误");

注意:

打包平台已经包含的第三方依赖(根据选择的插件进行删减) 如果依赖相同的第三方库，请确保引入的版本号一致:

"com.github.wenchaosong:OCR_identify:3.0.8","com.zxy.android:tiny:1.1.0","org.bouncycastle:bcprov-jdk15on:1.60","org.bouncycastle:bcpkix-jdk15on:1.60","com.github.chrisbanes.photoview:library:1.2.4","com.fasterxml.jackson.core:jackson-core:2.4.4","com.fasterxml.jackson.core:jackson-databind:2.4.4","org.greenrobot:eventbus:3.0.0","com.taobao.android:weex_sdk:0.16.0","com.alibaba:fastjson:1.1.46.android","com.taobao.android:weexplugin-loader:1.3","com.taobao.android:weexplugin-annotation:1.3","com.squareup.okhttp:okhttp:2.3.0","com.squareup.okhttp:okhttp-ws:2.3.0","com.facebook.fresco:fresco:0.12.0","com.facebook.fresco:animated-gif:0.12.0","com.sina.weibo.sdk:core:4.3.6:openDefaultRelease@aar","com.umeng.sdk:common:1.5.3","com.umeng.sdk:utdid:1.1.5.3","com.umeng.sdk:push:4.2.0","com.yanzhenjie:permission:1.0.7","com.tencent.mm.opensdk:wechat-sdk-android-without-mta:+","com.squareup.okhttp3:okhttp-ws:3.4.2",'com.google.code.gson:gson:2.8.5''com.android.support:multidex:1.0.3''io.reactivex.rxjava2:rxjava:2.1.16''io.reactivex.rxjava2:rxandroid:2.0.1''com.github.bumptech.glide:glide:4.2.0''com.github.bumptech.glide:compiler:4.2.0''com.squareup.okhttp3:okhttp:3.4.2''com.squareup.okio:okio:1.9.0''com.squareup.okhttp3:okhttp-ws:3.4.2''com.squareup.picasso:picasso:2.5.2''com.gyf.immersionbar:immersionbar:3.0.0'"tv.danmaku.ijk.media:ijkplayer-java:0.8.8""com.github.chrisbanes.photoview:library:1.2.4"

2.返回数据给前端,可以调用callbackContext.success("") ,callbackContext.error("")。

2.3 代码调试

本demo提供测试功能，在主页的右上方有一个调试按钮，如图所示：

点击按钮弹出一个页面，最上方的地址输入浏览器打开即可，显示如下页面：

注意

• 手机和电脑必须在同一局域网内。

双击打开.html文件,点击浏览器页面中的 运行 按钮，APP首页加载的内容将会变成 这里可以写你的测试页面 提示，说明连接成功，可以进行调试操作。APP显示如下：

注意

• 如果点击开启log显示，那么通过js调用之后将会打印相关信息，建议通过studio查看log，显示的更为详细。

通过注入JS代码来测试自己代码块

1.不管哪个功能模块，开头必须添加navigator. 之后拼接自己.json文件中配置的name参数，如果此功能插件分几个小功能模块的话，那么需要继续拼接.json文件中的methods 拿此Demo工程为例，拼接结果为:

navigator.test.ckme();

2.第二步需要填充()中的内容，此处已经规范了格式，固定返回一个成功失败方法，例如：

navigator.test.ckme(function(success){alert(success)},function(error){});

双击打开.js文件，覆盖输入此代码，点击运行 ，APP显示如下内容:

可以看到，弹出的内容就是我们代码中设置的内容：

3.通过js调用传入数据,我们规定格式为{'name':'supcon','gerder':'男性'},以此为例，可自定义内容。

此时修改execute方法中代码逻辑，如图：

调用navigator.test.ckme(function(success){alert(success)},function(error){},{'name':'supcon','gerder':'男性'});APP此刻显示内容为:：

至此简单的调试流程已经完成。

3. 上传插件包

功能插件调试完成之后，打包上传即可，大致流程如下:

生成的aar包位置如下:

新建一个文件夹，名称必须为android，把aar包放入android文件夹内，同级文件夹下放入修改的json文件，且json文件需要改名为plugin.json，如下图所示:

然后压缩成.zip包，压缩方式为选中所有文件进行压缩，否则将不能识别，如图:

上传到平台（见中控易动—提供APP一站式SaaS服务）

注意

• 所有文件夹命名必须为英文。