H5出来以后影响越来越牛逼，以前需要移动端苦逼多天搞出来的不错的原生复杂页面，现在在开发中多了一种选择，那就是运用H5. H5的运用除了一些很简单的静态页面不需要移动端多做处理外，更多的时候需要移动端与H5页面交互来处理一些点击事件。
好了废话不多说，直接上代码。先来说一说UIWebView，这是iOS加载网页或者其他格式文件常用的控件。
UIWebView加载的api有三种
- (void)loadRequest:(NSURLRequest *)request;
- (void)loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL;
- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)textEncodingName baseURL:(NSURL *)baseURL;
其中第一个- (void)loadRequest:(NSURLRequest *)request; 我们运用的时候最常见。就是直接将url加载就可以了
NSString *path = @"";
NSURL *url = [[NSURL alloc] initWithString:path];
[self.webView loadRequest:[NSURLRequest requestWithURL:url]];
第二个是一种加载本地文件或者数据返回的html数据
加载本地html -->
NSString *resourcePath = [ [NSBundle mainBundle] resourcePath];
NSString *filePath = [resourcePath stringByAppendingPathComponent:@"test.html"];
NSString *htmlstring =[[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[self.webView loadHTMLString:htmlstring baseURL:[NSURL fileURLWithPath: [[NSBundle mainBundle] bundlePath]]];
加载返回的数据，只要把htmlstring对应替换就ok了。
至于第三种加载方式，跟第二种方式类似，只是更具体把web content的编码方式接口给出来。至于MIMEType我也来简单介绍下，MIMEType指的是content媒体类型，比如HTML，XML,GIF,FLASH，浏览器就是根据这个类型的不同会选择用不同的形式来显示。
常见的MIME类型
超文本标记语言文本 .html,.html text/html
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
GIF图形 .gif image/gif
JPEG图形 .ipeg,.jpg image/jpeg
au声音文件 .au audio/basic
MIDI音乐文件 mid,.midi audio/midi,audio/x-midi
RealAudio音乐文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
TAR文件 .tar application/x-tar
同时UIWebView 中公开四个方法
- (void)reload;//重新加载该网页
- (void)stopLoading;//停止加载
- (void)goBack;//后退
- (void)goForward;//前进
UIWebView 一个常用的属性scalesPageToFit ，该属性可以自动对页面进行缩放以适应屏幕，但是有时候会造成要展示的图片等资源过小，不方便展示。解决这类问题的方法，我总结出两种，一种是最简单不需要我们移动端更改什么，只要H5代码中在CSS样式中对对应的width就行auto设置；一种就要用到UIWebView的协议UIWebViewDelegate
UIWebViewDelegate 常用的代理方法
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
{//(@"加载失败");}
- (void)webViewDidFinishLoad:(UIWebView *)webView
{//这个方法中调用更改web view Frame的方法}
- (void)webViewDidStartLoad:(UIWebView *)webView
{//(@"加载中...");}
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *currentURL= webView.request.URL.absoluteString;
//这个方法是UIWebView 开始加载网页 或者是响应网页内超链接和点击事件的必走方法。上面的currentURL就是webview要加载或者响应的URL，利用这个我们也可以做一些事情。比如在加载一个网页后，其中一个点击事件，点击后跳转页面。如果这个要跳转的下一页我们移动端要自定制一些控件也要展示到另一个viewcontroller中，那么webview自己点击跳转我们就不需要。我们移动端可以让H5只响应事件的点击但是不触发，然后我们在这个方法中截取响应的URL自己跳转页面再用UIWebView加载URL就可以了
return YES;
}
好了，上面啰嗦那么多，终于要进入这文章的主题。
先写一种最简单的交互 事件 ，其中不会用第三方框架类
首先既然是交互，那就是webview与html双方都要参与的。也就是移动端和H5 要商量一个统一的方法。
function huoQu(){
var jiedian = $(".cur").children().html();var newStr =jiedian.substring(0,jiedian.indexOf("天"));
alert(newStr);
return newStr;
}
其中上面这个方法就是Html在js文件公开出来的一个方法，该js文件要确定加载到html标签中<script>中，不然无法调用。
NSString *RuesltStr = [self.myWebView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:@"huoQu();"]];
这个就是移动端在相应的地方，调用就ok。返回的字段是什么样式，就看你们的需要了。自己个人总结不喜勿喷，谢谢！！
网友评论