JavaScript:淺談iOS與H5的交互-JavaScriptCore框架

時間  2019-11-20
標籤 javascript 淺談 ios h5 交互 javascriptcore 框架 欄目 JavaScript 简体版
原文   原文鏈接

JavaScript:淺談iOS與H5的交互-JavaScriptCore框架

 

 

前言

小的做爲一個iOS程序猿,可能研究JavaScript以及H5相關的知識並非爲了真正的要去轉行作這一方面,其實更多的爲了要研究OC中的JavaScriptCore框架,JavaScriptCore框架主要是用來實現iOS與H5的交互.固然了,最先我曾經寫過iOS淺談webView的JS一種用法.(去掉web顯示頁的廣告),這種算得上最簡單的iOS與H5的交互了.如今混合編程愈來愈多,H5的相對講多,因此研究JavaScriptCore框架是至關有必要的.好了不扯這些沒用的了,來搞今天的主題---JavaScriptCore框架,首先來講說JavaScriptCore框架幾個經常使用的類.javascript

 

JavaScriptCore的類說明

在作OC與H5的交互以前,咱們須要先導入JavaScriptCore框架.css

#import <JavaScriptCore/JavaScriptCore.h>

而後咱們進入JavaScriptCore框架的JavaScriptCore.h,咱們發現總共以下有幾個類.java

  • JSContext
    JSContext表明一個JavaScript的執行環境的一個實例。全部JavaScript執行都是在上下文內進行。JSContext還用於管理對象的生命週期內JavaScript的虛擬機(API文檔原文翻譯)。做爲上下文不少地方咱們的都有可能使用過,好比CoreData,CoreGraphics等等,那麼上下文對象究竟是什麼呢?你能夠理解爲是一個二者的鏈接橋樑,如圖所示.

 

  • JSValue
    JSValue的主要做用就是用來接收JSContext執行後的返回結果,固然了,JSValue能夠是js的任意類型,例如,js中的變量,對象以及函數.下面咱們就舉個例子說明一下,例如咱們如今須要從JSContext對象中接收到一個變量.咱們能夠以下所示.

    首先在<script>標籤中咱們定義了一個字符串變量. 
    <script type="text/javascript"> var myObject = "myObject"; </script>
    而後咱們在OC的代碼中以下表示,其中self.context表明着已經初始化完成的JSContext對象. 
    JSValue *myObject = self.context[@"myObject"];
    固然了,咱們若是須要在OC中使用JSValue對象,那麼咱們可能須要適當的轉換一下他的類型,框架提供了不少方法.好比上面的例子咱們想要打印的話就能夠以下所示. 
    NSLog(@"%@",[myObject toString]);
  • JSManagedValue
    JSManagedValue這個類其實到如今我尚未具體用到過.當時這裏我也要根據API文檔說明一下.JSManagedValue是JSValue的封裝，用它能夠解決JS和OC代碼之間循環引用的問題,JSManagedValue最經常使用的用法就是安全的從內存堆區裏面引用JSValue對象.若是JSValue存儲在內存的堆區的方式是不正確的,很容易形成循環引用,而後致使JSContext對象不能正確的釋放掉.

 

  • JSVirtualMachine
    一個JSVirtualMachine對象其實表明着一個JavaScript對象空間或者一組執行資源。JSVirtualMachine支持線程安全鎖,虛擬機,併發分配支持的JavaScript執行.也就說JSVirtualMachine用來管理整個JavaScript,固然了,這個類我也沒有用到過.

 

  • JSExport
    JSExport是一個協議,經過實現它能夠完成把一個native對象暴漏給JS,固然了咱們要指定native對象.好比咱們指定native對象就是自身.以下所示. 
    self.context[@"native"] = self;

 

JavaScriptCore中JSContext對象的初始化

在進行iOS與H5的交互以前,咱們須要作的是對JSContext對象進行初始化的設置,全程是在webView的- (void)webViewDidFinishLoad:(UIWebView *)webView這個代理方法中進行的.因此咱們須要對webView進行初始化以及設置代理,這裏就不過多的言語了.咱們直接看一下在代理方法中如何對JSContext對象進行初始化設置.代碼以下所示.web

