iOS原生和H5的相互调用

Posted 我是谁???

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了iOS原生和H5的相互调用相关的知识,希望对你有一定的参考价值。

为什么现在越来越多的APP中开始出现H5页面?

1,H5页面开发效率更高,更改更加方便;

2,适当缩小APP安装包的大小;

3,蹭热点更加方便,比如五一,十一,双十一搞活动;

那么为什么说H5无法取代原生的APP,只能处在一个共存的例子呢?

1,这个是由系统的底层决定的,极端例子,所有的应用都通过H5展示,那么你是否需要一个浏览器?

2,涉及庞大的功能,涉及复杂的逻辑结构,涉及安全性的要求,H5可以胜任吗?

所以,H5和原生的融合会出现动态的调和,最终会找到一个平衡。

那么接下来就说下ios开发中原生和H5的相互调用。

原生页面优势:(1)运行速度比较快(2)能使用设备的底层功能,如摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等(3)在界面设计、功能模块、操作逻辑等层面相较web更易

做到App的便捷性和舒适性,功能更加强大(4)节省流量

劣势:(1)不同的操作系统(如android和iOS)需要独立的进行开发,使用其各自的开发包、开发工具和控件(2)每次有更新,都需要重新打包一次发布到应用平台上,且每次要向各个应用商店进行

提交审核。之后用户需要手动进行点击更新安装(安装成本较高)(3)开发成本比较高,尤其需要适配各种机型时(如Android应用,需要适配各种Android手机)

H5页面优势:(1)由于是运行在浏览器上,所以只需要开发一次便可以在不同的操作系统上显示(2)迭代版本时,不需要打包便可以发布(实时更新、快速迭代),与云端实现实时数据交互(3)开发

成本相对较低,对浏览器的适配较简单,且发布门槛相对较低

劣势:(1)每次打开页面,都得重新加载,获取数据...(2)过于依赖网络,速度无法保证。特别在弱网环境下,不仅耗费流量而且加载缓慢,就算是WiFi情况下也不容乐观(3)只能使用有限的设备底

层功能(无法使用摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等功能)(4)仍处于发展阶段,部分功能无法在基于现有技术的浏览器基础上实现,且无法全面的显示最完美的用户

体验,只能用现有技术去弥去找最佳解决方案

 

原生与H5的相互调用,其实也可以简单理解为Webview跟JavaScript的相互调用。

====================Webview调用JS(应用场景较少)=========================

// 网页加载完调用JS弹窗

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    //webView 调用 js

    NSString *result = [webView stringByEvaluatingjavascriptFromString:@"javascript:add(3,5);"];

     NSLog(@"%@",result);

}

====================JS调用WebView(最常见)========================= 

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

    /**

     <!-- 自定义协议与OC进行交互 -->

       // 网页上的一个链接,点击这个链接出发以下反应。。。

      <a href="protocol:///showMessage:/晚上小树林见面,有惊喜!!!:D">女神</a>

     */

    //在此方法中截取下一个请求的URL,通过自定义协议头,截取要执行的方法和参数

     if ([request.URL.scheme isEqualToString:@"protocol"]) {

        //调用oc的方法做事

        //工作中用下面的

        NSArray *pathComponents = [request.URL pathComponents];

       //获取到方法名的字符串

        NSString *methodName = pathComponents[1];

       //获取到的参数的字符串

        NSString *param= pathComponents[2];

        //SEL

        SEL method = NSSelectorFromString(methodName);

        //调用方法

        if ([self respondsToSelector:method]) {

         [self performSelector:method withObject:param];

   }

            return NO;

 }

     return YES;

}

// OC的方法   

- (void)showMessage:(NSString *)param{

    NSLog(@"showMessage---%@",param);

    UIViewController *nvshen = [[UIViewController alloc] init];

    nvshen.view.backgroundColor = [UIColor yellowColor];

    nvshen.title = @"女神经";

    [self.navigationController pushViewController:nvshen animated:YES];

}

当然,还有更好的方法,有一个第三方的框架可以用。 

在这里推荐一个比较好的第三方库即:WebViewJavascriptBridge 

地址:https://github.com/marcuswestin/WebViewJavascriptBridge

通过使用该库可以轻松实现JS与原生交互。

//初始化WebViewJavascriptBridge方法

_bridge= [WebViewJavascriptBridge bridgeForWebView:self.BookWebView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {}];

//原生与JS约定接口名为“testObjcCallback”,data是JS传递过来的信息,responseCallback来将信息传递给JS

[_bridge registerHandler:@"testObjcCallback" handler:^(id  data,WVJBResponseCallback responseCallback) {

responseCallback("postInfomationToJS")

}];

 

以上是关于iOS原生和H5的相互调用的主要内容,如果未能解决你的问题,请参考以下文章

Js和原生相互调用总结

安卓IOS内嵌H5的相互通信

H5调用Android和ios原生方法(react)

iOS开发漫话WKWebView之给H5网页图片添加点击事件以实现原生图片预览

JS与原生OC/Swift相互调用总结

H5&&Android交互