APICloud 自定义iOS模块开发

PS：近期有项目需要自定义iOS模块,笔者只学过简单的Objective-C的语法且觉得APICloud官网文档这块写的比较乱,然后看了官方视频后,整理笔记如下,快速上手:-D

简单模块开发流程

将特定功能或UI用原生代码封装成一个js对象

• 原生代码：使用iOS的Objective-C或swift代码、Android的Java代码(给webview扩展js对象)
• 前端代码：使用Html+js开发app

1. 准备工作

1.1 下载并解压模块开发SDK工具包

解压ModulesDevProject_iOS.zip后

• 找到ModulesDevProject目录：模块开发工程UZApp

  
  ModulesDevProject_iOS.zip

1.2 Xcode打开工程：UZApp.xcodeproj

模块开发工程：UZApp

• 相当于模拟云编译环境
• 包含测试调用模块的前端代码(widget)
• 包含实现模块功能原生代码(UZModules)
• 包含原生代码可操作前端webview的API开发接口(UZEngine)
• 包含原生与前端的映射关系(module.json)

|-UZApp.xcodeproj
|-UZApp
    |-UZEngine：原生代码依赖的API类库
    |-UZModules：原生代码
    |-Supporting Files
        |-widget：前端代码(相当于APICloud项目源代码)
            |-css
            |-html
            |-script
            |-res
            |-index.html
            |-config.xml
        |-uz
           |-module.json：APP需要require的所有自定义模块接口声明的集合(数组类型)

实际UZApp工程目录结构

2. widget：编写前端测试代码(前端js部分)

编辑./UZApp/Supporting Files/widget/index.html

function printLog(){
    //引用自定义模块为js对象
    var demo = api.require('moduleDemo');
    
    //调用自定义模块对象的自定义方法,最多有两个可选参数
    //参数1：json类型的对象:作为传入数据
    //参数2：带两个json类型的参数(ret,err)匿名函数:即js的闭包(回调函数),作为接收原生代码消息的处理函数
    demo.printLog({
        param1:"我的参数1值",
        param2:"我的参数2值",
        param3:"我的参数3值",
        param4:"我的参数4值"
    },function(ret,err){
        alert(JSON.stringify(ret));
    });
}

3. 编写实现模块功能原生代码

3.1 UZEngine：原生代码依赖的API类库

头文件	作用
UZModule.h	模块基类： 初始化模块、释放模块 前端回调原生代码发送的消息 获取文件路径 添加UI view 从配置文件获取配置信息 屏蔽侧滑手势 向前端发送自定义事件 设置页面滚动监听 下拉刷新 滑动返回的配置
NSDictionaryUtils.h	从字典中获取值
UZAppDelegate.h	获取app实例对象 读取app的config.xml的配置信息 接收app消息 自定义启动画面
UZAppUtils.h	工具类： 获取设备信息 文件路径 配置颜色值 设置获取全局变量

3.2 创建模块类：UZModuleDemo

选中./UZApp/UZModules,右键new file-iOS-Cocoa Touch Class

• 输入类名：UZModuleDemo
• 继承基类：UZModule (必须为此值)
• 选择语言：objective-c (必须为此值)

3.3 给模块的类添加接口实现函数

实际运行效果

笔者也没学过OC,以下仅为非iOS开发者能理解原生代码 :-D
OC中的字符串常量必须加一个@前缀,写在双引号外面
//定义方法
无参数语法：- (返回值类型)方法名{方法体}
有参数语法：- (返回值类型)方法名:(参数类型)参数名称{方法体}
多个参数语法：- (返回值类型)方法名part1:(参数1类型)参数1名称 方法名part2:(参数类型)参数2名称{方法体}
OC的"括号深坑"
 //调用对象方法
[对象 无参数方法名];
[对象 单参数方法名:参数]; 
[对象 多参数方法名1:参数1 多参数方法名2:参数2]; 
[对象 属性];  //getter属性
[对象 属性:属性值]；//setter属性

编辑./UZApp/UZModules/UZModuleDemo.m文件

