简述
如今很多复杂的页面，为了进度，选择了H5页面开发，所以就必须在oc中嵌套使用H5页面，这样更快的促进项目。但是对于交互问题，自己遇到的一些问题记录一下。
1.webview的创建 实例化
_webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0,
[UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
_webView.delegate = self;
_webView.backgroundColor = [UIColor grayColor];
[_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@'http://192.168.1.23:3000/prop/?user_id=37&token=e06a6842be6b1729da0bbd25c78ae896ead061e4']]];
[self.view addSubview:_webView];
2.在H5中点击不同的位置跳转到不同的oc界面
正常情况下，我们一般只需要和前端配合商量好，点击位置触发代理
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
从代理中我们可以拿到 NSString *string = [[request URL]absoluteString]; 接着通过字符串的判断 hasfix，加上和前端的商量我们可以通过url判断你点击的位置
if( [path hasPrefix:@"http://gm_app_client/detail_video/"] ){
NSString * pageId = [path substringFromIndex:@"http://gm_app_client/detail_video/".length];
[self showDetailPage:pageId other:1];
}
这样就能在事件中跳转到我们的OC代码了。
3.还有一种情况，就是前端没做一些处理，需要我们配合前端使用js进行交互，这时候就需要用到一个JSContext
@property (nonatomic,strong)JSContext *context;
在网络加载完成之后代理中
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
1. //iOS调用js
2. //首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）
3.JSContext *context=[_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
4.//// 打印异常,由于JS的异常信息是不会在OC中被直接打印的,所以我们在这里添加打印异常信息,
self.context.exceptionHandler =
^(JSContext *context, JSValue *exceptionValue)
{
context.exception = exceptionValue;
NSLog(@"%@", exceptionValue);
};
//js调用recharge方法时会走block回调
__weak typeof(self) weakSelf = self;
self.context[@"recharge"] = ^(){
NSArray *args = [JSContext currentArguments];
PKRechargeController *rechageVC = [[PKRechargeController alloc]init];
[weakSelf presentViewController:rechageVC animated:YES completion:nil];
NSLog(@"这是一条测试数据 哈哈哈哈....");
};
其中recharge就是网页js中添加的方法，这样就能实时监听一样 只要你在H5中点击出发这个方法 这样就能完成H5和oc利用js进行嵌套的交互
上面是UIWebview情况下的两种交互，但是iOS8之后出现了WKWebView.
WKWebview
现在伴随着iOS11的出现，意味着以后最低的适配版本要提升到iOS9，最低都iOS8了，这样UIWebView讲会退出历史舞台，会被WKwebview替代，本身前者UIWebview就具有严重的内存问题，而且如果是JS调用原生的方法，那么交互方式也是比较麻烦的（H5端要制定特定协议头的URL，在对应代理方法中拦截URL），然后判断是否符合要求，最后还要进行字符串的截取操作。
下面让我们一起来看WKWebview怎么实现交互的吧（附上关键OC代码和JS代码）
1.首先WKWebview的创建
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init]; //WKWebview配置对象
WKPreferences *preference = [[WKPreferences alloc]init];
config.preferences = preference;
//是否允许与js进行交互，默认是YES的，如果设置为NO，js的代码就不起作用了
preference.javaScriptEnabled = YES;
WKUserContentController *userContentController = [[WKUserContentController alloc]init]; //交互的重要之点
[userContentController addScriptMessageHandler:self name:@"Share"]; //切记 Share 方法名一定要和H5开发人员协商定好 self 指当前控制器，切记这个代理要添加 WKScriptMessageHandler 不然会报警告
config.userContentController = userContentController; _homeBannerWebView = [[ArtBaseWKWebView alloc]initWithFrame:CGRectMake(0, 64, KSreenWidth, KSreenHeight - 64) configuration:config];
_homeBannerWebView.urlString = self.urlString;
_homeBannerWebView.UIDelegate = self;
_homeBannerWebView.navigationDelegate = self;
_homeBannerWebView.scrollView.showsHorizontalScrollIndicator = NO;
_homeBannerWebView.scrollView.showsVerticalScrollIndicator = NO;
上面是WKWebview的创建和监听，接下来看看JS端的代码
<div id="app">
<div onclick="diaoIos()">ios按钮</div>
<span id="anniu"></span>
<div onclick="diaoAndroid()">安卓按钮</div>
<span id="anniu2"></span>
</div>
<!-- <script src="node_modules/vue/dist/vue.min.js"></script> -->
<script>
function diaoAndroid() {
var result = window.android.back({title:"测试标题",content:"测试分享",url:"html://www.baidu.com"});
document.getElementById("anniu2").innerHTML=result;
}
function diaoIos() {
var results2 = window.webkit.messageHandlers.Share.postMessage({title:"测试标题",content:"测试分享",url:"html://www.baidu.com"});
document.getElementById("anniu").innerHTML=result2;
}
重点是方法中的Share方法名，这是监听交互的方法名
接下来就是OC端监听代理了
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
{
NSLog(@"------------------");
if ([message.name isEqualToString:@"Share"]) {
NSLog(@"点击了调用了。。");
}
}
当然这是监听一个方法，但是其实这里分析起来，当_homeBannerWebView添加了addScriptMessageHandler检测时候可以理解成下面一句代码：
[self.homeBannerWebView.configuration.userContentController addScriptMessageHandler:self name:@"Share"];
这里控制器强引用了WKWebview，WKWebView强引用了configuration（copy） configuration强引用了userContentController userContentController 强引用了 self （控制器）,所以容易导致循环引用。导致控制器无法被释放，所以可以如下处理
// 因此这里要记得移除handlers
[self.homeBannerWebView.configuration.userContentController removeScriptMessageHandlerForName:@"Share"];
这里重点介绍了是在H5中操作跳转原生，但是在原生APP中操作完再回去呢
OC调用JS
// 将分享结果返回给js
NSString *resutString = [NSString stringWithFormat:@"shareResult('%@','%@','%@')",title,content,url];
[self.webView evaluateJavaScript:resutString completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@----%@",result, error);
}];
如有错误，欢迎指点一二
网友评论