Hybrid App(一)

在iOS开发的过程中我们可能会遇到混合开发的情况，但并不是使用UIWebView简单的调用网页，往往需要我们和网页进行交互，本文将和大家共同探讨iOS混合开发的那些事。

一、手机软件开发模式介绍

目前手机app的开发模式无外乎三种：

1.Native App，原生APP，使用原生SDK和IDE开发的基于iOS和Android的APP；Native App性能好，用户体验好，但是也有弊端，开发周期长、不能跨平台、版本更新复杂。

2.Web App，即网页APP，手机相当于一个浏览器，这种模式开发简单，但是访问速度慢、用户体验差。

3.Hybrid App,混合APP，综合了Web App的开发速度和Native App的高性能体验。

二、Hybrid App中iOS和html的交互  demo下载

1.本节中用到的html文件内容为：html文件下载

html文件

2.使用UIWebView加载html文件，可以加载本地的html文件或者网页文件，本节中选择加载本地文件。

加载html文件

3.如果此时你想把“标题”删除，但是不通过修改html文件的方法，使用iOS的修改就可以在UIWebView的代理方法-(void)webViewDidFinishLoad:(UIWebView*)webView中用webView调用js代码去删除html中的元素，具体代码如下：

删除title标签

删除标签

此时你又发现“陌子夕”实际应该为“夕子陌”，我们也可以使用iOS调用修改标签的内容，代码如下：

代码

修改标签

此时需求又让你在虹口下面添加一张图片，代码如下：

插入图片

添加图片

修改“虹口”字体的大小：

修改字体大小

字体变大

修改字体颜色和网页的背景颜色：

修改颜色

修改颜色

以上是在iOS端修改html网页的界面元素，主要使用了UIWebView的代理方法：-(void)webViewDidFinishLoad:(UIWebView*)webView，然后编写js代码，用webView通过方法：- (nullableNSString*)stringByEvaluatingJavaScriptFromString:(NSString*)script去调用js代码。

4、捕获html上按钮的点击事件，然后就可以在本地适当的时候处理一些事件。主要也是使用了UIWebView的代理方法：

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

当点击html文件上的按钮时就会触发这个代理方法，（本文中使用UIWebView调用百度的主页，然后点击搜索的时候让网页弹出提示：加载新闻失败了）；

代码为：

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

{

NSURL*URL = request.URL;

NSString*urlStr = URL.absoluteString;

if([urlStr isEqualToString:@"http://m.news.baidu.com/news?fr=mohome&ssid=0&from=844b&uid=&pu=sz%401320_2001%2Cta%40iphone_1_9.3_3_601&bd_page_type=1"]) {

[webView stringByEvaluatingJavaScriptFromString:@"alert('加载新闻失败了')"];

returnNO;

}

returnYES;

}

效果图

三、总结

在iOS中操作html的几个步骤:

1.利用UIWebView加载本地html资源或者网络上html资源;

2.设置UIWebView的代理为当前视图控制器，并遵守协议；

3.用类选择器或者id选择器或者标签选择器等选择要进行操作的标签；

4.把获取到的标签转换成js代码的字符串；

5.UIWebView对象调用stringByEvaluatingJavaScriptFromString方法执行js代码。

iOS监听html文件的步骤是：

1.利用UIWebView加载本地html资源或者网络上html资源;

2.设置UIWebView的代理为当前视图控制器，并遵守协议；

3.获取到将要加载的html资源的链接；

4.在代理方法中URL.absoluteString是否和上述获取的链接相同；

5.根据判断结果处理需求。