利用webView完成混合式开发基本原理

一、看不见的JSBridge

在android及IOS中都有着一个这样的对象，它可以完成JS与OS之间的调用。

JSBridge原理说明图（基于Android）

二、android 调用JS 函数：

原理图：

android 调用JS 函数
代码片段
(remote.html中的js)

    <script>
        function show(info) {
            return "show "+info;
        }
    </script>

android代码

        webView.evaluateJavascript("javascript:show('info')", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String value) {
                Toast.makeText(MainActivity.this,value,Toast.LENGTH_LONG).show();
            }
        });

三、js调用android

原理图

js调用android

代码
android代码

public class MyService {
    @JavascriptInterface
    public String work(String s){
        return "hello "+s;
    }
}

在Activity中的代码片段

//在运行时，会在webView中生成myService对象，并挂载work方法！
webView.addJavascriptInterface(new MyService(),"myService");

javascript代码（remote.html中）

        window.onload=function(){
            document.querySelector("#test").addEventListener("click",function () {
                 var rs=myService.work('john')
                document.querySelector("#rs").innerHTML=rs;
            })
        }