在上篇各种 JsBridge 调用效率的对比中已经总结出我们应该用什么方式进行WebView 与 JavaScript 的交互了，这篇我们就正式的进入主题，一步步实现完整的 WebView 与 JavaScript 的交互。

Demo动图演示

动图镇楼，演示功能点的顺序是：5-1-2-3-4

此处输入图片的描述

怎么生成我们需要的 HTML 页面？

当我们get了WebView 和 JavaScript交互的技能时，准备跃跃欲试的时候，就会对这个被这个问题搞懵逼了，他娘的我又不是前端，要我立马写个自己想要的HTML页面臣妾真的办不到啊。

w3school 是什么？

是什么？你咋不点进去看看呢？

我们需要的 HTML 页面

按照w3school的简单教程我们就可以拼凑出我们所需要的页面了，如下图。
我们需要的 HTML 页面

我们要实现的5个功能

Android Native 端调用 HTML 中的 javascript 脚本
Android Native 端调用 HTML 中的 javascript 脚本并传递参数
HTML 中的 javascript 脚本调用 Android Native 端的函数
HTML 中的 javascript 脚本调用Android Native 端的函数并传递参数
HTML 中的 javascript 脚本与 Android Native端的 Java 代码完整交互流程

Android Native 端调用 HTML 中的 js 脚本

该例子中Android Native 端的 java 代码会直接调用 HTML 页面中的js 脚本，实现更改 HTML 页面 subtitle 的功能。
Android Native 端的代码为：

mCallJsBtn.setOnClickListener(new View.OnClickListener() {
       @Override
       public void onClick(View v) {
           mCallJsWithArgsBtn.setText("Native调用WebView的有参JS脚本");
           mWebView.loadUrl("javascript:changeDemoSubtitle()");
       }
   });

HTML 对应的 js 方法是：

function changeDemoSubtitle(){
document.getElementById("subtitle").innerHTML="我加了点料";

Android Native 端调用 HTML 中的 js 脚本并传递参数

Android Native 端的代码为：

mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("参数为：" + showDevInfo());
            showDevInfoToH5();
        }
    });
    private String showDevInfo() {
    return "showDevInfo('手机型号:" + android.os.Build.MODEL +
            ",SDK版本:" + android.os.Build.VERSION.SDK +
            ",系统版本:" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
    mWebView.loadUrl("javascript:" + showDevInfo());
}

HTML 对应的 js 方法是：

function showDevInfo(info){
document.getElementById("subtitle").innerHTML=info;

HTML 中的 javascript 脚本调用 Android Native 端的函数

HTML 对应的 js 方法是：

function disp_confirm(){
    confirm();
}

Android Native 端的代码为：

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
            }
            result.confirm();
            return true;
        }
    });

HTML 中的 javascript 脚本调用Android Native 端的函数并传递参数

HTML 对应的 js 方法是：

function disp_confirm_with_args(message){
    confirm(message);
    }

Android Native 端的代码为：

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            Toast.makeText(MainActivity2.this, "Android_Native_Toast!接收到的参数message：" + message, Toast.LENGTH_SHORT).show();
            }
            result.confirm();
            return true;
        }
    });

HTML 中的 javascript 脚本与 Android Native端的 Java 代码完整交互流程

HTML 对应的 js 方法是：

function disp_confirm_with_args(message){
    confirm(message);
    }

Android Native 端的代码为：

mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            if ("getDevInfo".equals(message)) {
                showDevInfoToH5();
            } 
            }
            result.confirm();
            return true;
        }
    });
    private String showDevInfo() {
    return "showDevInfo('手机型号:" + android.os.Build.MODEL +
            ",SDK版本:" + android.os.Build.VERSION.SDK +
            ",系统版本:" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
    mWebView.loadUrl("javascript:" + showDevInfo());
}

Android Native 端代码完整展示：

Activity 代码：

package cn.mtalks.jsbridgedemo;
import android.app.Activity;
import android.os.Bundle;
import android.text.TextUtils;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.Toast;

public class MainActivity2 extends Activity {

private WebView mWebView;
private Button mCallJsBtn;
private Button mCallJsWithArgsBtn;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main_2);
    initView();
    initWebView();
}

private void initView() {
    mWebView = (WebView) findViewById(R.id.webview);
    mCallJsBtn = (Button) findViewById(R.id.call_js_without_args_btn);
    mCallJsWithArgsBtn = (Button) findViewById(R.id.call_js_with_args_btn);

    mCallJsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("Native调用WebView的有参JS脚本");
            mWebView.loadUrl("javascript:changeDemoSubtitle()");
        }
    });

    mCallJsWithArgsBtn.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            mCallJsWithArgsBtn.setText("参数为：" + showDevInfo());
            showDevInfoToH5();
        }
    });
}

private void initWebView() {
    
    mWebView.getSettings().setJavaScriptEnabled(true);
    
    mWebView.loadUrl("file:///android_asset/JsDemo.html");

    mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {
            if ("getDevInfo".equals(message)) {
                showDevInfoToH5();
            } else if (TextUtils.isEmpty(message)) {
                Toast.makeText(MainActivity2.this, "Android_Native_Toast!", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity2.this, "Android_Native_Toast!接收到的参数message：" + message, Toast.LENGTH_SHORT).show();
            }
            
            result.confirm();
            
            return true;
        }
    });
}

private String showDevInfo() {
    return "showDevInfo('手机型号:" + android.os.Build.MODEL +
            ",SDK版本:" + android.os.Build.VERSION.SDK +
            ",系统版本:" + android.os.Build.VERSION.RELEASE + "')";
}

private void showDevInfoToH5() {
        mWebView.loadUrl("javascript:" + showDevInfo());
    }
}

XML 代码

友情提示

其实在JavaScript调用 Java本地方法，谷歌官方的实现方法应该是使用 JavascriptInterface 方式。但是该方式在 Android4.2版本之前存在安全漏洞，感兴趣的看这里。在Android4.2版本之后加入了@JavascriptInterface注解才得以解决，考虑到目前 Android 版本碎片化太严重，使用JavascriptInterface并不适合，这也是上篇文章没把它放入效率对比的原因。

以上就是一个完整的 WebView 与 JavaScript 的交互例子。大家可以自己动手试试上篇文章介绍的ShouldInterceptRequest方式来实现这个例子。

下篇预告

Webview 页面展示优化。除了 HTML 页面自己的优化，在 Android Native 端能为加载速度做些什么优化么？下篇文章会给你答案，比如公共 Js 方法提取放入本地，JS,CSS,图片资源预加载等等。