iOS、Android與JavaScript交互

Objective-C執(zhí)行JavaScript代碼

相關(guān)方法

//?UIWebView的方法
-?(nullable?NSString?*)stringByEvaluatingJavaScriptFromString:(NSString?*)script;

//?JavaScriptCore中JSContext的方法
-?(JSValue?*)evaluateScript:(NSString?*)script;
-?(JSValue?*)evaluateScript:(NSString?*)script?withSourceURL:(NSURL?*)sourceURL

相關(guān)應(yīng)用

用這些方法去執(zhí)行大段的JavaScript代碼是沒什么必要的，但是有些小場景用起來還是比較順手和實用的，列舉兩個例子作為參考：

//?獲取當(dāng)前頁面的title
NSString?*title?=?[webview?stringByEvaluatingJavaScriptFromString:@"document.title"];

//?獲取當(dāng)前頁面的url
NSString?*url?=?[webview?stringByEvaluatingJavaScriptFromString:@"document.location.href"];

JavaScriptCore

iOS7之后蘋果推出了JavaScriptCore這個框架，從而讓web頁面和本地原生應(yīng)用交互起來非常方便，而且使用此框架可以做到Android那邊和iOS相對統(tǒng)一，web前端寫一套代碼就可以適配客戶端的兩個平臺，從而減少了web前端的工作量。

web前端

在三端交互中，web前端要強勢一些，一切傳值、方法命名都按web前端開發(fā)人員來定義，讓另外兩端去做適配。在這里以調(diào)用攝像頭和分享為例來詳細講解，測試網(wǎng)頁代碼取名為test.html，其代碼內(nèi)容如下：

test.html代碼內(nèi)容(因識別問題，用方括號替換了代碼中的尖括號)

