前言:
因为公司业务需要,所以在iOS与H5方面的交互进行较为复杂的的处理上就要有更深的了解。查阅了网络上的各大神写的博客。特在这里做一个总结。写的好的只贴链接地址,毕竟再来造轮子没这个必要。下面我所选择的,也是经过我的筛选,排除了网络上面大量的重复文章和糟糕的排版。这里我选择的也是可上手实践的,至于更多的原理和理论,请大家自行搜索。因为总觉得原理和理论的更应该系统去学习,所以,在这里不提供。
JS和OC交互
关于JS和OC的交互,总结起来大致有以下几种方式
1.URL地址在OC中拦截跳转
2.利用系统库JavaScriptCore,来做相互调用
3.利用第三方库WebViewJavascriptBridge
4.利用第三方cordova库,以前叫PhoneGap
5.React Native
关于4和5,其实可以归为一类,非原生开发。对于cordova因为之前在一个家公司app外包给别人开发,我接手的时候做过这方面的插件开发,算是有所了解,不过,因为cordova开发的app实在是太慢了,页面的流畅度跟原生完全不是一个级别的,虽说随着cpu的发展,两者不会相差太大,但是还是能够感觉出来的。故我始终嫌弃cordova的开发。而React Native据说是未来的开发趋势,因为我没有深入研究,在此也不做评价。
下面着重来说下前面的三种方式。
这里首先引入推荐的第一个人的博文系列:
iOS下JS与原生OC互相调用(总结)
iOS下JS与OC互相调用(一)--UIWebView 拦截URL
iOS下JS与OC互相调用(二)--WKWebView 拦截URL
iOS下JS与OC互相调用(三)--MessageHandler
iOS下JS与OC互相调用(四)--JavaScriptCore
iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge
iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge
iOS下JS与OC互相调用(七)--Cordova 基础
iOS下JS与OC互相调用(八)--Cordova详解+实战
这里的已经完全涵盖了前面几种方法的实现。所以看完这个总结,基本对JS交互有了了解。
接下来一篇博文,是着重对前三种的讲解。
JS和OC的交互(基于UIWebView)
推荐
在这里我想推荐的是第三种利用第三方库WebViewJavascriptBridge。这是原生里我筛选出来的觉得使用简单功能强大齐全的一个方式。也是我同事(曾在钉钉的前端),一直使用的交互方式。所以还是值得认可的。
至于使用,下面推荐第三篇博文
[iOS] 使用WebViewJavascriptBridge实现OC与JS交互
基本上,以上这些推荐就完全满足js与oc的交互。
WebView的使用总结
UIWebView的基础使用
- (void)viewDidLoad {
[super viewDidLoad];
// 1、创建UIWebView:
CGRect bouds = [UIScreen mainScreen].bounds;
UIWebView* webView = [[UIWebView alloc]initWithFrame:bouds];
// 2、加载在线资源http内容
NSURL* url = [NSURL URLWithString:@"http://www.baidu.com"];//创建URL
NSURLRequest* request = [NSURLRequest requestWithURL:url];//创建
[webView loadRequest:request];//加载
// 2、 加载本地文件的方法:
/**
*
//第一种方法:
NSString* path = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"];//mobile是根目录,name是文件名称,html是文件类型
[webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]]; //加载本地文件
//第二种方法:
NSString *resourcePath = [[NSBundle mainBundle] resourcePath];
NSString *filePath = [resourcePath stringByAppendingPathComponent:@"mobile.html"];
NSString *htmlstring=[[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
[webView loadHTMLString:htmlstring baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];
*/
// 3、导航
// UIWebView类内部会管理浏览器的导航动作,通过goForward和goBack方法你可以控制前进与后退动作:
[webView goBack];
[webView goForward];
// 4、UIWebViewDelegate委托代理
webView.delegate = self;
// 5、显示网页视图UIWebView:
[self.view addSubview:webView];
}
# pragma mark - UIWebView 的代理方法
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;//当网页视图被指示载入内容而得到通知。应当返回YES,这样会进行加载
- (void)webViewDidStartLoad:(UIWebView *)webView { //当网页视图已经开始加载一个请求后,得到通知。
// [webView stopLoading];//取消载入内容
}
- (void)webViewDidFinishLoad:(UIWebView *)webView;//当网页视图结束加载一个请求之后,得到通知。
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error {
// [webView reload];//重载
}//当在请求加载中发生错误时,得到通知。会提供一个NSSError对象,以标识所发生错误类型。
IOS中UIWebView常用注意点:
1.与UIWebView进行交互,调用web页面中的需要传参的函数时,参数需要带单引号,或者双引号(双引号要进行转义在转义字符前加\),传递json字符串时不需要加单引号或双引号:
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
NSString *sendJsStr=[NSString stringWithFormat:@"openFile(\"%@\")", jsDocPathStr];
[webView stringByEvaluatingJavaScriptFromString:sendJsStr];
}
2.在该代理方法中判断与webView的交互,可通过html里定义的协议实现
- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType;
3.为webView添加背景图片
webView.backgroundColor=[UIColor clearColor];
//这句话很重要,webView是否是不透明的,no为透明 在webView下添加个imageView展示图片就可以了
webView.opaque=NO;
4.获取webView页面内容信息
NSString *docStr=[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.textContent"];
//获取web页面内容信息,此处获取的是个son字符串
SBJsonParser *parserJson=[[[SBJsonParser alloc]init]autorelease];
NSDictionary *contentDic=[parserJson objectWithString:docStr];
//将json字符串转化为字典
5.将文件下载到本地址然后再用webView打开
NSString *path = [[[[NSBundle mainBundle] resourcePath] stringByDeletingLastPathComponent] stringByAppendingPathComponent:@"Documents"];
NSString *resourceDocPath = [[NSString alloc] initWithString:path];
self.filePath = [resourceDocPath stringByAppendingPathComponent:[NSString stringWithFormat:@"maydoc%@",docType]];
NSData *attachmentData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:theUrl]];
[attachmentData writeToFile:filePath atomically:YES];
NSURL *url = [NSURL fileURLWithPath:filePath];
NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
[attachmentWebView loadRequest:requestObj];
//删除指定目录下的文件
NSFileManager *magngerDoc=[NSFileManager defaultManager];
[magngerDoc removeItemAtPath:filePath error:nil];
6.处理webView展示txt文档乱码问题
if ([theType isEqualToString:@".txt"]) {
//txt分带编码和不带编码两种,带编码的如UTF-8格式txt,不带编码的如ANSI格式txt
//不带的,可以依次尝试GBK和GB18030编码
NSString* aStr = [[NSString alloc] initWithData:attachmentData encoding:NSUTF8StringEncoding];
if (!aStr)
{
//用GBK进行编码
aStr=[[NSString alloc] initWithData:attachmentData encoding:0x80000632];
}
if (!aStr)
{
//用GBK编码不行,再用GB18030编码
aStr=[[NSString alloc] initWithData:attachmentData encoding:0x80000631];
}
//通过html语言进行排版
NSString* responseStr = [NSString stringWithFormat:
@"%@",aStr];
[attachmentWebView loadHTMLString:responseStr baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];
return;
}
更多总结见这篇博文(IOS开发 - UIWebView(用法全面介绍,含最全的JS交互))上面的一些是列举我认为常用的,这个博文会持续更新,把我后期增加的路由跳转来分享下。