- (void)webViewDidFinishLoad:(UIWebView *)webView{ //對JSContext對象進行初始化 self.context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]; //驗證JSContext對象是否初始化成功 self.context.exceptionHandler = ^(JSContext *context, JSValue *exceptionValue) { context.exception = exceptionValue; }; }

 

JavaScript調取OC代碼

上一個模塊咱們已經對JSContext對象進行了初始化,那麼要使用JavaScript調取OC代碼主要有兩種方式,一種是使用block(簡單粗暴);另一種是使用JSExport協議(決勝千里).編程

  • block方式

    block方式比較簡單,也是我比價推薦的一種,可是要注意防止循環引用問題的發生.首先咱們先說一下不帶有參數的函數調用,也就是說咱們不須要從網頁那邊有參數的傳值,好比跳轉頁面等等.代碼以下所示.

    HTML文件中的<body>標籤的按鈕代碼安全

    <button onclick="myAction();" style="">點擊按鈕返回上一個頁面</button>

    OC中在- (void)webViewDidFinishLoad:(UIWebView *)webView方法中對block塊進行代碼實現.併發

    __weak typeof(self)temp = self; self.context[@"myAction"] = ^(){ [temp.navigationController popViewControllerAnimated:YES]; };

     


    接下來咱們看一下,經過頁面的傳值,咱們把H5標籤的值做爲參數進行傳值操做,而且調用OC的block進行打印.

    HTML文件中的<body>標籤的div標籤代碼(一個輸入框,一個按鈕)框架

    <input type="text" name="輸入框" id="textField" placeholder="請輸入要打印的信息" /> <button onclick="log(document.getElementById('textField').value);">打印輸入框信息</button>

    而後咱們在OC的代碼中實現如下block函數.其中string參數就是網頁中輸入框的值.函數

    self.context[@"log"] = ^(NSString *string){ NSLog(@"%@",string); };

    效果圖以下所示.座標是手機模擬器,右邊是Xcode控制檯.學習

     

     

  • JSExport協議方式
    經過實現JSExport協議方式進行OC與JS的交互,這裏我只是簡單的實現如下沒有參數的函數調用.首先,咱們在HTML文件中建立一個按鈕用來調用OC中JSExport協議方法.
    <button onclick="native.myLog();">調用OC中myLog方法</button>
    咱們須要把native對象指定爲當前控制器,也就是本身.這句代碼是在- (void)webViewDidFinishLoad:(UIWebView *)webView方法中實現的. 
    self.context[@"native"] = self;
    而後咱們要寫一個繼承於JSExport的協議,協議以下所示.這裏我要作一下對JSExportAs(PropertyName,Selector)這個宏定義作一下解釋,也就說在PropertyName表明着JS函數的名稱,而Selector表明着OC的協議方法,要注意的是Selector必需要有參數,不論是否須要傳值.(不知因此然.😭,求大神講解) 
    @protocol WebExport <JSExport> JSExportAs (myLog , - (void)myOCLog :(NSString *)string ); @end
    定義好了方法以後,咱們就讓當前的控制器遵照協議.實現代理方法. 
    @interface JavaScriptCallOCViewController ()<UIWebViewDelegate,WebExport>
    - (void)myOCLog :(NSString *)string{ NSLog(@"你好,世界!"); }

 

OC調用JavaScript函數

iOS淺談webView的JS一種用法.(去掉web顯示頁的廣告)中咱們說過一種比較簡單的經過OC調取JavaScript函數的方式,固然了,咱們就是使用stringByEvaluatingJavaScriptFromString方法添加了一個JS語句.代碼以下所示.具體能夠查看原文.

- (void)webViewDidFinishLoad:(UIWebView *)webView{ [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.getElementsByClassName('adpic')[0].style.display = 'none'"]; }

今天咱們說一下如何使用JavaScriptCore讓OC調用JavaScript函數,使用JavaScriptCore進行OC調用JavaScript函數是很容易進行傳值操做的.首先咱們須要在HTML文件建立愛你一個帶有id的標籤以及一個JavaScript函數.代碼以下所示.

<b id="label">須要改變的標籤</b>
<script type="text/javascript"> function labelAction(obj) { document.getElementById('label').innerHTML = obj; } </script>

而後就是OC代碼中的操做了,咱們依然先須要對webview和JSContext對象進行初始化設置.這裏就再也不重複的囉嗦了.
爲了演示的效果,我把函數的調用放在了rightBarButtonItem的調用方法中.總體的代碼以下所示.

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithTitle:@"改變" style:UIBarButtonItemStyleDone target:self action:@selector(changeWebTxet)];

下面就是實現方法,首先咱們要先經過JSContext對象獲取到JS中的對應函數而且使用JSValue對象進行接收.而後咱們經過使用- (JSValue *)callWithArguments:(NSArray *)arguments;進行JS函數的調用,固然了這裏的JS函數沒有返回值,我也就沒有作接收返回值的工做.

-(void)changeWebTxet{ JSValue *labelAction = self.context[@"labelAction"]; [labelAction callWithArguments:@[@"你好,JS世界!"]]; }

咱們看一下總體的實現效果.

 

尾聲

JavaScriptCore框架的初步試用我的感受仍是挺好的,JavaScriptCore框架上手比較簡單.固然了,對JavaScript還要要有必定理解和基礎的,這樣學習起來更簡單一些.若是有什麼問題歡迎來跟騷棟探討,最後附上本文的實現Demo.

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程