1. 程式人生 > >Hybrid APP之Native和H5頁面交互

Hybrid APP之Native和H5頁面交互

ren bject scrip html中 控件 his 允許 load 互相調用

Hybrid APP之Native和H5頁面交互原理

Hybrid APP的關鍵是原生頁面與H5頁面直接的交互,如下圖,痛過JSBridge,H5頁面可以調用Native的api,Native也可調用H5頁面的方法或者通知H5頁面回調

技術分享圖片

在Hybrid APP中,原生與H5的交互方式在Android和iOS上的實現是有異同的,原因是Android、iOS的通信機制有所區別,下面介紹原生和H5相互調用的方法

NativeH5交互的兩種方式

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

url scheme適用於所有的系統設備(低版本Android和低版本iOS都適用)但是url scheme畢竟是通過url攔截實現的,在大量數據傳輸,以及效率上都有影響

另一種方法則在低版本中會有這樣或那樣的問題。如JavaScriptCore不支持iOS7以下,addJavascriptInterface在4.2以前有風險漏洞

url scheme交互

這個是最廣為流傳的交互方式,起因是因為在hybrid剛出來時,很多低版本都需要兼容,因此幾乎都用的這種

基本原理就是:H5 -> 觸發一個url(每一個功能代表的url都不同)-> Native端捕獲到url -> Native端分析屬於哪一個功能並執行 -> Native端調用H5中的方法將執行結果回調給H5

技術分享圖片

相比於其它方案的優點:Android4.2以下,addJavascriptInterface方式有安全漏掉。OS7以下,JavaScriptCore無法使用

所以如果需要兼容這類型低版本的機型,url scheme方案是不二選擇

H5直接與Native交互

分別包括Android,iOS中H5和原生互相調用,總結如下:

H5調Android—原生通過addJavascriptInterface註冊,然後H5直接調用

首先,原生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—原生通過loadUrl來調用H5,4.4及以上還可以通過evaluateJavascript調用

// 在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—原生通過JavaScriptCore註冊(需ios7以上),然後H5直接調用

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—通過stringByEvaluatingJavaScriptFromString

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

註意:Native調用JS方法時,能拿到JS方法的返回值。有iframe時,需要獲取頂層窗口的引用

Hybrid APP之Native和H5頁面交互