重要的事情放前面 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)ZTHPassParameter:(NSString *)orderNumber;

/// 傳兩個引數回來 比如是訂單號，姓名

- (void)ZTHTestParameteroneAnd:(NSString *)orderNumber Parametertwo:(NSString *)name;

@end

@interface TestJSObject : NSObject<TestJSObjectProtocol>

///定義三種block，回撥到控制器中；

@property (nonatomic,copy)void(^showPickerBlock)();

@end

2.2:然後在.m中實現宣告的方法，這4個方法，都會被呼叫

#import "TestJSObject.h"

@implementation TestJSObject

- (void)ZTHpay{

    NSLog(@"調了支付了－－－－－－－－－－－－－－－－－");

}

- (void)ZTHShowPicker{

    NSLog(@"調了相機－－－－－－－－－－－－－－－－－－－");

  dispatch_async(dispatch_get_main_queue(), ^{

       //當然回撥後要處理的邏輯，肯定不能在這個類裡處理，這裡採用block回撥到控制器中處理，其餘的三種方式都可以用這種方式處理，這裡就不一一列舉了

        self.showPickerBlock();

    });

}

- (void)ZTHPassParameter:(NSString *)orderNumber{

    NSLog(@"%@", orderNumber);

}

//- (void)ZTHTestParameterone:(NSString *)orderNumber AndParametertwo:(NSString *)name{

//    NSLog(@"訂單號－－%@姓名－－－%@", orderNumber, name);

//}

- (void)ZTHTestParameteroneAnd:(NSString *)orderNumber Parametertwo:(NSString *)name{

    NSLog(@"訂單號－－%@姓名－－－%@", orderNumber, name);

}

@end

  3最後在控制器中

   3.1>在懶載入中，設定了web view的url，是一個本地檔案，也就是我們一開始寫的html檔案的路徑。

#pragma mark - lazy

- (UIWebView *)webview{

    if (!_webview) {

        _webview=[[UIWebViewalloc]initWithFrame:CGRectMake(0,200,self.view.bounds.size.width,300)];

        _webview.delegate =self;

        _webview.backgroundColor=[UIColorlightGrayColor];

        NSString *htmlPath = [[NSBundlemainBundle]pathForResource:@"index"ofType:@"html"];

        NSURL *localUrl = [[NSURLalloc]initFileURLWithPath:htmlPath];

        [_webview loadRequest:[NSURLRequestrequestWithURL:localUrl]];

    }

    return _webview;

}

3.2.

#pragma mark - UIWebViewDelegate

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    //首先建立JSContext物件（此處通過當前webView的鍵獲取到jscontext）

   _context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    //第二種情況，js是通過物件呼叫的，我們假設js裡面有一個物件 testobject 在呼叫方法

    //首先建立我們新建類的物件，將他賦值給js的物件

    TestJSObject *testJO=[TestJSObjectnew];

    testJO.showPickerBlock = ^{

        [selfshowImagePicker];

    };

    _context[@"testobject"]=testJO;

}

到這裡，就已經大功告成了。。。文中打紅色的文字部分需要您仔細欣賞欣賞，，首先在TestJSObject.h中，我們聲明瞭一個block屬性，原因JS呼叫的方法實現在改類中，但是我們不能在這個類裡處理邏輯，那當然需要一個屬性回撥到控制器中咯，於是在實現中呼叫了block，然後在上面寫了block的實體，去呼叫

showImagePicker方法，然後你就可以處理了，，，，其實就是block最簡單的用法，，但是，，肯定有很多童鞋不瞭解。。哈哈，不耽誤。。下面附上控制器的所有程式碼，

//  Copyright © 2016年朱同海. All rights reserved.

//  本文主要介紹JS呼叫OC互動的方式

#import "ViewController.h"

#import <JavaScriptCore/JavaScriptCore.h>

#import "TestJSObject.h"

@interface ViewController () <UIWebViewDelegate,UIActionSheetDelegate>

{

    JSContext *_context;

}

@property (nonatomic,strong)UIWebView *webview;

@end

@implementation ViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    self.view.backgroundColor = [UIColorcyanColor];

    [self.viewaddSubview:self.webview];

}

#pragma mark - lazy