[!DOCTYPE?html]
[html]
[head]
????[meta?charset="UTF-8"]
[/head]
[body]
????[div?style="margin-top:?100px"]
????????[h1>Objective-C和JavaScript交互的那些事[/h1]
????????[input?type="button"?value="CallCamera"?onclick="Toyun.callCamera()"]
????[/div]???????
????[div]
????????[input?type="button"?value="Share"?onclick="callShare()"]
????[/div]
????
[script]
????var?callShare?=?function()?{
????????var?shareInfo?=?JSON.stringify({"title":?"標(biāo)題",?"desc":?"內(nèi)容",?"shareUrl":?"http://www.itdecent.cn/p/f896d73c670a",
????????"shareIco":"http://upload-images.jianshu.io/upload_images/1192353-fd26211d54aea8a9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"});
????????Toyun.share(shareInfo);
????}
????
????var?picCallback?=?function(photos)?{
????????alert(photos);
????}
????
????var?shareCallback?=?function(){
????????alert('success');
????}
[/script]
[/body]
[/html]

test.html代碼解釋

可能有些同學(xué)對web前端的一些知識不太熟悉，稍微對這段代碼做下解釋，先說Toyun是iOS和Android這兩邊在本地要注入的一個對象【參考下面iOS的代碼更容易明白】，充當(dāng)原生應(yīng)用和web頁面之間的一個橋梁。頁面上定義了兩個按鈕名字分別為CallCamera和Share。點擊CallCamera會通過Toyun這個橋梁調(diào)用本地應(yīng)用的方法- (void)callCamera，沒有傳參；而點擊Share會先調(diào)用本文件中的JavaScript方法callShare這里將要分享的內(nèi)容格式轉(zhuǎn)成JSON字符串格式（這樣做是為了適配Android，iOS可以直接接受JSON對象）然后再通過Toyun這個橋梁去調(diào)用原生應(yīng)用的- (void)share:(NSString *)shareInfo方法這個是有傳參的，參數(shù)為shareInfo。而下面的兩個方法為原生方法調(diào)用后的回調(diào)方法，其中picCallback為獲取圖片成功的回調(diào)方法，并且傳回拿到的圖片photos；shareCallback為分享成功的回調(diào)方法。

iOS

iOS這邊根據(jù)前端定義的方法名來寫代碼，但是有些時候web前端會讓我們定義，但是我們定義好之后他又要修改，這時候就會很煩啊。所以碰到三端交互的時候最好就是讓web前端去定義方法名，iOS和Android根據(jù)web前端定義好的去寫代碼。JavaScriptCore中web頁面調(diào)用原生應(yīng)用的方法可以用Delegate或Block兩種方法，此文以按Delegate講解。

JavaScriptCore中類及協(xié)議：

  • JSContext：給JavaScript提供運行的上下文環(huán)境

  • JSValue：JavaScript和Objective-C數(shù)據(jù)和方法的橋梁

  • JSManagedValue：管理數(shù)據(jù)和方法的類

  • JSVirtualMachine：處理線程相關(guān)，使用較少

  • JSExport：這是一個協(xié)議，如果采用協(xié)議的方法交互，自己定義的協(xié)議必須遵守此協(xié)議

    • ViewController中的代碼

    #import?"ViewController.h"
#import?[JavaScriptCore/JavaScriptCore.h](此處為尖括號)

@protocol?JSObjcDelegate?[JSExport](此處為尖括號)

-?(void)callCamera;
-?(void)share:(NSString?*)shareString;

@end

@interface?ViewController?()?[UIWebViewDelegate,?JSObjcDelegate](此處為尖括號)

@property?(nonatomic,?strong)?JSContext?*jsContext;
@property?(weak,?nonatomic)?IBOutlet?UIWebView?*webView;

@end

@implementation?ViewController

#pragma?mark?-?Life?Circle

-?(void)viewDidLoad?{
????[super?viewDidLoad];
????
????NSURL?*url?=?[[NSBundle?mainBundle]?URLForResource:@"test"?withExtension:@"html"];
????[self.webView?loadRequest:[[NSURLRequest?alloc]?initWithURL:url]];
}

#pragma?mark?-?UIWebViewDelegate

-?(void)webViewDidFinishLoad:(UIWebView?*)webView?{
????self.jsContext?=?[webView?valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
????self.jsContext[@"Toyun"]?=?self;
????self.jsContext.exceptionHandler?=?^(JSContext?*context,?JSValue?*exceptionValue)?{
????????context.exception?=?exceptionValue;
????????NSLog(@"異常信息：%@",?exceptionValue);
????};
}

#pragma?mark?-?JSObjcDelegate

-?(void)callCamera?{
????NSLog(@"callCamera");
????//?獲取到照片之后在回調(diào)js的方法picCallback把圖片傳出去
????JSValue?*picCallback?=?self.jsContext[@"picCallback"];
????[picCallback?callWithArguments:@[@"photos"]];
}

-?(void)share:(NSString?*)shareString?{
????NSLog(@"share:%@",?shareString);
????//?分享成功回調(diào)js的方法shareCallback
????JSValue?*shareCallback?=?self.jsContext[@"shareCallback"];
????[shareCallback?callWithArguments:nil];
}

@end

    ViewController中的代碼解釋

    自定義JSObjcDelegate協(xié)議，而且此協(xié)議必須遵守JSExport這個協(xié)議，自定義協(xié)議中的方法就是暴露給web頁面的方法。在webView加載完畢的時候獲取JavaScript運行的上下文環(huán)境，然后再注入橋梁對象名為Toyun，承載的對象為self即為此控制器，控制器遵守此自定義協(xié)議實現(xiàn)協(xié)議中對應(yīng)的方法。在JavaStript調(diào)用完本地應(yīng)用的方法做完相對應(yīng)的事情之后，又回調(diào)了JavaStript中對應(yīng)的方法，從而實現(xiàn)了web頁面和本地應(yīng)用之間的通訊。

    JavaScriptCore使用注意

    JavaStript調(diào)用本地方法是在子線程中執(zhí)行的，這里要根據(jù)實際情況考慮線程之間的切換，而在回調(diào)JavaScript方法的時候最好是在剛開始調(diào)用此方法的線程中去執(zhí)行那段JavaStript方法的代碼，我在實際運用中開始沒注意，就被坑慘了啊。什么，說的太繞，看下面的代碼解釋：

    //??假設(shè)此方法是在子線程中執(zhí)行的，線程名sub-thread
-?(void)callCamera?{?????
????//?這句假設(shè)要在主線程中執(zhí)行，線程名main-thread
????NSLog(@"callCamera");
??????
????//?下面這兩句代碼最好還是要在子線程sub-thread中執(zhí)行啊
????JSValue?*picCallback?=?self.jsContext[@"picCallback"];
????[picCallback?callWithArguments:@[@"photos"]];
}


    攔截協(xié)議

    攔截協(xié)議這個適合一些比較簡單的一些情況，不需要引入什么框架，只需要web前端配合一下就好。但是在具體調(diào)用哪一個方法上，以及在傳值的時候可能會有些不方便，而且調(diào)用完后無法在回調(diào)JavaScript的方法。

    web前端

    test.html中的代碼(因識別問題，用方括號替換了代碼中的尖括號)

    [!DOCTYPE?html]
[html]
[head]
????[meta?charset="UTF-8"]
[/head]
[body]
????[div]
????????[input?type="button"?value="CallCamera"?onclick="callCamera()"]
????[/div]
????
[script]
????function?callCamera()?{
????????window.location.href?=?'toyun://callCamera';
????}
[/script]
[/body]
[/html]

    test.html中的代碼解釋

    這段代碼相比上面的那段測試代碼是很簡單的，同樣有一個按鈕，名字為CallCamera點擊之后調(diào)用自己的callCamera方法，window.location.href這里是改變主窗口的指向從而馬上發(fā)出一個鏈接為Toyun://callCamera請求，而想要傳給原生應(yīng)用的參數(shù)也可已包含到此請求中，而在iOS方法中我們要攔截這個請求，根據(jù)請求內(nèi)容去判斷JavaStript想要做的事情，從而實現(xiàn)web頁面和本地應(yīng)用之間的交互。

    iOS

    iOS對應(yīng)的代碼

    -?(BOOL)webView:(UIWebView?*)webView?shouldStartLoadWithRequest:(NSURLRequest?*)request?navigationType:(UIWebViewNavigationType)navigationType
{
????NSString?*url?=?request.URL.absoluteString;
????if?([url?rangeOfString:@"toyun://"].location?!=?NSNotFound)?{?
????????//?url的協(xié)議頭是Toyun
????????NSLog(@"callCamera");
????????return?NO;
????}
????return?YES;
}

    iOS對應(yīng)的代碼的解釋

    在webView的代理方法中去攔截自定義的協(xié)議Toyun://如果是此協(xié)議則據(jù)此判斷JavaStript想要做的事情，調(diào)用原生應(yīng)用的方法，這些都是提前約定好的，同時阻止此鏈接的跳轉(zhuǎn)。

    總結(jié)

    隨著手機硬件的配置越來越強大和HTML5的興起，一個App完全可以由web頁面來寫?，F(xiàn)在已經(jīng)有部分應(yīng)用這么干了，我是遇見過的，如古詩文網(wǎng)。盡管比較少但是web頁面和本地應(yīng)用的交互不論是iOS還是Android都是會有遇到的。iOS我還是比較推薦JavaScriptCore，這樣三端可以相對統(tǒng)一起來，寫的時候都比較簡單。隨著時間的推移iOS8推出的WKWebView會逐漸成為主流,這個的功能更強大。攔截協(xié)議也只能說用到比較簡單的一些情況吧，復(fù)雜的情況處理相互之間參數(shù)的傳遞還是比較麻煩的，而且這個不能回調(diào)JavaScript的方法，確實喜歡攔截協(xié)議的同學(xué)可以研究WebViewJavaScriptBridge這個第三方庫。對于Android本人也就是略知皮毛而已，就不班門弄斧了，對于一些Android開發(fā)者來說，可以看地第一段的test.html這個頁面的寫法完全是可以適配Android的。

    本人在項目里?做過 ios與H5 交互 用WebViewJavaScriptBridge

    Android 與H5交互 用的就是

    ?與JS交互調(diào)用必須進行下面的設(shè)置

    　　可以通過getSettings()獲得WebSettings，然后用setJavaScriptEnabled()使能JavaScript：

    WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);　　

    ?javascript與android交互

    android端代碼：

    webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JSHook(), "hello"); //在JSHook類里實現(xiàn)javascript想調(diào)用的方法，并將其實例化傳入webview, "hello"這個字串告訴javascript調(diào)用哪個實例的方法

    public class JSHook{
        public void javaMethod(String p){
            Log.d(tag , "JSHook.JavaMethod() called! + "+p);
        }
        
        public void showAndroid(){
            String info = "來自手機內(nèi)的內(nèi)容?。?！";
            webView.loadUrl("javascript:show('"+info+"')");
        }
        
        public String getInfo(){
            return "獲取手機內(nèi)的信息??！";
        }
    }

    html端代碼：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>調(diào)用Android組件測試</title>
