iOS开发 WKWebView实现JS交互

雪蝠發表於 2022-3-28 16:41:00

需求：利用webView加载H5页面，并实现点击H5页面的按钮触发事件，事件是调用OC的方法。 简单说就是JS调用OC的方法，这里我们选择的是WKWebView，至于为什么不用UIWebView，自行百度或者看开发文档。 实现： 1、首先应该倒入 WebKit 框架 #import <WebKit/WebKit.h> 2、懒加载一个webView
<div class="cnblogs_code">
<pre>//需要的代理
<WKUIDelegate,WKNavigationDelegate,WKScriptMessageHandler>

@property (nonatomic , strong) WKWebView *webView;

- (WKWebView *)webView{
if (!_webView) {
 WKWebViewConfiguration *config = [init];
 _webView = [initWithFrame:CGRectMake(0, NAVHEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT-NAVHEIGHT) configuration:config]; if (@available(iOS 11.0, *)) {             ;         }
 _webView.UIDelegate = self;
 _webView.navigationDelegate = self;
 NSURLRequest *request = [initWithURL:];
 ;
}

return _webView;

}</pre>
</div>
 3、JS端的方法构成HTML代码： 切记在html中预留接口，格式必须是固定的：
<div class="cnblogs_code">
<pre>window.webkit.messageHandlers.actionName.postMessage('parameter');
actionName：为方法名
parameter：为传递过来的参数，在html中叫做对象，到OC我们这里就是字典</pre>
</div>
 举个例子：
<div class="cnblogs_code">
<pre>window.webkit.messageHandlers.actionName.postMessage('parameter');
actionName：为方法名
parameter：为传递过来的参数，在html中叫做对象，到OC我们这里就是字典</pre>
</div>
这里我们没有带参数，要是需要参数，就让前端加上，你不会没关系，也不需要你会，前端知道该怎么做。 4、OC端添加JS方法处理器：
<div class="cnblogs_code">
<pre>WKUserContentController *userContentController = _webView.configuration.userContentController;
 ;
 ;
 ;
 ;</pre>
</div>
这里我们添加了了四个方法，切记着四个方法的名称无比与JS端一致。 5、实现WKScriptMessageHandler代理方法 
<div class="cnblogs_code">
<pre>- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
NSLog(@"ScriptMessage 传递的消息内容 : %@",message.body);
if () {
}
if () {
}
if () {
}
if () {
}
}</pre>
</div>
6、在界面消失的时候清除JS方法
<div class="cnblogs_code">
<pre>- (void)viewWillDisappear:(BOOL)animated {
;

;
;
; ;</pre>
<pre> }</pre>
</div>
到这里就结束了，当你点击 webView 上的按钮时，就能够进入我们的OC方法里。 总结起来就三点内容： 1.前端和苹果移动端的方法名必须一致，且前端要以固定的格式来写方法，否则移动端收不到事件反馈； 2.通过 WKUserContentController 添加html中预留的方法； 3.实现 WKScriptMessageHandler 的代理方法； 
来源：https://www.cnblogs.com/laolitou-ping/p/16067824.html

頁: [1]

琼殿技术论坛's Archiver

iOS开发 WKWebView实现JS交互