Android和H5交互-基础篇

hybrid App开发也不是什么新鲜事了，其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的？

1、webView加载页面

我们都知道在Android中是通过webView来加载html页面的，根据HTML文件所在的位置不同写法也不同：

//例如：加载assets文件夹下的test.html页面

mWebView.loadUrl("file:///android_asset/test.html")

//例如：加载网页

mWebView.loadUrl("http://www.baidu.com")

如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时，页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话，那么就得设置setWebViewClient：

mWebView.setWebViewClient(new WebViewClient() {

        @Override

        public boolean shouldOverrideUrlLoading(WebView view, String url) {

                mWebView.loadUrl(url);

                return true;

            }

        }

    });

2、Android本地通过Java调用HTML页面中的JavaScript方法

想要调用js方法那么就必须让webView支持

    WebSettings webSettings = mWebView.getSettings();

    //设置为可调用js方法

    webSettings.setJavaScriptEnabled(true);

若调用的js方法没有返回值，则直接可以调用mWebView.loadUrl("javascript:do()");其中do是js中的方法；若有返回值时我们可以调用mWebView.evaluateJavascript()方法：

 mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {

        @Override

        public void onReceiveValue(String value) {

            Log.e(TAG, "onReceiveValue value=" + value);

        }

    });

js代码如下：

<script type="text/javascript">

    function sum(a,b){

    return a+b;

    }

    function do(){

    document.getElementById("p").innerHTML="hello world";

    }

</script>

2、js调用Android本地Java方法

在Android4.2以上可以直接使用@JavascriptInterface注解来声明，下面是在一个本地Java方法

 public class JsInteration {

    @JavascriptInterface

    public String back() {

        return "hello world";

    }

}

定义完这个方法后再调用mWebView.addJavascriptInterface()方法：

 mWebView.addJavascriptInterface(new JsInteration(), "android");

那么在js中怎么来调用呢？

<script type="text/javascript">

     function s(){

     //调用Java的back()方法

    var result =window.android.back();

    document.getElementById("p").innerHTML=result;

    }

</script>

4、拦截HTML页面中的点击事件

mWebView.setWebViewClient(new WebViewClient() {

        @Override

        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            //判断url拦截事件

            if (url.equals("file:///android_asset/test2.html")) {

                Log.e(TAG, "shouldOverrideUrlLoading: " + url);

                startActivity(new Intent(MainActivity.this,Main2Activity.class));

                return true;

            } else {

                mWebView.loadUrl(url);

                return false;

            }

        }

    });

以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码：

mainActivity

public class MainActivity extends AppCompatActivity {

public static final String TAG = "MainActivity";

private WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    setContentView(R.layout.activity_main);

    mWebView = (WebView) findViewById(R.id.webView);

    mWebView.loadUrl("file:///android_asset/test.html");

    WebSettings webSettings = mWebView.getSettings();

    webSettings.setJavaScriptEnabled(true);

    mWebView.addJavascriptInterface(new JsInteration(), "android");

    mWebView.setWebViewClient(new WebViewClient() {

        @Override

        public boolean shouldOverrideUrlLoading(WebView view, String url) {

            if (url.equals("file:///android_asset/test2.html")) {

                Log.e(TAG, "shouldOverrideUrlLoading: " + url);

                startActivity(new Intent(MainActivity.this,Main2Activity.class));

                return true;

            } else {

                mWebView.loadUrl(url);

                return false;

            }

        }

    });

}

//Android调用有返回值js方法

@TargetApi(Build.VERSION_CODES.KITKAT)

public void onClick(View v) {

    mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {

        @Override

        public void onReceiveValue(String value) {

            Log.e(TAG, "onReceiveValue value=" + value);

        }

    });

}

public class JsInteration {

    @JavascriptInterface

    public String back() {

        return "hello world";

    }

}

}

test.html

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript">

    function sum(a,b){

    return a+b;

    }

     function s(){

    var result =window.android.back();

    document.getElementById("p").innerHTML=result;

    }

    </script>

</head>

<body>

<button onclick="s()">调用本地方法</button>

<a href="file:///android_asset/test2.html">点击</a>

<p id="p"></p>

</body>

</html>

作者：YouJZ
链接：http://www.jianshu.com/p/a25907862523
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。