传送门
Demo 下载地址
1.配置部分
1.1 WKWebView的UI初始化渲染
1.2 WKWebViewConfiguration 是 webView 的配置项
1.3 WKPreferences 设置对象
2.OC与JS互相传参部分
2.1 JS调用OC方法(传参数给 OC 端)
2.1.1 OC 部分
oc 跟 js 端协议好方法名 比如 js 的方法为 Back()
1.oc 对 js 的方法进行监听
[config.userContentController addScriptMessageHandler:self name:@"Back"];
2.oc 设置代理并且导入代理
self.webView.UIDelegate = self;
self.webView.navigationDelegate = self;
3.实现代理
- (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message;
4.离开页面的时候移除监听
[config.userContentController removeScriptMessageHandlerForName:@"Back"];
2.1.2 JS 部分
1.创建按钮 并且实现按钮的回调
2.按钮的响应方法中添加发送消息到 OC (可以携带参数)
functionbackClick() {window.webkit.messageHandlers.Back.postMessage('固定写的 js 值-->点击了返回');}
2.1.3 JS调用OC总结
1.OC 添加对 JS 的消息监听,实现代理对监听的实现方法。
2.JS 端在合适的时机发送消息,并且可以携带参数。
2.2 OC调用JS方法(传参数给 JS 端)
2.2.1 OC部分
js 跟 oc 端协议好方法名 比如 js 的方法为 transferPrama(str)
//oc 在合适的时机调用 js 方法(可以传参数)
NSString* paramString =@"我是 OC 调用 JS";
NSString* jsStr = [NSStringstringWithFormat:@"transferPrama('%@')",paramString];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {NSLog(@"result=%@ error=%@",result, error);}];
2.2.2 JS部分
//js需要定义一个对应的方法供 OC 调用
functiontransferPrama(str) {
document.getElementById("secondid").value = str;
}
2.2.3 OC调用JS总结
1.OC 在原生控件响应方法里边添加对 JS 方法的调用
2.JS端写好一个方法给 OC 调用
3.总结
JS 调用 OC 走的是监听回调
- (void)userContentController:(WKUserContentController*)userContentController didReceiveScriptMessage:(WKScriptMessage*)message
OC 调用 JS 走的是JS方法调用
- (void)evaluateJavaScript:(NSString*)javaScriptString completionHandler:(void(^_Nullable)(_Nullableid,NSError*_Nullableerror))completionHandler;
愤怒的牛牛的
愤怒的牛牛的新浪博客
愤怒的牛牛的GitHub