插件开发指南

1. 模块开发介绍

1.1 简介

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

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

1.2 阅读对象

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

1.3 开发环境

  • Xcode9.0或更高版本
  • macOS 10.12.6以上

1.4 下载SDK

点击下载SDK(包含DEMO)

2. 模块开发示例

2.1 配置plugin.json

plugin.json定义了插件的基本信息,我们在开发插件之前需要先定义好插件名称、插件对应的类的名称、开放给JS的方法等。

字段解释:

  • name:对应值为插件的名称,JS中通过该名称来使用插件。
  • version:对应值为插件的版本。
  • ios_entry:对应值为插件对应的类的名称,插件类需要继承于CDVPlugin类。
  • methods:可选配置项。开放给JS的实例方法,多个方法以英文逗号隔开,此方法实现时需带一个参数。
  • onload:可选配置项。布尔类型,若配置,引擎将在应用启动的时候调用该插件的pluginInitialize:方法,注意该方法需是对象方法,没有参数。
  • ios_quriesSchemes:可配置选项,应用访问白名单,字符串数组类型。

如图,在EMobileApp工程中找到EMobileApp目录下的plugin.json文件,在里面添加模块的配置信息 -w1059

2.2 创建和配置静态库工程

打开Xcode,在菜单中选择File-New-Target...,在Framework & Library中选择Framework,创建一个名为PluginDemo的Target。 -w1058 -w730

这里我们将PluginDemo工程作为EMobileApp工程的一个依赖工程,这样做的好处是运行EMobileApp工程时会自动编译PluginDemo工程,并且可以方便地在PluginDemo工程中打断点进行调试。

然后再按照下图,设置Framework为静态库: -w1075

将静态库的Build Active Architecture Only设置为No -w1059

将静态库的iOS Deployment Target设置为9.0,如图: -w1062

设置静态库Search Paths,在Build Settings - Search Paths - Framework Search Paths 增加 $(PROJECT_DIR)/EMobileApp/Engine/Frameworks ,如图: -w1198

2.3 创建插件类

在PluginDemo文件夹中新建一个EMDemoPlugin类,继承于CDVPlugin类,其中CDVPlugin类为插件的基类。插件开发过程中文件命名时提倡加前缀,以避免和其它插件冲突。

插件生命周期:

  • 当在前端JS中首次调用模块的方法时,引擎会调用插件类的- (void)pluginInitialize方法进行初始化;

  • 当模块所在的页面被销毁时,模块类也会被销毁,引擎会主动调用其 - (void)dispose 方法。

-w1055 -w806

2.4 插件方法实现

这里我们向js端开放一个echo1方法,用于显示系统提示框。方法参数类型为CDVInvokedUrlCommand,可以通过commandarguments属性来获取js传入的参数,通过插件commandDelegate属性的sendPluginResult:callbackId:方法回传数据给js端。

-w763

2.5 js调用插件方法

前端JS必须使用JSON格式数据作为JS与Native之间交换数据的传参,移动端引擎会对JS传入的参数进行解析并封装。

找到EMobileApp工程中www目录下的index.html,添加调用pluginDemo插件的echo1方法的代码: -w1081

另外您也可以只用我们的开发调试工具调用插件的方法

运行EMobileApp工程到手机,点击屏幕上悬浮的调试工具按钮,找到PC端调试地址

打开电脑浏览器,输入调试地址(注意:电脑需和手机在同一个局域网) 找到单文件调试-目录-example-example.js,添加调用pluginDemo插件的echo1方法的代码: -w1255 点击运行按钮,即可看到效果。

2.6 插件中引用第三方库

直接将第三方库拖入到EMobileApp工程Frameworks文件夹

3. 上传插件包

3.1 插件包介绍

插件包根目录建议以该插件的JS对象名命名,这里以PluginDemo为例,插件包内可能包含ios、android文件夹以及plugin.json,其中ios文件夹内可能包含framework、target、plugins文件夹。

目录解释:

  • target目录:存放编译生成的静态库文件(.a和.h文件)、第三方Static类型的framework库(直接添加到工程就能正常使用的是Static类型的,而需要在工程Embedded Binaries处添加才能正常使用的是Dynamic类型的)以及bundle

  • framework目录:(可选配置项)存放第三方Dynamic类型的framework库(需要在工程Embedded Binaries处添加才能正常使用的是Dynamic类型的)

3.2 制作pluginDemo插件包

  1. 新建一个pluginDemo文件夹。
  2. 在pluginDemo文件夹里面创建一个plugin.json的文本文件,拷贝EMobileApp工程中plugin.json的内容到plugin.json中(注意:双引号一定要是英文状态下的)。
  3. 在pluginDemo文件夹里面创建ios文件夹,在ios文件夹里面创建target文件夹,将EMobileApp工程编译出来的PluginDemo.framework库拷贝到target目录下。注意.framework库必须是真机环境的,并且需要支持armv7和arm64架构,可以在终端用以下命令查看.framework库支持的架构: lipo -info PluginDemo.framework/PluginDemo

    使用file命令查看库的类型: file PluginDemo.framework/PluginDemo

  4. 将pluginDemo文件夹压缩成pluginDemo.zip
**注意:编译工程**

①选择Build Settings-->Valid Architectures-->arm64、armv7 这是图片 ②选择Edit Scheme-->Run-->Release 这是图片 ③选择真机设备编译之后生成的framework

3.3 制作pluginDemo插件API文档包

具体参考标准API文档

3.4 上传插件包到云端

登录到中控易动网站控制台,进入”我的插件“,点击”创建自定义插件“按钮,输入插件的相关信息 -w1265

4. 其他SDK说明

4.1 显示UI视图

CDVPlugin提供viewController属性来获取当前所在视图控制器,可通过该控制器对目标控制器进行push或者present操作

// push
[self.viewController.navigationController pushViewController:controller animated:YES];

// present
[self.viewController presentViewController:controller animated:YES completion:nil];

4.2 启动方法

如果需要插件在应用程序启动的时候就执行一些操作,需先在plugin.json中配置onload为true,然后重载插件的- (void)pluginInitialize方法,如果需要获取应用程序在启动时候的启动参数,可通过CDVPlugin提供的- (NSDictionary *)launchOptions方法获取。

4.3 资源文件的处理

对于图片、xib、js等一些静态资源在上传到云端时,必需以bundle的形式放到target目录下,才可以正确的被引入到工程中,读取相关资源的代码为:

// 加载图片
UIImage image = [UIImage imageNamed:@"EMCordova.bundle/1.png"];
// 加载xib
[[[NSBundle bundleForClass:self.class] loadNibNamed:@"EMCordova.bundle/EMLimitView" owner:self options:nil] firstObject];
// 获取path
NSString *path = [[NSBundle mainBundle].bundlePath stringByAppendingPathComponent:@"EMCordova.bundle/1.png"];

审核规范

中控易动官方QQ技术交流群:772088010