<script type="text/javascript">
    function show(info){
        document.getElementById("shows").innerHTML = info;
    }
</script>
</head>

<body>
<b>測試</b>
<br />
<button onClick="window.hello.javaMethod('param')">啟動hello world Activity</button>
<br />
<hr  color="#99FF00"/>
<button onClick="window.hello.showAndroid()">顯示android內(nèi)容</button>
<br />
<textarea id= "shows"  cols="20" rows="10"> 暫無記錄 </textarea>
<br />

</body>
</html>

    最后編輯于 ：
    ?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
    【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
    平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

    相關(guān)閱讀更多精彩內(nèi)容

    • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
      passiontim閱讀 179,045評論 25贊 709
    • 注：此文只現(xiàn)在只推薦需要適配iOS7的同學(xué)讀，如果已經(jīng)扔掉iOS7，強烈建議換用WKWebView。已出WKWeb...
      TIME_for閱讀 34,326評論 116贊 373
    • 最近公司的運營瞎搞了個活動，其活動要服務(wù)端提供數(shù)據(jù)支持，web前端在微信公眾賬號內(nèi)作為主要的運營陣地，而iOS、A...
      Earthliness閱讀 359評論 0贊 0
    • 這幾天在做音樂播放器，需要做下載緩存，所以把下載這個模塊單獨整理出來，希望對大家有所幫助，前面提到過，swift其...
      隔壁家的老田閱讀 1,361評論 0贊 0
    • 2017年2月16日 你我相識于探探 對沒錯就是這么個不靠譜的軟件 說實話右滑你只是因為照片是在武隆拍的 那個地方...
      33兩兩閱讀 364評論 1贊 2

    友情鏈接更多精彩內(nèi)容