Js和原生相互調用總結

一、前言

 　　現在市面上有一些app是通過原生ios、Android加載一個網頁實現的，如圖所示，這樣的app我們稱之為 Hybrid App

　　                            

　　　　那么為什么要用 hybrid app呢？ 個人認為的原因有兩點：1.提高開發效率，以釘釘為例在涉及到一些OA操作比如打卡，請假等功能的時候，顯然一個嵌入一個網頁就能夠滿足需求，如果在讓IOS和Android再去各自開發一套那么效率就很低了。2.提高迭代效率。以商城為例，商城頁面會根據市場情況實時發生變化，比如遇到各種節假日活動做促銷。那么這個時候如果用原生，那么迭代等用戶去升級可能這個活動都已經過了，但是用嵌套webview嵌套一個網頁只需要網頁做出修改hybrid app內的web頁面就會馬上修改，這樣效率就非常高了。　　　　 

 　　　　hybrid app 實際上就是利用原生的組件webview加載一個url再讓js和原生相互調用實現各種功能，那么接下來我就把js和原生相互調用的情況做一個總結。

二、原生api實現：js和原生相互調用

　　要想讓js和原生相互調用，對於webview最基本的一個設置就是要允許js腳本執行

 WebSettings settings = mWebView.getSettings();
 settings.setJavaScriptEnabled(true);

（一）、js調用原生

 　　假設我現在有一個需求：點擊web中的一個按鈕，將web中的值傳遞給原生並在TextView組件中顯示出來。那么這個需求怎么實現呢？

　　第一步：在java代碼中定義js要調用的方法

　　// 定義JS需要調用的方法
    // 被JS調用的方法必須加入@JavascriptInterface注解
    @JavascriptInterface
    public void sendMsg(String msg) {
//        Log.i(TAG, "JS調用了Android的hello方法" + msg);
//        Toast.makeText(mContext, "JS調用了Android的hello方法" + msg, Toast.LENGTH_SHORT).show();
        //為了方便拿到上下文和ui組件,寫一個回調接口。
        mJSBridge.sendMsg(msg);
    }

　　這里需要說明的是，1.要在方法上面添加“@JavascriptInterface”注解，2.定義的方法必須是公共方法

　　第二步：給webview添加js腳本接口。

 mWebView.addJavascriptInterface(jsInterface, "Android_Interface");

　　void addJavascriptInterface (Object object, String name)，這個方法有兩個參數，第一個是一個注入webview中js上下文的java對象，第二個參數是在js腳本中來暴露的名稱對象，也就是說，這里寫什么，待會在js調用原生的時候就寫什么。

　　第三步：用js調用原生方法

function sendMsg() {
    Android_Interface.sendMsg("你好,這是要傳遞的參數")
}

　　

　

（二）、原生調用js

　　原生調用js中的方法，例如，在這里我們實現點擊原生中的按鈕來改變web中div的樣式。那么這個該如何實現呢？

　　這里直接使用webview的api就能夠實現。Android中的代碼如下：　 

        // 第一種調用js中代碼的方法
//        mWebView.loadUrl("javascript:beStronger()");
        //第二種調用js中代碼的方法,同時傳值過去
        mWebView.evaluateJavascript("javascript:beStronger('" + str + "')", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                //此處為 js 返回的結果
                Toast.makeText(H5Activity.this, value, Toast.LENGTH_SHORT).show();
            }
        });

　　在web中的代碼如下：

function beStronger(value) {
    let box = document.getElementById("box");
    // box.innerText = value;
    box.className = "box2";
    box.innerText=value;
    return "小明你好"

}

　　當點擊原生按鈕web中的div就會發生變化。

　

（三）、可能存在的安全性問題

　　但是在js調用原生的時候，可能會存在安全問題。具體的產生原因和解決辦法可以參考這一篇文章。《你不知道的 Android WebView 使用漏洞》。那如果要做的app對安全性要求極高，該怎么辦呢？這里推薦一個Android的第三方庫：JSBridge

三、第三方庫實現：js和原生相互調用

　　關於這個第三方庫的介紹，在說明文件中已經說得很清楚了：該庫是js和java相互調用的橋梁，它為js和java之間相互調用提供了一個安全且便捷的方法。

（一）、引入第三方庫

　　第一步是在 app/build.gradle 文件中引入該庫。

 repositories {
        // ...
        maven { url "https://jitpack.io" }
    }
dependencies {
    .....  
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}

　　然后在布局中添加自定義的組件，BridgeWebView，該組件繼承自原生的WebView組件。

 <!-- webview 演示web調用Java -->
    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.github.lzyzsd.jsbridge.BridgeWebView>

（二）、js調用原生

　　這套框架使用的核心就是：handler的注冊的調用。

　　要先實現js調用原生，那么首先要在java原生中“注冊handler”，代碼如下

//注冊handler
webView.registerHandler("submitFromWeb", new BridgeHandler() {
        @Override
        public void handler(String data, CallBackFunction function) {
            Log.i(TAG, "handler = submitFromWeb, data from web = " + data);
            function.onCallBack("submitFromWeb exe, response data from Java");
        }
    });

　　在注冊了handler以后，就可以在js代碼中調用指定的handler了，例如上面我們注冊的handler是“submitFromWeb”，js 可以通過如下的方式調用java中注冊的handler。

 WebViewJavascriptBridge.callHandler(
        'submitFromWeb'
        , {'param': str1}
        , function(responseData) {
            document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData
        }
    );

（三）、原生調用js

 　　要先實現原生調用js，那么首先也要在js中注冊handler

  WebViewJavascriptBridge.registerHandler("functionInJs", function(data, responseCallback) {
        document.getElementById("show").innerHTML = ("data from Java: = " + data);
        var responseData = "Javascript Says Right back aka!";
        responseCallback(responseData);
    });

　　在js中注冊了handler以后，在java代碼中就能夠調用指定名稱的handler　

 webView.callHandler("functionInJs", new Gson().toJson(user), new CallBackFunction() {
        @Override
        public void onCallBack(String data) {

        }
    });

（四）、需要注意的地方

　　這個庫將注冊一個 WebViewJavascriptBridge 對象給window 對象。那么在你的js代碼中，在使用WebViewJavascriptBridge對象之前，你必須檢測WebViewJavascriptBridge對象是否存在。如果WebViewJavascriptBridge對象不存在，你可以監聽WebViewJavascriptBridgeReady事件，如下所示：

　　

  if (window.WebViewJavascriptBridge) {
        //do your work here
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                //do your work here
            },
            false
        );
    }

 

四、One More Thing

　　后面所有的博客demo都會放在github上的BlogDemoWorkSpace中，根據技術棧：Android,Web,java分門別類的放置。如果覺得有需要可以一次性下載下來，選需要學習的地方閱讀就行勒。js和原生相互調用的代碼