技术的革新日新月异,技术发展日新月异.当然,前端开发和原生开发各有所长,我接下来的系列文章,将和各位一起耍耍原生混合模块开发!同样,也看看原生和前端相爱相杀的故事~好了,直接进入正题
一.是什么? 通俗一点,就是iOS原生开发App某一个功能或者模块,然后接入前端的项目中
二.开发环境:
1.Xcode6.0或更高版本
2.Mac os x 10.9以上
三.开发步骤
1.前往http://docs.apicloud.com/APICloud/download下载最新版本的模块开发SDK,找到里面的ModulesDevProject_iOS.zip,这里面包含ModuleDemo、ModulesDevProject和说明文件,进行模块开发之前一定要先阅读read me.txt,了解各个目录里面的内容和功能
2.下载模块中SDK后,删除原有demo中的文件(投机办法,直接将项目中原有模块删除,后面步骤中就可以直接创建自己的模块)

修改原有的demo中文件的内容,将原有的 (模块名称/类名/方法) 删除,修改为自己要用的名称

3.使用APICloud 项目demo中自己修改过的混合模块开发项目(ModulesDevProject 文件夹中的工程工具)

5.打开开发工具工程,修改模块名称
>查找到文件夹

>修改这两个文件夹名称为你自己模块想要命名的名称,且这两个文件夹名称一样

6.创建自己的模块(静态库工程),命名与步骤2中的模块命名一样

先关闭创建的静态库工程,然后打开UZApp工程,将静态库工程中.xcodeproj 文件拖入到UZModules 下面



最后我们需要将静态库工程的Build Active Architecture Only设置为No,如图:

7.创建模块类
在ModuleDemo静态库工程中引入必要的UZModule.h头文件,UZAppDelegate.h和UZAppUtils.h等头文件根据需要引入,这些头文件可以在下载的SDK包里面找到。
在ModuleDemo静态库工程中新建一个UZModuleDemo类,继承于UZModule类,其中UZModule类为模块的基类。模块开发过程中文件命名时提倡加前缀,以避免和其它模块冲突。
模块生命周期:
当在前端JS中首次调用模块的方法时,引擎会调用模块类的 - (id)initWithUZWebView:(UZWebView *)webView 方法进行初始化;
当模块所在的页面被销毁时,模块类也会被销毁,引擎会主动调用其 - (void)dispose 方法。
8.回传数据给JS
我们在这里将用户点击的按钮的index回调给JS端,注意sendResultEventWithCallbackId:dataDict:errDict:doDelete:方法的最后一个参数,如果需要多次进行回调,那么就必须传NO。
- (void)alertView:(UIAlertView *)alertView didDismissWithButtonIndex:(NSInteger)buttonIndex {
if(_cbId >0) {
NSDictionary*ret = @{@"index":@(buttonIndex)};
[selfsendResultEventWithCallbackId:_cbId dataDict:ret errDict:nildoDelete:YES];
}
}
9. JS调用模块方法
前端JS必须使用JSON格式数据作为JS与Native之间交换数据的传参,APICloud引擎会对JS传入的参数进行解析并封装,前端JS使用模块之前需要require模块对象。
找到UZApp工程中widget目录下的index.html,添加调用moduleDemo模块的showAlert方法的代码:
functionshowAlert(){
vardemo = api.require('moduleDemo');
demo.showAlert({
msg:'Hello App!'
},function(ret, err){
varmsg ="点击了第"+ ret.index +"个按钮";
api.toast({
msg: msg
});
});
}
网友评论