【quickhybrid】H5和Native交互原理

前言

Hybrid架構的核心就是JSBridge交互，而實現這個交互的前提是弄清楚H5和Native端的交互

本文主要介紹Native端（Android/iOS）和H5端（泛指前端）的交互原理 （以前也整理過相似的文章，本系列從新梳理）

Native與H5交互的兩種方式

原生和前端的交互有兩種方式：url scheme以及JavaScriptCore（在Android中是addJavascriptInterface）

url scheme適用於全部的系統設備（低版本Android和低版本iOS都適用）

可是url scheme畢竟是經過url攔截實現的，在大量數據傳輸，以及效率上都有影響

另外一種方法則在低版本中會有這樣或那樣的問題

如JavaScriptCore不支持iOS7如下，addJavascriptInterface在4.2之前有風險漏洞

固然了，時至今日，這些低版本形成的影響已經慢慢再也不

url scheme交互

這個是最廣爲流傳的交互方式，原由是由於在hybrid剛出來時，不少低版本都須要兼容，所以幾乎都用的這種

一些概念：

• 通常清空下，url scheme是一種相似於url的連接,是爲了方便app直接互相調用設計的

  • 具體爲,能夠用系統的OpenURI打開一個相似於url的連接(可拼入參數), 而後系統會進行判斷,若是是系統的url scheme,則打開系統應用, 不然找看是否有app註冊這種scheme,打開對應app

  • 須要注意的是,這種scheme必須原生app註冊後纔會生效,如微信的scheme爲(weixin://)

• 而本文中混合開發交互的url scheme則是仿照上述的形式的一種方式

  • 具體爲,由前端頁面經過某種方式觸發scheme(如用iframe.src), 而後Native用某種方法捕獲對應的url觸發事件,而後拿到當前的觸發url, 根據定義好的協議,分析當前觸發了那種方法,而後根據定義來執行等

  • 協議相似於：quickhybrid://xxx

  • 通常這種交互的url沒有必要在原生app配置中註冊

• 注意⚠️： ️iOS10之後，urlscheme必須符合url規範，不然會報錯，

基本原理：

H5 -> 觸發一個url（每個功能表明的url都不一樣）-> Native端捕獲到url

-> Native端分析屬於哪個功能並執行 -> Native端調用H5中的方法將執行結果回調給H5
複製代碼

以下圖：

相比於其它方案的優勢：

• Android4.2如下,addJavascriptInterface方式有安全漏掉

• iOS7如下,JavaScriptCore沒法使用

因此若是須要兼容這類型低版本的機型，url scheme方案是不二選擇

H5直接與Native交互

分別包括Android，iOS中H5和原生互相調用，總結以下：

• H5調Android-原生經過addJavascriptInterface註冊，而後H5直接調用

• Android調H5-原生經過loadUrl來調用H5，4.4及以上還能夠經過evaluateJavascript調用

• H5調iOS-原生經過JavaScriptCore註冊（需ios7以上），而後H5直接調用

• iOS調H5-經過stringByEvaluatingJavaScriptFromString

H5調Android：

首先，原生webview須要先註冊可供前端調用的JS函數

WebSettings webSettings = mWebView.getSettings();  
 // Android容器容許JS腳本，必需要
webSettings.setJavaScriptEnabled(true);
// Android容器設置僑連對象
mWebView.addJavascriptInterface(getJSBridge(), "JSBridge");
複製代碼

// Android4.2版本及以上，本地方法要加上註解@JavascriptInterface，不然會找不到方法。
private Object getJSBridge(){  
    Object insertObj = new Object(){  
        @JavascriptInterface
        public String foo(){  
            return "foo";  
        }  

        @JavascriptInterface
        public String foo2(final String param){  
            return "foo2:" + param;  
        }  

    };  
    return insertObj;  
}
複製代碼

而後H5中便可調用原生中註冊的函數

// 調用方法一
window.JSBridge.foo(); // 返回:'foo'
// 調用方法二
window.JSBridge.foo2('test'); // 返回:'foo2:test'
複製代碼

注意：

• 在Android4.2以上(api17後),暴露的api要加上註解@JavascriptInterface，不然會找不到方法。

• 在api17之前,addJavascriptInterface有風險,hacker能夠經過反編譯獲取Native註冊的Js對象， 而後在頁面經過反射Java的內置靜態類，獲取一些敏感的信息和破壞

Android調H5：

在4.4版本以前

// 即當前webview對象 
mWebView = new WebView(this);       
mWebView.loadUrl("javascript: 方法名('參數,須要轉爲字符串')"); 

// ui線程中運行
runOnUiThread(new Runnable() {  
        @Override  
        public void run() {  
            mWebView.loadUrl("javascript: 方法名('參數,須要轉爲字符串')");  
            Toast.makeText(Activity名.this, "調用方法...", Toast.LENGTH_SHORT).show();  
        }  
});
複製代碼

在4.4及之後（包括）

// 異步執行JS代碼,並獲取返回值 
mWebView.evaluateJavascript("javascript: 方法名('參數,須要轉爲字符串')", new ValueCallback<String>() {
        @Override
        public void onReceiveValue(String value) {
            // 這裏的value即爲對應JS方法的返回值
        }
});
複製代碼

注意：

• 4.4以前Native經過loadUrl來調用JS方法,只能讓某個JS方法執行,可是沒法獲取該方法的返回值

• 4.4及以後,經過evaluateJavascript異步調用JS方法,而且能在onReceiveValue中拿到返回值

• mWebView.loadUrl("javascript: 方法名('參數,須要轉爲字符串')"); 函數需在UI線程運行，由於mWebView爲UI控件(可是有一個壞處是會阻塞UI線程)

H5調iOS：

以OC爲例

首先，須要引入JavaScriptCore庫

#import <JavaScriptCore/JavaScriptCore.h>
複製代碼

而後原生須要註冊API

//webview加載完畢後設置一些js接口
-(void)webViewDidFinishLoad:(UIWebView *)webView{
    [self hideProgress];
    [self setJSInterface];
}

-(void)setJSInterface{

    JSContext *context =[_wv valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    // 註冊名爲foo的api方法
    context[@"foo"] = ^() {

        //獲取參數
        NSArray *args = [JSContext currentArguments];
        NSString *title = [NSString stringWithFormat:@"%@",[args objectAtIndex:0]];
        //作一些本身的邏輯
        //返回一個值 'foo:'+title
        return [NSString stringWithFormat:@"foo:%@", title];
    };
    
}
複製代碼

以後前端就能夠調用了

// 調用方法,用top是確保調用到最頂級,由於iframe要用top才能拿到頂級
window.top.foo('test'); // 返回:'foo:test'
複製代碼

注意：

• 引入官方提供的JavaScriptCore庫(iOS7中出現的)，而後能夠將api綁定到JSContext上 (而後Html中JS默認經過window.top.*（iframe中時需加top）可調用)

• iOS7以前，js沒法直接調用Native,只能經過urlscheme方式間接調用

iOS調H5：

// 能夠取得JS函數執行的返回值
// 方法必須是Html頁面綁定在最頂層的window上對象的
// 如window.top.foo
// Swift
webview.stringByEvaluatingJavaScriptFromString("方法名(參數)")
// OC
[webView stringByEvaluatingJavaScriptFromString:@"方法名(參數);"];
複製代碼

注意：

• Native調用JS方法時,能拿到JS方法的返回值

• 有iframe時，須要獲取頂層窗口的引用

返回根目錄

• 【quickhybrid】如何實現一個Hybrid框架

源碼

github上這個框架的實現

quickhybrid/quickhybrid