- (UIWebView *)webview{

    if (!_webview) {

        _webview=[[UIWebViewalloc]initWithFrame:CGRectMake(0,200,self.view.bounds.size.width,300)];

        _webview.delegate =self;

        _webview.backgroundColor=[UIColorlightGrayColor];

        NSString *htmlPath = [[NSBundlemainBundle]pathForResource:@"index"ofType:@"html"];

        NSURL *localUrl = [[NSURLalloc]initFileURLWithPath:htmlPath];

        [_webview loadRequest:[NSURLRequestrequestWithURL:localUrl]];

    }

    return _webview;

}

#pragma mark - UIWebViewDelegate

- (void)webViewDidFinishLoad:(UIWebView *)webView{

    //首先建立JSContext物件（此處通過當前webView的鍵獲取到jscontext）

   _context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    //第二種情況，js是通過物件呼叫的，我們假設js裡面有一個物件 testobject 在呼叫方法

    //首先建立我們新建類的物件，將他賦值給js的物件

    TestJSObject *testJO=[TestJSObjectnew];

    testJO.showPickerBlock = ^{

        [self showImagePicker];

    };

    _context[@"testobject"]=testJO;

}

- (void)showImagePicker{

    NSLog(@"開始喚起相機");

    UIActionSheet *actionSheet = [[UIActionSheetalloc]

                                  initWithTitle:@"請選擇檔案來源"

                                  delegate:self

                                  cancelButtonTitle:@"取消"

                                  destructiveButtonTitle:nil

                                  otherButtonTitles:@"拍照",@"從手機相簿選擇",nil];

    [actionSheet showInView:self.view];

}

@end

4.上一些執行圖吧

  4.1:web view的介面圖；；

4.2，點選第一個按鈕，通過調

ZTHShowPicker方法，內部block的呼叫，喚起控制器中actionsheet。

4.3，點選最後兩個按鈕，，第一個傳遞訂單號，第二個傳遞訂單號和姓名，點了兩次，列印了兩次

5.關於帶多個引數的JS回撥，OC中對應方法的寫法：

 比如JS中定義了這個方法

 testobject.ZTHTestParameteroneAndParametertwo("1123425255","ZTH");那ZTHTestParameteroneAndParametertwo為方法名

那麼OC中方法名可以這麼寫：1和2都是可行的

1.- (void)ZTHTestParameterone:(NSString *)orderNumber AndParametertwo:(NSString *)name;

2.- (void)ZTHTestParameteroneAnd:(NSString *)orderNumber Parametertwo:(NSString *)name;

注意：如果上面不行，也可以這麼命名

3.- (void)ZTHTestParameteroneAndParametertwo:(NSString *)orderNumber    :(NSString *)name; // 第二個引數只有:沒錯

聰明的你看出來了，只要是OC的方法名去掉:(冒號)拼接起來後，，和JS的方法名一致，那麼都是會呼叫改方法的

千萬不能作死：說，我這麼拼也是我上面說的原理，那麼很遺憾的告訴你，不可以，你把And拆開了，是一個單詞，不識別（個人見解）

3.- (void)ZTHTestParameteroneA:(NSString *)orderNumberndParametertwo:(NSString *)name;

最後說兩句：這可能是JS互動中最好用的方法了，總結一下也就是我們在OC中定義一個遵守

JSExport協議的類，又定義了一個協議，宣告實現的方法和js中按鈕的點選事件方法名稱一致，用來一一對映。。最後在控制器中webview載入完畢之後，

 TestJSObject *testJO=[TestJSObjectnew];

    testJO.showPickerBlock = ^{

        [selfshowImagePicker];

    };

_context[@"testobject"]=testJO;

當然OC內部肯定封裝了很多東西匹配他們，，這不用我們管，，最後我們看看JS檔案中的一個方法名

 testobject.ZTHpay();

原來是根據testobject這個物件聯絡起來的，

樓主語言能力不行，不知道有沒有繞暈你，但是你只要把demo跑一跑，問題就都能解決了。。當然你要是知道點h5的東西，那肯定更簡單咯

就先寫到這，回頭再完善，樓主其他文章裡有聯絡方式，比如這兩篇文章就有聯絡方式，如有不對的地方，歡迎指正。。想要demo的童鞋，可以加扣扣。。在下面的文章最後有。先好好上會班。

當然樓主也不是憑空就會的，本文參考連結，當時他說的是技術點，我把細節說的很細，結合下更好哦。

http://blog.csdn.net/lwjok2007/article/details/47058795

如果你喜歡這篇文章，或者有任何疑問，可以掃描第一個二維碼，加樓主好友哦

也可以掃第二個二維碼，進qq群。這裡有很多生活，職業，技術相關的文章哦。歡迎您的到來。

微訊號：                                             群：