Android中 WebView与Javascript简单交互

从目前市面的大部分App来讲，大致分成Native App、Web App、Hybrid App三种方式，Hybrid App单纯的数据展示我们直接采用WebView来渲染就可以了，但是有时候可能会用到两者之间传递参数的情况，今天就来总结一下两者之间如何互相调用。本篇主要介绍WebView与Javascript的数据交互。

WebView与Javascript交互：

WebView与Javascript交互是双向的数据传递，1.H5网页的JS函数调用Native函数 2.Native函数调用JS函数，具体实现以下面例子为主：

1、mainfest.xml中加入网络权限

2、WebView开启支持JavaScript

 mWebView.getSettings().setJavaScriptEnabled(true);  

3、简单的H5网页实现，主要实现actionFromNative()、actionFromNativeWithParam(String str)，放在assets文件下

    
    


WebView与Javascript交互

    点击调用Native代码




    点击调用Native代码并传递参数



调用打印信息

4、Native实现与JS交互函数：actionFromJs()、actionFromJsWithParam()

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;
    private TextView logTextView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWebView = (WebView) findViewById(R.id.webview);
        // 启用javascript
        mWebView.getSettings().setJavaScriptEnabled(true);
        // 从assets目录下面的加载html
        mWebView.loadUrl("file:///android_asset/test.html");
        mWebView.addJavascriptInterface(this, "test");
        logTextView = (TextView) findViewById(R.id.text);
        Button button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new Button.OnClickListener() {
            public void onClick(View v) {
                // 无参数调用
                mWebView.loadUrl("javascript:actionFromNative()");
                // 传递参数调用
                mWebView.loadUrl("javascript:actionFromNativeWithParam(" + "'come from Native'" + ")");
            }
        });

    }

    @android.webkit.JavascriptInterface
    public void actionFromJs() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "js调用了Native函数", Toast.LENGTH_SHORT).show();
                String text = logTextView.getText() + "\njs调用了Native函数";
                logTextView.setText(text);
            }
        });
    }

    @android.webkit.JavascriptInterface
    public void actionFromJsWithParam(final String str) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Toast.makeText(MainActivity.this, "js调用了Native函数传递参数：" + str, Toast.LENGTH_SHORT).show();
                String text = logTextView.getText() +  "\njs调用了Native函数传递参数：" + str;
                logTextView.setText(text);
            }
        });

    }
}

mWebView.addJavascriptInterface(this, "test");相当于添加一个js回调接。@android.webkit.JavascriptInterface为了解决addJavascriptInterface漏洞的，在4.2以后才有的。

5、布局文件实现

6、代码简单解说

（1）、js（HTML）访问Android（Java）端代码是通过jsObj对象实现的，调用jsObj对象中的函数，如： window.jsObj.actionFromJs()，这里的jsObj就是Native中添加接口的别名
（2）、Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebView.loadUrl("javascript:actionFromNative()");

测试运行截图：

源码测试地址 （https://github.com/kabuqinuofu/MineTest）