IOS-30-Hybrid混合开发(二):实现javaScript页面与OC界面互调demo(iOS7之前与之后javascriptCore.framework)
2015-11-21 09:22
956 查看
demo链接:http://download.csdn.net/detail/iot_li/9287675
前言:之所以会整理这份博文,是因为这两天安排我调研一下Hybrid混合开发,如何实现UIWebView页面与native界面互相调用,在此期间查了很多资料,问了两个学长,知识点比较零散,所以在此我集中整理了iOS7之前和之后的两种实现方法,供大家参考,欢迎提出博文中的不妥之处。
说明:该链接里的demo文件含有三个文件夹的代码,分别是iOS7之前的旧方法实现的JS与OC之间的混合开发、iOS7之后的javascriptCore.framework框架、GitHub上的demo。简单的几个demo,看完就学会了,而且你会顺便也学会一些HTML、javaScript的知识。
代码要点:
1.iOS7之前的代码说明在上篇博客:/article/10978931.html
2.iOS7之后的javascriptCore.framework框架使用要点:
流程:UIWebView(html)页面—–>native界面—–>UIWebView(html)页面………..
代码文件夹:
2.1 javascript(HTML)页面:
其中button中的onclick一直在监听里面的方法,而方法名又对应native界面的方法名,请继续往下看
2.2 MainViewController.h
先声明JSContext运行环境
MainViewController.m
其中,self.context[@”log”]里的‘log’方法名和HTML里的一一对应,这样就实现了点击HTML上的按钮,native界面的方法会响应。
2.3 native界面调用HTML页面太简单了,我就不用说了吧,不明白的再留言问我吧。
还有不懂的或者不妥的地方留言吧。
物联网正在兴起,蛋糕正在被割分,我们80,90后得干出一番事业,国家的发展正交由我们主宰,一块来讨论分享经验、技术、找合伙人吧!
欢迎加IOT-物联网群:470364131
前言:之所以会整理这份博文,是因为这两天安排我调研一下Hybrid混合开发,如何实现UIWebView页面与native界面互相调用,在此期间查了很多资料,问了两个学长,知识点比较零散,所以在此我集中整理了iOS7之前和之后的两种实现方法,供大家参考,欢迎提出博文中的不妥之处。
说明:该链接里的demo文件含有三个文件夹的代码,分别是iOS7之前的旧方法实现的JS与OC之间的混合开发、iOS7之后的javascriptCore.framework框架、GitHub上的demo。简单的几个demo,看完就学会了,而且你会顺便也学会一些HTML、javaScript的知识。
代码要点:
1.iOS7之前的代码说明在上篇博客:/article/10978931.html
2.iOS7之后的javascriptCore.framework框架使用要点:
流程:UIWebView(html)页面—–>native界面—–>UIWebView(html)页面………..
代码文件夹:
2.1 javascript(HTML)页面:
<input type="button" value="测试log" onclick="log('测试');" /> <br/> <br/> <input type="button" value="oc原生Alert" onclick="alert('alert');" /> <br/> <br/> <input type="button" value="addSubView" onclick="addSubView('view');" /> <br/> <br/> <input type="button" value="pushViewController" onclick="native.pushViewControllerTitle('LoginViewController','登录(native页面)');" /> <br/> <br/> <input type="button" value="标识符1" onclick="sendID('id1');" /> <br/> <br/> <input type="button" value="标识符(字符串)pushLogin" onclick="sendID('pushLogin');" /> <br/> <br/>
其中button中的onclick一直在监听里面的方法,而方法名又对应native界面的方法名,请继续往下看
2.2 MainViewController.h
先声明JSContext运行环境
#import <UIKit/UIKit.h> #import <JavaScriptCore/JavaScriptCore.h> @interface MainViewController : UIViewController<UIWebViewDelegate @property (nonatomic, strong) JSContext *context; @end
MainViewController.m
-(void)webViewDidFinishLoad:(UIWebView *)webView { NSLog(@"加载web页面完成!"); self.title = [_webview stringByEvaluatingJavaScriptFromString:@"document.title"]; self.context = [_webview valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //以JSExport协议关联 native 方法 self.context[@"native"] = self; //以block形式关联 JavaScript function self.context[@"log"] = ^(NSString *str){ NSLog(@"%@",str); }; //标识符公共接口1 // __weak MainViewController *MainVCself = self;//用__weak 为了避免出现循环引用。注:block会让对象retain一次 self.context[@"sendID"] = ^(NSString *str){ TLDJSOperationManager *operation = [[TLDJSOperationManager alloc] init]; [operation handleJSString:str]; }; //标识符公共接口2(字典格式) self.context[@"sendID2"] = ^(NSDictionary *dict){ NSLog(@"字典:%@",dict); NSString *str = [dict objectForKey:@"dict2"]; TLDJSOperationManager *operation = [[TLDJSOperationManager alloc] init]; [operation handleJSString:str]; }; }
其中,self.context[@”log”]里的‘log’方法名和HTML里的一一对应,这样就实现了点击HTML上的按钮,native界面的方法会响应。
2.3 native界面调用HTML页面太简单了,我就不用说了吧,不明白的再留言问我吧。
还有不懂的或者不妥的地方留言吧。
物联网正在兴起,蛋糕正在被割分,我们80,90后得干出一番事业,国家的发展正交由我们主宰,一块来讨论分享经验、技术、找合伙人吧!
欢迎加IOT-物联网群:470364131
相关文章推荐
- BZOJ4327 : JSOI2012 玄武密码
- 【JS关键字】
- ExtJS4.2学习(14)基于表格的扩展插件(2)(转)
- 学习日记:json之what,why,where,how及应用
- js原生封装自定义滚动条
- ExtJS4.2学习(13)基于表格的扩展插件---rowEditing
- webpack bable-loader升级无法编译jsx es6
- javascript实现Email邮件显示与删除功能
- JavaScript实现自动生成网页元素功能(按钮、文本等)
- js实现索引图片切换效果
- javascript实现动态统计图开发实例
- 超详细的javascript数组方法汇总
- 分享经典的JavaScript开发技巧
- js if
- js 参数带0丢失的问题
- JS如何获取多个相同class标签并分别再输出各自的文本
- 转: JSP中include指令和include动作的区别
- 使用js获取表单form的数据
- JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里
- javascript eval函数用法一例