【quickhybrid】H5和Native互動原理

dailc發表於2017-12-25
UIH5

前言

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
複製程式碼

如下圖：

【quickhybrid】H5和Native互動原理

相比於其它方案的優點：

  • 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時，需要獲取頂層視窗的引用

返回根目錄

原始碼

github上這個框架的實現

quickhybrid/quickhybrid

相關文章