H 5とNativeの相互作用案

1、はじめに
アプリには基本的にH 5ページが欠かせませんので、JSとNativeの間の通信は避けられません.最近いくつかの案に留意してまとめてみました.
2、iOSとH 5は通信します
iOSは2種類のwebviewがあり、ios 8以上でWKWebViewが発売されました.ios 8より低いのはUID WebViewです.WKWebViewの性能はUID WebViewより優れています.
2.1、iOS呼び出しH 5
NativeがJavascript言語を呼び出したのは、UnibViewコンポーネントのstrigByEveraluating JavaScript FroomString方法によって実現され、この方法はjsスクリプトの実行結果に戻る.

// Swift
webview.stringByEvaluatingJavaScriptFromString("Math.random()")
// OC
[webView stringByEvaluatingJavaScriptFromString:@"Math.random();"];

双方はJSエンドの関数名とパラメータを約束するだけです.
2.2、H 5呼び出しiOS
JSはNativeを呼び出します.既存のAPIは使用できません.iframeを利用して実現する必要があります.UICWebView内で開始されたすべてのネットワーク要求は、delegate関数によってNative層で通知されることができる.したがって、UICWebView内のすべての要求をハイジャックするだけです.jsbridge://methodName?param1=value1¶m2=value2)そしてUICWebViewのdelegate関数において、jsbridge:/先頭のアドレスが発見されたら、コンテンツのロードを行わずに、該当する呼び出しロジックを実行します.

// JS      
var url = 'jsbridge://doAction?title=    &desc=    &link=http%3A%2F%2Fwww.baidu.com';
var iframe = document.createElement('iframe');
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);
setTimeout(function() {
    iframe.remove();
}, 100);

// OC     
func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
        print("shouldStartLoadWithRequest")
        let url = request.URL
        let scheme = url?.scheme
        let method = url?.host
        let query = url?.query

        if url != nil && scheme == "jsbridge" {
            print("scheme == \(scheme)")
            print("method == \(method)")
            print("query == \(query)")

            switch method! {
                case "getData":
                    self.getData()
                case "putData":
                    self.putData()
                case "gotoWebview":
                    self.gotoWebview()
                case "gotoNative":
                    self.gotoNative()
                case "doAction":
                    self.doAction()
                case "configNative":
                    self.configNative()
                default:
                    print("default")
            }

            return false
        } else {
            return true
        }
    }

3、AndroidはH 5と通信します.
3.1、Android呼び出しH 5
androidではwebviewのloadUrlを使って呼びます.

//   js  JSBridge.trigger  
webView.loadUrl("javascript:JSBridge.trigger('webviewReady')");

3.2、H 5はAndroidを呼び出します.
二つのいい方法があります.

はiOSと同様に、iframe

により、ShuldOverrideUrlLoading方法でurlプロトコルを解析します.

は、webviewページに直接生jsコード方式を注入することにより、addJavascript Interface方法を使用して実現される.Androidでは下記のように実現されています.

class JSInterface {
    @JavascriptInterface //           
    public String getUserData() {
        return "UserData";
    }
}
webView.addJavascriptInterface(new JSInterface(), "AndroidJS");  //window      AndroidJS  

JS端子は直接に呼び出すことができます.alert(Android JS.getsUserData)//UserDate
4、iOSとH 5が通信する他の案
calHandlerとregister Handlerの方式に基づいて、比較的にきれいです.

JS呼び出しNative

        setupWebViewJavascriptBridge(e => {
        e.callHandler("getHttpHeader", {}, function(data) {   //getHttpHeader   ios    
            fn(data);
        })
    })

Native呼び出しJS

setupWebViewJavascriptBridge(e => {
    e.registerHandler("navBarButtonClicked", (data, responseCallback) => { //H5   navBarButtonClicked
        if (data == 'mine') {
            ...
        }
    })
})

//
const setupWebViewJavascriptBridge = e => {
    if (window.WebViewJavascriptBridge)
        return e(WebViewJavascriptBridge);
    if (window.WVJBCallbacks)
        return window.WVJBCallbacks.push(e);
    window.WVJBCallbacks = [e];
    var t = document.createElement("iframe");
    t.style.display = "none";
    t.src = WVJBIframeSrc();
    document.documentElement.appendChild(t);
    setTimeout(function() {
        document.documentElement.removeChild(t)
    }, 0)
};

5、まとめ

iOS調H 5(strigByEveraliating JavaScript FroomString)、H 5調iOS(iframe、schemaプロトコル)

Android調H 5(webView.loadUrl()、H 5調Android(1、iframe;2、addJavascript Interface)

メンテナンス性から見て、H 5端子は全部iOS&Androidをiframe方式で起動したほうがいいです.

実際の操作から見て、H 5端子はNativeと通信するために専門的なjsライブラリを維持する必要があります.Native端はそれぞれH 5端で定義された関数とドッキングする必要があります.

6、参考文書
1、WebとAppデータのインタラクション原理と実現2、WKとJSのそれらのこと3、H 5とNativeのインタラクティブJSBridge技術4、WebViewの運転ガイドの最も完全な実用的な事例