H5与iOS交互(WebView与WKWebView)

WebView

项目中功能多了,就会加载一些H5界面。这个时候就会用到WebView。再复杂一点就会用到原生与H5交互。举个例子,项目中经常会有一些活动界面。然而这些活动界面总是在变化。用原生代码写,维护成本较高。这个时候就可以用H5代替。这就会用到H5与原生相互调用。
关于WebView的创建,H5加载页面。我就不贴出来代码了。直接说一下 JavaScriptCore框架。这是苹果解决与H5交互专用框架。框架中有几个类需要注意:
JSContext.h(联系H5与原生的桥梁功能与CoreData中的context类似);
JSValue.h(用于获取H5中的任意对象);
JSExport.h(一个协议调用的时候会用到);
最后要知道,所有的调用方法基本上都是在- (void)webViewDidFinishLoad:(UIWebView *)webView里面完成。也就是页面加载完成时候调用。
JSContext创建:

     self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];//创建

     self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue)
    {
        context.exception = exceptionValue;
    };检测是否创建成功

H5调用原生

使用block

H5代码:

<button onclick="myAction();" style="">点击按钮返回上一个页面</button>
//如需传值,在方法名后面的括号里面加上即可

原生代码:

    self.context[@"myAction"] = ^(){
    };//在小括号中接收H5传过来的参数,需要保持类型一致,在大括号中实现调用原生的方法;

使用JSExport代理

<button onclick="native.myLog();">调用OC中myLog方法</button>
//在括号中添加需要传递的参数

原生代码:
创建代理,当前控制器遵循代理即WebExport

@protocol WebExport <JSExport>

JSExportAs
(myLog ,- (void)myOCLog :(NSString *)string);

指定代理(在- (void)webViewDidFinishLoad:(UIWebView *)webView方法中)

    self.context[@"native"] = self;

实现代理方法

- (void)myOCLog :(NSString *)string{
    NSLog(@"%@");
}

以上就是JS调用原生的基本使用。

原生调用H5

H5代码

<b id="label">需要改变的标签</b>

原生代码(在你需要触发的地方添加)

    JSValue *labelAction = self.context[@"labelAction"];//使用JSValue接收fangaf

    [labelAction callWithArguments:@[@"你好"]];
参考文档

https://www.jianshu.com/p/0428d0734379

WKWebView

相对来说WKWebView交互起来就比较麻烦啦,感觉没有WebView顺手。同样关于WKWebView的创建我就不贴出代码了

H5调用原生

原生代码(在- (void)viewDidLoad 方法中)

//配置环境
    self.configuration = [[WKWebViewConfiguration alloc]init];
    self.userVC = [[WKUserContentController alloc]init];
//注册方法
    [self.userVC addScriptMessageHandler:self name:@"sayhello"];
    self.configuration.userContentController = self.userVC;

接收参数

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    NSLog(@"%@",message.body);//body中就是接收的参数
}

H5代码

<html>
    <body>
        <h1>hello world</h1>
        <button onclick="say()">say hello</button>
    </body>
  <script>
function say(){
    //前端需要用 window.webkit.messageHandlers.注册的方法名.postMessage({body:传输的数据} 来给native发送消息
    window.webkit.messageHandlers.sayhello.postMessage({body: 'hello world!'});
    //这句很重要,利用WKWebView的新特性MessageHandler来实现JS调用原生方法,很多博客都没有写上这句,所以导致我一直没有成功
}
</script>
</html>
参考文档

https://www.jianshu.com/p/4fa8c4eb1316
http://blog.sina.com.cn/s/blog_83b89df10102xuce.html

小伙伴

https://www.jianshu.com/p/aa885645e505

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 跟原生开发相比,H5的开发相对来一个成熟的框架和团队来讲在开发速度和开发效率上有着比原生很大的优势,至少不用等待审...
    大冲哥阅读 1,877评论 0 7
  • WebView 项目中功能多了,就会加载一些H5界面。这个时候就会用到WebView。再复杂一点就会用到原生与H5...
    雨洒潇湘阅读 1,649评论 1 7
  • 随着H5技术的兴起,在iOS开发过程中,难免会遇到原生应用需要和H5页面交互的问题。其中会涉及方法调用及参数传值等...
    Chris_js阅读 3,163评论 1 8
  • JavaScriptCore框架主要是用来实现iOS与H5的交互。由于现在混合编程越来越多,H5的相对讲多,所以研...
    水灵芳蕥阅读 1,462评论 1 8
  • 青砚阅读 206评论 0 0