摘要：若用實(shí)現(xiàn)，則體驗(yàn)上會(huì)相差不少。至此，因?yàn)楸疚闹械闹攸c(diǎn)，的實(shí)現(xiàn)方案及與交互方案。中的實(shí)現(xiàn)方式原理與中原生協(xié)議類(lèi)似，通過(guò)攔截形式實(shí)現(xiàn)?？梢酝ㄟ^(guò)自定義協(xié)議名稱(chēng)，然后中攔截這個(gè)，并解析其中參數(shù)與回調(diào)函數(shù)，調(diào)用方法，并實(shí)現(xiàn)回調(diào)。

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

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

    WebSettings settings = mWebView.getSettings();

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

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

下面正式開(kāi)始JS調(diào)用android方式
需要建立一個(gè)橋,如下

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后強(qiáng)制
    @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");
        }
    })

此時(shí)js可以成功 調(diào)用到android中原生方法,但是回調(diào)會(huì)很麻煩,4.4中有evaluatejavascript可以實(shí)現(xiàn),但是未兼容到4.4以下。至此，因?yàn)楸疚闹械闹攸c(diǎn)，hybird的實(shí)現(xiàn)方案及js與android交互方案。

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

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

        // 拼接參數(shù) data對(duì)應(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;
        //最終拼接出來(lái)應(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  // 重要！此處會(huì)發(fā)送連接,會(huì)被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) {
                //重要,此處實(shí)現(xiàn)攔截,可解析參數(shù),根據(jù)action名稱(chēng)調(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");

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