iOS开发趋势:Native与H5+JS 解决方案

支付宝红包火了,微信红包火了,作为开发者,敏感的就发现之前并不被看好的H5已经悄悄渗透进来,在原生(Native)代码中部分功能采用动态网页(HTML5+JavaScript)来实现,即保证了整体App的流畅度,又能及时推出一些活动和动态,目前主流App已经开始默认这种开发模式,未来的移动开发团队也需要H5的小伙伴加入进来了,实现动静结合,让页面更加灵活多变,接下来笔者就根据之前涉及到的项目经验来谈谈原生与网页交互的那些不得不说的琐事:

一、 原生代码中直接加载页面

1.    具体案例

加载本地/网络HTML5作为功能介绍页

2.    代码示例

//本地

-(void)loadLocalPage:(UIWebView*)webView
{
   NSString* htmlPath = [[NSBundle mainBundle]pathForResource:@"demo" ofType:@"html"];
NSString* appHtml =[NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncodingerror:nil];
NSURL *baseURL = [NSURLfileURLWithPath:htmlPath];
 [webView loadHTMLString:appHtmlbaseURL:baseURL];
}

//网络

-(void)loadWebPage:(UIWebView *)webView
{
    NSURL *url = [NSURLURLWithString:@"http://www.baidu.com"];
    NSURLRequest *request = [NSURLRequestrequestWithURL:url];
    [webView loadRequest:request];
}

3.    额外操作

a  iOS中承载网页的容器是UIWebView,可以借助它的代理来监听网页加载情况;

b  在加载过程中,我们还可以获取该网页中的meta值,例如代码:

