Android中WebView使用html，且实现android和JS的互相调用

本文原创，转载注明出处JUSTYiSheng

1、创建html文件

       创建文件很简单，用基本的文本编辑器保存成.html格式即可

        web.html文件如下

以下为html内容

显示一条文本

分析：内容很简单，两个JS方法，供原生调用。两个按钮，调用原生的方法。分别对应有参调用、无参调用，看代码即可理解

2、创建安卓工程

    创建一个最简单的安卓工程，一个活动，布局中有两个按钮和webview即可

MainActivity.java

package com.example.zyy.androidtohtml;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;

/**
 * Created by zyy on 2018/2/27.
 */
public class MainActivity extends Activity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = (WebView) findViewById(R.id.webview);
        // 启用javascript
        webView.getSettings().setJavaScriptEnabled(true);
        webView.setWebViewClient(new WebViewClient());
        webView.setWebChromeClient(new WebChromeClient());
        // 从assets目录下面的加载html
        webView.loadUrl("file:///android_asset/web.html");
        webView.addJavascriptInterface(MainActivity.this, "java");//name:android在网页里面可以用window.name.方法名调用java方法


        //Button1按钮 无参调用HTML js方法
        findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 无参数调用 JS的方法
                    webView.loadUrl("javascript:javaToJS()");

            }
        });
        //Button2按钮 有参调用HTML js方法
        findViewById(R.id.button2).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 传递参数调用JS的方法，点击后调用document.location=arg切换网页
                webView.loadUrl("javascript:javaToJsWith(" + "'https://baike.so.com/doc/456230-483111.html'" + ")");
            }
        });


    }

    //由于安全原因 targetSdkVersion>=17需要加 @JavascriptInterface
    //JS调用java，且无参
    @JavascriptInterface
    public void noParameterFunction() {

        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Button button = (Button) findViewById(R.id.button2);
                button.setText("JS->android 无参成功");
            }
        });
    }

    //JS调用java，且传参
    @JavascriptInterface
    public void parameterFunction(final String parameter) {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                Button button = (Button) findViewById(R.id.button2);
                button.setText(parameter);
            }
        });
    }
}

对应的activity_main.xml布局文件

3、将web.html放进assets文件下

4、demo运行情况

    基本界面：

点击  调用JS后：

点击  调用有参JS后：

点击网页的两个按钮图就不贴了，效果是点击网页按钮后，原生按钮text会改变

5、注意事项

    android中

webView.addJavascriptInterface(MainActivity.this, "java");

    网页中

    android中“java”对应JS中的window.java调用原生方法，这两个地方一定要相同，不然调用失败

附demo下载地址：点击打开链接

如果对开发有些基础的，看文章完全足够，不用浪费积分下载，哈哈
转载请注明出处，如有疑问可以留言