iOS webView的高级用法之JS交互，js与oc的相互调用（JavaScriptCore）

重要的事情放前面 github地址：https://github.com/horisea/JSCallOCTest   欢迎star

 

前言：说起JS交互，很多童鞋会黯然色变，感觉很高深的样子。大部分小伙伴只知道一种，哪一种我也说说吧。

   1.在webView中将要请求的时候，拦截URL，进行重定向，然而该场景实用有限，网上资料也很多下面说说另一种交互方式。

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

  2.先说一下这种交互方式应用的场景吧。

     2.1:需求：假如贵公司在做一个金融项目，有一个版本功能需要提交个人资料信息，只是为了一个业务需要，那么通过h5做一套，然后iOS和Android只需要webView加载就行，明显提高了开发效率。。。如果贵公司的其他产品也想接入这个功能，那也能通过webview方式直接用了，所谓是牛逼哄哄，通用性特别强。

         但是：(1):比如，webview里有一个上传身份证照片的功能，点击网页，需要iOS端调起相册功能。。如何交互？？

                    (2): 加载的网页中，点击一个按钮，要查看订单详情功能，但是需要传会订单号，怎么办：

                    (3): 点击下一步，，iOS端进入下一个界面；？？

  这就牵扯到JS调用OC方法，传递参数等等。

 

3.本文将非常详细的说明使用方法，一句代码不少的说明，你只需要按照步骤操作，一定能运行出你想要的JS交互场景，包你能派上大用场。。废话不说了，开始吧

 

正文：JS交互，就是js 中通过一个对象来调用方法的

   1.js交互，首先我们要准备一个html文件，没有网页文件，要不然怎么交互：至于这些东西怎么创建，这里不做介绍，楼主最后会附上联系方式，提供demo，demo中有，直接复制就行。

   1.1.首先准备一个html文件，html文件里引用了外部的JS文件

 

2.js文件，里面实现了html文件里的一些按钮的点击事件

 

图片里非常清楚的注释了一些重要代码的注释，非常详细，搞得自己很会h5一样，程序员，不能放弃任何一次装b的机会，

 

⚠️注意： 这里在网页中写了4个按钮，，分别调OC的方法

                   1. 点击按钮，唤起系统相册功能；

                   2. 就是简单的调一个方法

                   3. 调用一个参数的方法

                   4. 调用多个参数的方法，这里举例是两个。

 

  2.首先创建一个类 继承NSObject ，并且规定一个协议，直接上代码

 2.1>创建TestJSObject.h头文件

#import <Foundation/Foundation.h>

#import <JavaScriptCore/JavaScriptCore.h>

 

@protocol TestJSObjectProtocol <JSExport>

/// 调支付

- (void)ZTHpay;

/// 调系统相册

- (void)ZTHShowPicker;

/// 传参数回来 比如是一个订单号

- (void)ZT