步骤一

基于腾讯第三方TBS的SDK，替换原生的WebView

• 到腾讯TBS的官网下载SDK
• 将下载好的jar包，放到Android项目的libs目录下，添加依赖
  • 在APP下build.gradle文件的dependencies中添加：implementation files('libs/xxx.jar')
• 在Application中做初始化工作

public class MyApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        // 初始化x5内核
        QbSdk.initX5Environment(getApplicationContext(), new QbSdk.PreInitCallback() {
            @Override
            public void onViewInitFinished(boolean arg0) {

            }

            @Override
            public void onCoreInitFinished() {

            }
        });
    }

}

步骤二

自定义WebView（WebView导包要是：import com.tencent.smtt.sdk.WebView;）

public class X5WebView extends WebView {

    private Context mContext;

    public X5WebView(Context context) {
        this(context, null);
    }

    public X5WebView(Context context, AttributeSet attributeSet) {
        this(context, attributeSet, 0);
    }

    public X5WebView(Context context, AttributeSet attributeSet, int i) {
        super(context, attributeSet, i);
        init(context);
    }

    private void init (Context context) {
        this.mContext = context;
        // 基础配置
        initWebViewSettings();
        initWebViewClient();
        initChromeClient();
        /**
         * 构建 JSBridge 对象，这里提供的 JSBridge 字符串会被挂载到网页中的 window 对象下面。
         * window.AndroidJSBridge
         */
        addJavascriptInterface(new MyJaveScriptInterface(mContext, this), "AndroidJSBridge");
    }

    // 对 webview 进行基础配置
    private void initWebViewSettings () {
        WebSettings webSettings = getSettings();
        // 允许加载的网页执行 JavaScript 方法
        webSettings.setJavaScriptEnabled(true);
        // 设置网页不允许缩放
        webSettings.setSupportZoom(false);
        webSettings.setBuiltInZoomControls(false);
        webSettings.setDisplayZoomControls(true);
        // 设置网页缓存方式为不缓存，方便我们的调试
        webSettings.setCacheMode(WebSettings.LOAD_NO_CACHE);
    }

    // 设置 webviewClient ，如果不设置，则会使用系统中的浏览器进行打开网页，而不是在本 APP 中进行打开。
    private void initWebViewClient () {
        setWebViewClient(new WebViewClient() {
        });
    }

    /*
     * andorid和ios可以拦截 alert、confirm、prompt、console.log 这些方法。当js调用这些方法时，并指定格式，andorid和ios重写这些方法，拦截指定格式，再调用原生方法。 
     */
    private void initChromeClient () {
        setWebChromeClient(new WebChromeClient() {
            @Override
            public boolean onJsAlert(WebView webView, String s, String s1, JsResult jsResult) {
                AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
                builder.setMessage(s1);
                builder.setNegativeButton("确定", null);
                builder.create().show();
                jsResult.confirm();
                return true;
            }
        });
    }

}

步骤三

MyJaveScriptInterface

public class MyJaveScriptInterface {

    private Context mContext;
    private X5WebView mWebView;

    public MyJaveScriptInterface(Context context, X5WebView x5WebView) {
        this.mContext = context;
        this.mWebView = x5WebView;
    }

    /**
     * window.AndroidJSBridge.androidTestFunction1('xxxx')
     * 调用该方法，APP 会弹出一个 Alert 对话框，对话框中的内容为 JavaScript 传入的字符串
     * Android 只能接收基本数据类型参数，不能接收引用类型的数据（Object、Array）。
     */
    @JavascriptInterface
    public void androidTestFunction1 (String str) {
        AlertDialog.Builder builder = new AlertDialog.Builder(mContext);
        builder.setMessage(str);
        builder.setNegativeButton("确定", null);
        builder.create().show();
    }

    // 调用该方法，方法会返回一个返回值给 JavaScript 端
    @JavascriptInterface
    public String androidTestFunction2 () {
        return "androidTestFunction2方法的返回值";
    }

}

步骤四

MainActivity

public class MainActivity extends AppCompatActivity {

    private X5WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        init();
    }

    private void init () {
        mWebView = findViewById(R.id.web_view);
        mWebView.loadUrl(Constants.WEB_URL);    // url
    }

    /**
     * 原生端调用 web 方法，方法必须是挂载到 web 端 window 对象下面的方法。
     * 调用 JS 中的方法：onFunction1
     */
    public void onJSFunction1 (View v) {
        mWebView.evaluateJavascript("javascript:onFunction('android调用JS方法')", new ValueCallback<String>() {
            @Override
            public void onReceiveValue(String s) {
                AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);
                builder.setMessage(s);
                builder.setNegativeButton("确定", null);
                builder.create().show();
            }
        });
    }

}

步骤五

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <input type="button" value="js调用android方法1" onclick="onAndroidFunction1('js调用android方法1')">
        <input type="button" value="js调用android方法2" onclick="onAndroidFunction2()">

        <script>
            // 调用 Android 方法
            function onAndroidFunction1 (str) {
                window.AndroidJSBridge.androidTestFunction1(str);
            }

            // 调用 Android 方法
            function onAndroidFunction2 () {
                var result = window.AndroidJSBridge.androidTestFunction2();
                alert(result);
            }

            // Android 调用 onFunction 方法
            window.onFunction = function (str) {
                alert(str);
                return 'onFunction方法已经调用完成';
            }
        </script>
    </body>
</html>