插件开发指南
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
2. 模块开发示例
2.1 配置plugin.json
plugin.json定义了插件的基本信息,我们在开发插件之前需要先定义好插件名称、插件对应的类的名称、开放给JS的方法等。
字段解释:
name
:对应值为插件的名称,JS中通过该名称来使用插件。version
:对应值为插件的版本。ios_entry
:对应值为插件对应的类的名称,插件类需要继承于CDVPlugin
类。methods
:可选配置项。开放给JS的实例方法,多个方法以英文逗号隔开,此方法实现时需带一个参数。onload
:可选配置项。布尔类型,若配置,引擎将在应用启动的时候调用该插件的pluginInitialize:
方法,注意该方法需是对象方法,没有参数。ios_quriesSchemes
:可配置选项,应用访问白名单,字符串数组类型。
如图,在EMobileApp工程中找到EMobileApp目录下的plugin.json文件,在里面添加模块的配置信息
2.2 创建和配置静态库工程
打开Xcode,在菜单中选择File-New-Target...,在Framework & Library中选择Framework,创建一个名为PluginDemo的Target。
这里我们将PluginDemo工程作为EMobileApp工程的一个依赖工程,这样做的好处是运行EMobileApp工程时会自动编译PluginDemo工程,并且可以方便地在PluginDemo工程中打断点进行调试。
然后再按照下图,设置Framework为静态库:
将静态库的Build Active Architecture Only设置为No
将静态库的iOS Deployment Target设置为9.0,如图:
设置静态库Search Paths,在Build Settings - Search Paths - Framework Search Paths 增加 $(PROJECT_DIR)/EMobileApp/Engine/Frameworks ,如图:
2.3 创建插件类
在PluginDemo文件夹中新建一个EMDemoPlugin类,继承于CDVPlugin类,其中CDVPlugin类为插件的基类。插件开发过程中文件命名时提倡加前缀,以避免和其它插件冲突。
插件生命周期:
当在前端JS中首次调用模块的方法时,引擎会调用插件类的
- (void)pluginInitialize
方法进行初始化;当模块所在的页面被销毁时,模块类也会被销毁,引擎会主动调用其
- (void)dispose
方法。
2.4 插件方法实现
这里我们向js端开放一个echo1
方法,用于显示系统提示框。方法参数类型为CDVInvokedUrlCommand
,可以通过command
的arguments
属性来获取js传入的参数,通过插件commandDelegate
属性的sendPluginResult:callbackId:
方法回传数据给js端。
2.5 js调用插件方法
前端JS必须使用JSON格式数据作为JS与Native之间交换数据的传参,移动端引擎会对JS传入的参数进行解析并封装。
找到EMobileApp工程中www目录下的index.html,添加调用pluginDemo插件的echo1方法的代码:
另外您也可以只用我们的开发调试工具调用插件的方法
运行EMobileApp工程到手机,点击屏幕上悬浮的调试工具按钮,找到PC端调试地址
打开电脑浏览器,输入调试地址(注意:电脑需和手机在同一个局域网) 找到单文件调试-目录-example-example.js,添加调用pluginDemo插件的echo1方法的代码: 点击运行按钮,即可看到效果。
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插件包
- 新建一个pluginDemo文件夹。
- 在pluginDemo文件夹里面创建一个plugin.json的文本文件,拷贝EMobileApp工程中plugin.json的内容到plugin.json中(注意:双引号一定要是英文状态下的)。
在pluginDemo文件夹里面创建ios文件夹,在ios文件夹里面创建target文件夹,将EMobileApp工程编译出来的PluginDemo.framework库拷贝到target目录下。注意.framework库必须是真机环境的,并且需要支持armv7和arm64架构,可以在终端用以下命令查看.framework库支持的架构:
lipo -info PluginDemo.framework/PluginDemo
使用file命令查看库的类型:
file PluginDemo.framework/PluginDemo
- 将pluginDemo文件夹压缩成pluginDemo.zip
①选择Build Settings-->Valid Architectures-->arm64、armv7 ②选择Edit Scheme-->Run-->Release ③选择真机设备编译之后生成的framework
3.3 制作pluginDemo插件API文档包
具体参考标准API文档
3.4 上传插件包到云端
登录到中控易动网站控制台,进入”我的插件“,点击”创建自定义插件“按钮,输入插件的相关信息
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"];