摘要：若用實現，則體驗上會相差不少。至此，因為本文中的重點，的實現方案及與交互方案。中的實現方式原理與中原生協議類似，通過攔截形式實現。可以通過自定義協議名稱，然后中攔截這個，并解析其中參數與回調函數，調用方法，并實現回調。

hybird 與h5 app是不一樣的,以前對這兩者理解有所誤解,在實際開發中也并未真正采用hybird,而是使用h5+app外殼實現移動端應用。雖然開發出來的應用實現了無需升級app實現主功能更新，但是交互體驗上較原生相差甚多。
Hybrid App（混合模式移動應用）是指介于web-app、native-app這兩者之間的app，兼具“Native App良好用戶交互體驗的優勢”和“Web App跨平臺開發的優勢”(摘自百度百科)
一般hybird app會將需要動態更新頁面及功能內置到app中,也就是將web頁面預置到本地,android端通過加載本地html頁面實現快速加載,由于不需要經過網絡,速度上會有極大的提升。而需要升級是，則需在服務器上建立對應的資源包，并將服務器資源包與本地html版本做對比，若不一致則從服務器加載資源壓縮包，并下載到本地，從而實現不需要重新安裝app快速升級迭代的目的。此功能適用于需要頻繁更新，又對性能要求較高的場景，例如新聞頭條頁等。若用h5實現，則體驗上會相差不少。

1.通常android與js混合調用的方式是android端定義webView，并設置如下代碼

    WebSettings settings = mWebView.getSettings();

    settings.setJavaScriptEnabled(true);
    //設置本應用加載網頁
   mWebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url)     {
                view.loadUrl(url)
                return true;
            }
        });
       mWebView.loadUrl("***.html");

此處傳入url并開啟訪問網絡權限即可實現打開頁面.AndroidManifest.xml

下面正式開始JS調用android方式
需要建立一個橋,如下

import android.content.Context;
import android.webkit.JavascriptInterface;
import android.widget.Toast;

public class JsInterface {
    private Context mContext;
    public JsInterface(Context context){
        mContext = context;
    }
    //必須加注解,為了安全性考慮,4.2后強制
    @JavascriptInterface
    public void showToast(String params){
        Toast.makeText(mContext,"Hello"+params,Toast.LENGTH_LONG).show();
    }

}


//MainActivity中
        JsInterface jsInterface = new JsInterface(MainActivity.this);
        myWebView.addJavascriptInterface(jsInterface,"bridge");
 //js中,使用如下代碼
    document.getElementById("#btn").addEventListener("click",function(){
        if(window.bridge){
            window.bridge.showToast("from js methods");
        }
    })

此時js可以成功 調用到android中原生方法,但是回調會很麻煩,4.4中有evaluatejavascript可以實現,但是未兼容到4.4以下。至此，因為本文中的重點，hybird的實現方案及js與android交互方案。

原理與android中原生schema協議類似，通過攔截URl形式實現。可以通過自定義協議名稱，然后webView中攔截這個schema，并解析其中參數與回調函數，js調用android方法，并實現回調。
首先定義協議，即需要攔截的scheme ，我在這里定義 myschema://utils,這個協議名可以是任意的，只要攔截統一即可。
封裝的js方法如下

function invoke(action, data, callback) {
        // 拼裝 schema 協議,action對應需要實現的方法名
        var schema = "myshema://utils/" + action

        // 拼接參數 data對應參數 
        schema += "?a=a"
        var key
        for (key in data) {
            if (data.hasOwnProperty(key)) {
                schema += "&" + key +"="+ data[key];
            }
        }

        // 處理 callback
        var callbackName = ""
        if (typeof callback === "string") {
            callbackName = callback
        } else {
            callbackName = action + Date.now()
            window[callbackName] = callback
        }
        schema += "&callback="+callbackName;
        //最終拼接出來應該是zhezhong這種形式 myshema://utils/actioin?a=a&key=value&callback=callbackName
        // 觸發
        var iframe = document.createElement("iframe")
        iframe.style.display = "none"
        iframe.src = schema  // 重要！此處會發送連接,會被webviwe捕獲到
        var body = document.body
        body.appendChild(iframe)
        setTimeout(function () {
            body.removeChild(iframe)
            iframe = null
        })
    }
    

index中

 document.getElementById("btn1").addEventListener("click", function () {
            // invokeScan()
            invoke("showToast",{name:"js"},function(res){
                console.log("回調成功",res)"
            })
            //location.;
        })

android中,將js文件與index文件放置與assets文件夾下,webView加載此index,并設置攔截,代碼如下

 myWebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //重要,此處實現攔截,可解析參數,根據action名稱調用不同方法,此處未演示
                if(url.contains("myshema://utils/")){
                    Toast.makeText(MainActivity.this,"調用成功",Toast.LENGTH_LONG).show();
                    String callback = "";
                    Map params = UriUtil.URLRequest(url);
                    if(params.containsKey("callback")){
                        view.loadUrl("javascript:"+params.get("callback")+"()");
                    }

                }else{
                    view.loadUrl(url);
                }
                return true;
            }
        });
        myWebView.loadUrl("file:///android_asset/index.html");

至此,實現了通過自定義schema實現js攔截調用android原生方法的方案,此方案好處是可以隱藏調用細節,將調用細節封裝到內部,更安全,而且兼容性更好.
若有問題,歡迎提問并與我聯系,轉載請注明作者!