IOS-30-Hybrid混合开发(二):实现javaScript页面与OC界面互调demo(iOS7之前与之后javascriptCore.framework)

原创 2015年11月21日 09:22:34

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之前的代码说明在上篇博客:http://blog.csdn.net/iot_li/article/details/49944935
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

谈谈App混合开发

混合开发的App(Hybrid App)就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在Android或i...
  • richie0006
  • richie0006
  • 2016年04月09日 11:02
  • 5992

最简单的混合APP开发框架——搭建你的第一个Ionic应用(二)

现在我们可以在浏览器上看到自己的APP了,但是在浏览器上的APP说到底还只是一个单页应用,最有成就感的应该是我们自己做的APP在真正的手机上跑起来,right? 那么,就让我们继续吧。 如何将我们...
  • liujiawei00
  • liujiawei00
  • 2017年08月03日 14:02
  • 1403

几款移动跨平台App开发框架比较

整理目前流行的跨平台WebApp开发技术的特点,仅供参考。 每个框架几乎都包含以下特性: 使用 HTML5 + CSS + JavaScript 开发跨平台重用代码丰富的UI库提供访问设备...
  • jingwen3699
  • jingwen3699
  • 2017年03月31日 11:11
  • 9964

Rexxar 是一个针对移动端的混合开发框架。

Rexxar 是一个针对移动端的混合开发框架。
  • u014608640
  • u014608640
  • 2016年10月18日 14:06
  • 942

最牛的7个HTML5混合式移动开发框架!

在这个时间开始学习移动开发真是最好不过了,每个人应该都有一些移动应用的创意,而且你并不需要任何的原生应用编程经验,你只需要一些HTML的相关知识,懂一些CSS和JavaScript就够了。如果你总听别...
  • qq_35247699
  • qq_35247699
  • 2017年01月11日 16:56
  • 6555

iOS混合开发调试秘籍

在进行混合开发的时候(H5&&iOS),进行联合调试很是让我们开发者头疼,为了锁定问题所在,H5小伙伴没少打alert,我们这边也没少打log日志,很是麻烦,下面给大家说一下我的新发现。轻松解决混合开...
  • HHL110120
  • HHL110120
  • 2017年03月02日 19:40
  • 887

IOS-29-Hybrid混合开发(一):OC调用JS的方法的使用:stringByEvaluatingJavaScriptFromString

使用场景:用于native页面对JS(HTML)页面元素的修改或获取相关信息 使用stringByEvaluatingJavaScriptFromString方法,需要等UIWebView中的页面加载...
  • IOT_LI
  • IOT_LI
  • 2015年11月20日 11:35
  • 695

iOS开发学习笔记 -- (一)hybrid app

最近开始看iOS开发,看了个把星期,写几篇笔记。顺序有点乱,想到什么写什么好了。 因为上周刚刚参加了一个hybrid app开发的培训,感觉Hybrid app开发是一个比较好的方式,可以充分利用w...
  • inte_sleeper
  • inte_sleeper
  • 2013年03月04日 15:10
  • 2236

iOS - Hybrid初探

iOS - Hrid初探
  • Seal_Shile
  • Seal_Shile
  • 2016年03月15日 15:25
  • 175

iOS hybrid App 的实现原理及性能监测

作者董一凡自述:作为一名写了十年代码的程序员,目前我最擅长的领域是移动平台的客户端开发,在移动领域的开发时间超过七年,前前后后涉猎过很多个平台。随着大部分移动平台自己走向死亡,现在我也主要专注在了iO...
  • Nvermore_
  • Nvermore_
  • 2016年03月30日 15:22
  • 474
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IOS-30-Hybrid混合开发(二):实现javaScript页面与OC界面互调demo(iOS7之前与之后javascriptCore.framework)
举报原因:
原因补充:

(最多只允许输入30个字)