NSString *shareUrl = [messWebViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName(\"shareUrl\")[0].content"];

就是从meta中得到shareUrl对应的value值;

c  截获当前是发起的那种请求,以便native来做对应的控制,例如代码:

- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest *)requestnavigationType:(UIWebViewNavigationType)navigationType
{
    NSString *requestString = [[[request URL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
    if ([requestString hasPrefix:@"http://customersharetrigger"]){
       //执行一些操作
        return NO;
    }
    return YES;
} //可以监听到这个请求,从而达到控制作用;

二、  原生代码操作页面元素

1.    具体案例

在嵌入H5后需要操作页面元素

2.    代码示例

a、获取当前页面的url。

-(void)webViewDidFinishLoad:(UIWebView *)webView {
  NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
}

b、获取页面title:

  NSString *currentURL = [webViewstringByEvaluatingJavaScriptFromString:@"document.location.href"];

   NSString *title = [webviewstringByEvaluatingJavaScriptFromString:@"document.title"];

c、修改界面元素的值。

    NSString *js_result = [webViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='朱祁林';"];

d、表单提交:

   NSString *js_result2 =[webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"];

3.    代码说明

stringByEvaluatingJavaScriptFromString方法可以将javascript代码片段嵌入到页面中,通过这个方法就可以让iOS与UIWebView中的网页元素交互,例如上面的代码片段,它

功能非常的强大,用起来也相对简单,通过它我们可以很方便的操作页面元素,而且能直接插入一段JS方法,然后调用该方法执行;

三、  原生代码处理本地H5+JS

1.    具体案例

需要动态显示曲线图,如果直接加载绘制图形特别慢,所以采用本地放置模板,传入参数,然后模板自动绘制,提高体验,加快绘制;

2.    示例代码

-(void)loadWebPage:(UIWebView *)webView
{
    NSURL *localPathURL = [[NSBundlemainBundle] URLForResource:@"detail" withExtension:@"html"subdirectory:@"htmlResources"];
    NSString *localPathUrl = [localPathURLabsoluteString];
    NSString *localParamPathUrl = [NSStringstringWithFormat:@"%@?symbol=%@&t=%f",localPathUrl,self.stockCode,self.time];
    NSURL *requestURL = [NSURLURLWithString:localParamPathUrl];
    [webView loadRequest:[NSURLRequestrequestWithURL:requestURL]];

}

3.    代码说明

a 这里需要采用绝对路径拖入H5模板,就是选择CreateFolder Reference, 只有这样才能保证H5能调用到本地的JS代码,不然加载不成功,这个最初找了很多原因,最后才发现是拖入时候选择问题;

b 如果要加入参数,注意需要先转成string,然后再转为URL;

四、  原生代码与网页交互通信

1.    具体案例

原生代码与H5相互调用方法,并传递参数,而且能回调数据;

2.    借助第三方实现

WebViewJavascriptBridge,该开源库非常完美的解决了原生代码与H5交互,即互殴;

3.    代码示例

1.初始化一个webview(viewdidload)

UIWebView* webView =[[UIWebView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:webView];

2.将此webview与WebViewJavascriptBridge关联(viewdidload)

if (_bridge) { return; }

  [WebViewJavascriptBridge enableLogging];

  _bridge = [WebViewJavascriptBridgebridgeForWebView:webView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {
    NSLog(@"ObjC received message from JS:%@", data);

    responseCallback(@"Response formessage from ObjC");
  }];

此时webview就与js搭上桥了。下面就是方法的互调和参数的互传。

(1) js调oc方法(可以通过data给oc方法传值,使用responseCallback将值再返回给js)

[_bridgeregisterHandler:@"testObjcCallback" handler:^(id data,WVJBResponseCallback responseCallback) {
        NSLog(@"testObjcCallback called:%@", data);
        responseCallback(@"Response fromtestObjcCallback");
    }];

这里注意testObjcCallback这个方法的标示。html那边的命名要跟ios这边相同,才能调到这个方法。当然这个名字可以两边商量着自定义。简单明确即可。

(2)oc调js方法(通过data可以传值,通过 response可以接受js那边的返回值 )

id data = @{@"greetingFromObjC": @"Hi there, JS!" };
    [_bridgecallHandler:@"testJavascriptHandler" data:data responseCallback:^(idresponse) {
        NSLog(@"testJavascriptHandlerresponded: %@", response);
    }];

注意这里的 testJavascriptHandler也是个方法标示。

(3)oc给js传值(通过 response接受返回值 )

[_bridge send:@"Astring sent from ObjC to JS" responseCallback:^(id response) {
        NSLog(@"sendMessage got response:%@", response);
    }];

(4)oc给js传值(无返回值)

[_bridge send:@"A string sent from ObjC after Webview hasloaded."];

五、 总结

关于Native和H5的交互有各种形式,随着H5越来越成熟,未来的趋势就是两者形影不离,让App更具灵活性和实效性,也一定程度上提高了开发效率和迭代周期,是企业级移动应用开发的必选解决方案,推荐:IT面试宝典(典型)。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-29 04:19:02

iOS开发趋势:Native与H5+JS 解决方案的相关文章

【iOS开发】UIWebView与JavaScript(JS) 回调交互

引用:http://blog.sina.com.cn/s/blog_693de6100102vi3w.html 很多关于object-c(简称:oc,是ios开发app使用的语言) 与 js 交互的文章都比较适用于 mac开发,iOS的webview 还是有所不一样, 参考:http://blog.sina.com.cn/s/blog_693de6100102vhuh.html 本文提供了一个很好解决 交互的思路. 自然,从oc到js,可以使用 stringByEvaluatingJavaScr

iOS开发——Block引起循环引用的解决方案

内存问题始终是软件开发中的头等大事,iOS开发中也不例外,在面试中也是必问的问题.今天我们主要来讲讲Block中涉及的循环引用问题.当我们自己一开始写代码的时候,可能会大量在block中使用self,但是当看到别人优秀的代码的时候,发现别人常常不是用self,而使用weakSelf. 为什么呢?本文的示例代码上传至 https://github.com/chenyufeng1991/Block_WeakSelf . 首先我先来说说内存管理的原则: 1.默认使用strong,可选weak.stro

iOS开发中的数据安全隐患和解决方案

移动互联网的兴起,每天都会涌现大量的app产品,无论公司开发还是个人开发,大家都在追求更快的抢占市场,但是确忽略了打磨产品,也忽略了移动开发中的数据安全隐患,如果我们用Charles工具,很容易截获到很多知名的app的传输的隐私数据,包括用户名和账号信息等.比如下图是我用Charles(青花瓷)软件截获糗事百科明文方式传输的用户名和账号信息,网上了解到神州租车和一嗨租车的用户登陆也是明文传输,明文传输很容易被截获.下文我就将我今天查阅各种资料学到的关于iOS中数据安全的知识总结下来和大家分享.

iOS开发,UIWebview与H5之间的交互

导语:随着微信的不断推广,在移动开发的过程中原生与H5的混合开发在移动开发中占据着越来越重要的地位:下面我给大家分享一下我在混合开发中的心得! 将HTML页面加载到UIWebview控件中: A:本地加载: NSString *webPath = [[NSBundlemainBundle]pathForResource:@"HelloWord"ofType:@"html"];//获取文件路径 NSURL *webURL = [NSURLfileURLWithPath

[iOS开发]WKWebView加载JS

最近项目要用webView加载js文件,挺同事说WKWebView比UIWebView更加好用,于是我今天就试试,百度一发,自己写了个demo. 先看我写的代码,然后再来看WKWebView跟UIWebView的区别: 首先,遵循这两个协议WKNavigationDelegate,WKScriptMessageHandler. 接着,获取JS文本. JS交互 - (void)getJS { NSString * js = @"window.webkit.messageHandlers.obser

iOS开发:Swift主题色顶级解决方案

一.常规主题色使用点 应用在发布前都会对其主题色进行设置,以统一应用的风格(可能有多套主题).在主题色设置上有几个方面,如下: 1.TabBar部分,设置图片高亮.文本高度颜色2.NavigationBar部分,设置导航栏颜色及字体颜色3.应用标签等,设置字体的颜色4.应用图片主题色 主题色的设置点,大体从上面四个方面着手,图片的主题色我们可通过图片更换的方式进行处理.而通过代码来处理的 1-3 条,有着不同的处理方法.大家常规处理方法如下: 步骤一:变化分离 1.利用Swift扩展语法扩展UI

iOS开发-duplicate symbols for architecture armv7解决方案

今天修改了自己项目的部分代码,发现XCode编译的时候报错:duplicate symbols for architecture armv7 1.排查是否有名字重复的文件: 2.检查是否在#import头文件的时候,不小心将.h写成了.m(这种情况居多,本人属于此类情况)

iOS开发——实用技术OC篇&UIWebView与JS的交互

UIWebView与JS的交互 事情的起因还是因为项目需求驱动.折腾了两天,由于之前没有UIWebView与JS交互的经历,并且觉得这次在功能上有一定的创造性,特此留下一点文字,方便日后回顾. 我要实现这样一个需求:按照本地的CSS文件展示一串网络获取的带HTML格式的只有body部分的文本,需要自己拼写完整的HTML.除此之外,还需要禁用获取的HTML文本中自带的 < img > 标签自动加载,并把下载图片的操作放在native端来处理,并通过JS将图片在Cache中的地址返回给UIWebv

React Native的iOS开发步骤以及崩溃收集

React Native的iOS开发以及崩溃收集 简介 React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP. React Native着力于提高多平台开发的开发效率 -- 仅需学习一次,编写任何平台.(Learn once, write anywhere) Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native. 准备 安装 iOS只能MAC下开发,需要Xcode; An