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

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

1.通常android與js混合調(diào)用的方式是android端定義webView，并設(shè)置如下代碼

    WebSettings settings = mWebView.getSettings();

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

此處傳入url并開啟訪問網(wǎng)絡(luò)權(quán)限即可實現(xiàn)打開頁面.AndroidManifest.xml

下面正式開始JS調(diào)用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可以成功 調(diào)用到android中原生方法,但是回調(diào)會很麻煩,4.4中有evaluatejavascript可以實現(xiàn),但是未兼容到4.4以下。至此，因為本文中的重點，hybird的實現(xiàn)方案及js與android交互方案。

原理與android中原生schema協(xié)議類似，通過攔截URl形式實現(xiàn)?？梢酝ㄟ^自定義協(xié)議名稱，然后webView中攔截這個schema，并解析其中參數(shù)與回調(diào)函數(shù)，js調(diào)用android方法，并實現(xiàn)回調(diào)。
首先定義協(xié)議，即需要攔截的scheme ，我在這里定義 myschema://utils,這個協(xié)議名可以是任意的，只要攔截統(tǒng)一即可。
封裝的js方法如下

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

        // 拼接參數(shù) data對應(yīng)參數(shù) 
        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;
        //最終拼接出來應(yīng)該是zhezhong這種形式 myshema://utils/actioin?a=a&key=value&callback=callbackName
        // 觸發(fā)
        var iframe = document.createElement("iframe")
        iframe.style.display = "none"
        iframe.src = schema  // 重要！此處會發(fā)送連接,會被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("回調(diào)成功",res)"
            })
            //location.;
        })

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

 myWebView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                //重要,此處實現(xiàn)攔截,可解析參數(shù),根據(jù)action名稱調(diào)用不同方法,此處未演示
                if(url.contains("myshema://utils/")){
                    Toast.makeText(MainActivity.this,"調(diào)用成功",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");

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