博客> OC-H5交互心得
OC-H5交互心得
2小时前 评论:0 阅读:408 小李aa

前言

最近突然公司有需求做H5交互,在此写点心得体会,如果你也该做这个需求,一定一定想清楚什么时候是H5掉OC什么时候是OC掉H5,这点很重要。在这里,我选择原生UIWebview,不喜欢用第三方,没有安全感。

如何查看html原代码

既然要做h5交互,那就要学会如何查看网页源代码,就是为了避免遇到不爱交流的同事,其实语言相差没那么大,应该都能看懂,找个方法啥的很方便。下面说步骤。

1.safari进入自己的需求网页。 2.左上角-Safari-偏好设置 3.设置如下

 DC21B6D1-F360-4696-A7B1-9C0A4961A3B5.png

4.左上角 开发-显示页面源文件

WebView

 E1A44798-3BFC-4A21-A7C5-AA4245D9D201.png

在这里强调一点UIWebView默认使用了缓存,那么h5那边修改代码的话这边除非删除缓存,不然一旦有缓存是无法显示更新的,NSURLRequestReloadIgnoringLocalCacheData不使用缓存,如果你愿意缓存,注意隔段清楚缓存。这点也很重要,不强调三遍了。

webViewDelegate

 73D4D9AF-F6F8-403D-943F-0180F34603CF.png  74C7288C-7013-403F-894B-D0F5FE9E3EA9.png

OC调取H5方法

这里就介绍一下常用的,详细的可以百度下

stringByEvaluatingJavaScriptFromString这个方法是调取H5的方法

获取html的title

[webView stringByEvaluatingJavaScriptFromString:@"document.title"]

获取web界面所有的html

[webView stringByEvaluatingJavaScriptFromString:@"document.documentElement[removed]"]

获取当前页面的url

[webView stringByEvaluatingJavaScriptFromString:@"[removed].href"]

掉H5方法 例如h5里面function test(str,str1){ }

[webView stringByEvaluatingJavaScriptFromString:@"test('22','33')"]

H5调取OC方法

导入javaScriptCore库 target - Build Phases - Link Binary With Libraries - 添加

1.创建类继承于NSObject,类名自取

2.在.h里面声明协议 协议里面方法和h5里面对应 比如h5里面bridge.obtainVerificationCode(1523)

@protocol JSTestObjetProtocol [JSExport] 间括号显示不出用[]代替了

-(void)obtainVerificationCode:(NSString *)phone;

@end

@interface JSTestObjext : NSObject [JSTestObjetProtocol] 间括号显示不出用[]代替了

@end

.m文件里面进行回调处理

-(void)obtainVerificationCode:(NSString *)phone{ }

做好以上步骤,就可以使用了,使用方法如下,回到webview声明的下方,

JSContext *context=[myWebView

valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

JSTestObjext *test = [JSTestObjext new];//刚刚声明的NSObject类

test.myWebView = myWebView;

context[@"bridge"] = test;这里的bridge对应h5里面方法bridge.obtainVerificationCode(1523)中的bridge

收藏
1
sina weixin mail 回到顶部