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的所有自定义模块接口声明的集合(数组类型)
APICloud 自定义iOS模块开发_第1张图片
实际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 给模块的类添加接口实现函数

APICloud 自定义iOS模块开发_第2张图片
实际运行效果
笔者也没学过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依赖的目标版本:选最低的


    APICloud 自定义iOS模块开发_第3张图片
    image.png
  • 搜索"architectures"-设置architectures添加armv7s、设置Build Active architectures only为no


    APICloud 自定义iOS模块开发_第4张图片
    image.png
  • 右键ModuleDemo文件夹 Add files to "ModuleDemo"-导入模块源文件-勾选copy 选择creates groups


    APICloud 自定义iOS模块开发_第5张图片
    image.png
  • 同样,右键项目名导入引擎的.h头文件(或第三方包的.h头文件)、选择编译类型为ios 通用设备


    APICloud 自定义iOS模块开发_第6张图片
    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官网-项目控制台中上传模块压缩包


APICloud 自定义iOS模块开发_第7张图片
image.png

你可能感兴趣的:(APICloud 自定义iOS模块开发)