Android(安卓)WebView与H5前端JS交互

H5网页图

我们开发过程中，为了工作需要会用到Android与H5混合开发。混合开发就是一部分功能用原生开发，另外一部分原生的功能改为Html 5来开发。单纯的数据展示，我们可以采用WebView来渲染展示，但有时候可能会用到WebView与Javascript数据交互的情况，那么下面我们就来讲解一下两者之间如何互相调用交互的。

Android与JS是通过WebView交互，实际上就是：

Android调用JS代码

JS调用Android代码

前提，网络权限，WebView和webSettings配置，调用setJavaScriptEnabled(true);支持JS脚本

WebView webView = (WebView) findViewById(R.id.webview);  WebSettings webSettings = webView.getSettings();  webSettings.setJavaScriptEnabled(true);  //开启js  ...

1. Android调用JS代码

调用JS无参无返回值方法

android代码：

//加载完页面之后的处理@Overridepublic void onPageFinished(WebView view, String url) {    //网页加载完之后，android调用js方法    webView.loadUrl("javascript:showFromAndroid()");    super.onPageFinished(view, url);}...

js代码：

   ...function showFromAndroid() {            alert("Android调用Js");  }...

调用JS有参无返回值方法

android代码：

//加载完页面之后的处理@Overridepublic void onPageFinished(WebView view, String url) {    //网页加载完之后，android调用js方法    String msg ="展示内容";    webView.loadUrl("javascript:showFromAndroid('"+msg+"')");    super.onPageFinished(view, url);}...

js代码：

   ...function showFromAndroid(param) {         alert("Android调用Js"+param);  }...

调用JS有参有返回值方法

android代码：

@Overridepublic void onPageFinished(WebView view, String url) {    //网页加载完之后，android调用js方法    mWebView.evaluateJavascript（"javascript:showFromAndroid()", new ValueCallback() {        @Override        public void onReceiveValue(String value) {            //此处为 js 返回的结果        }    });}

js代码：

   ...function showFromAndroid(param) {    return "Android调用Js"+param;  }...

2. JS调用Android代码

(1) 定义一个交互的类，@JavascriptInterface注解

public class AndroidForJs {    private Context context;    public AndroidForJs(Context context) {        this.context = context;    }    //api17以后，只有public且添加了 @JavascriptInterface 注解的方法才能被调用    @JavascriptInterface    public void showToast(String toast) {        Toast.makeText(context, "js调用android showToast():" + toast, Toast.LENGTH_SHORT).show();    }}

(2) 注册JavaScriptInterface接口，JS绑定

webView.addJavascriptInterface(new AndroidForJs(this),"AndroidView");

(3) 方法调用，例如：window.AndroidView.show("JS called~");

   ...function showAndroidToast(toast) {    window.AndroidView.showToast(toast);}...

1. Android调用JS代码

2. JS调用Android代码

更多相关文章

随机推荐