#import "UZModuleDemo.h"
#import "NSDictionaryUtils.h" //stringValueForKey接口：读取前端调用模块函数时的传参值

@implementation UZModuleDemo

- (void)printLog:(NSDictionary *)paramsDict_{
    //前端代码调用模块函数时的json类型参数->原生代码
    //读取前端调用模块函数时的传参值
    
    NSString *param1=[paramsDict_ stringValueForKey:@"param1" defaultValue:@""];
    NSString *param2=[paramsDict_ stringValueForKey:@"param2" defaultValue:@""];
    NSString *param3=[paramsDict_ stringValueForKey:@"param3" defaultValue:@""];
    NSString *param4=[paramsDict_ stringValueForKey:@"param4" defaultValue:@""];
    
    //读取回调函数的ID
    NSInteger callbackFuncID=[paramsDict_ integerValueForKey:@"cbId" defaultValue:-1];
    NSLog(@"回调函数ID:%ld",(long)callbackFuncID);
    
    //原生代码->前端代码调用模块函数的回调函数
    if(callbackFuncID>=0){
        //创建结果数据对象
        NSMutableDictionary *sendDict = [NSMutableDictionary dictionary];
        NSString *msgStr=[NSString stringWithFormat:@"回调函数ID:%ld.前端发送的参数:param1=%@,param2=%@,param3=%@,param4=%@",(long)callbackFuncID,param1,param2,param3,param4];
        [sendDict setObject:msgStr forKey:@"msg"];
        //向前端返回结果数据对象
        [self sendResultEventWithCallbackId:callbackFuncID dataDict:sendDict errDict:nil doDelete:NO];
        
    }
    //控制台测试输出
    NSLog(@"前端发送的参数:param1=%@,param2=%@,param3=%@,param4=%@",param1,param2,param3,param4);
    
}
@end

4.定义原生与前端的映射关系

编辑./UZApp/Supporting Files/module.json

[
 {
     "name":"moduleDemo",
     "class":"UZModuleDemo",
     "methods":["printLog"]
 }
]

字段	作用	是否必填	备注
name	模块名	是	作为前端require方法的参数
class	模块的类名	是	在UZModules目录下：实现模块功能的类名
methods	js异步实例的方法	常用	js中调用模块方法时使用callback的方式返回结果
syncMethods	js同步实例的方法	不常用	js中调用模块方法时直接返回结果
launchClassMethod	启动时调用的方法	否	引擎将在应用启动的时候调用该方法 类方法,没有参数

方法：多个方法以英文逗号隔开\方法需带一个参数

5.build&run scheme

6.模块打包

6.1 Cocoa Touch 静态链接库：*.a文件 创建静态库工程

iOS-Framework&Library-Cocoa Touch Staic Library

• 项目名：ModuleDemo
• language：Objective-C
• 删除ModuleDemo文件夹下默认的.m和.h文件
  点击

• 右键静态库-选择Edit Scheme-Run-Build Configuration设置为Release

  
  image.png

• 搜索"ios deploy"-设置iOS依赖的目标版本:选最低的

  
  image.png

• 搜索"architectures"-设置architectures添加armv7s、设置Build Active architectures only为no

  
  image.png

• 右键ModuleDemo文件夹 Add files to "ModuleDemo"-导入模块源文件-勾选copy 选择creates groups

  
  image.png

• 同样,右键项目名导入引擎的.h头文件(或第三方包的.h头文件)、选择编译类型为ios 通用设备

  
  image.png
• build&run scheme

6.2 打包

创建与模块同名的模块文件夹

• target目录：复制静态链接库.a文件(或其他第三方静态链接库.a、.bundle、.framework文件)到target目录下
• module.js文件：复制UZApp工程中uz/module.js并去掉其他不需要的模块声明,并删掉最外层数组的中括号
• res_模块名目录：若有资源文件复制到res_模块名文件夹下
  image.png

压缩模块文件夹为.zip

6.3 上传压缩包

在APICloud官网-项目控制台中上传模块压缩包

image.png