现在的App尤其是那些重业务逻辑并且又需要界面美化效果的，都会在程序内进行H5页面跳转，以实现预期的效果。之前总结过一篇关于WebView的文章但是侧重点很多，很难令人理解并留下深刻印象。这里单独总结一下H5页面中通过JavaScript调用Android 暴露出来的java方法代码过程。直接给出示例，讲解过程穿插在示例中：
首先将app的MainActivity对应的布局文件中的组件换成WebView，因为H5页面并填充全屏：
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout>然后新建一个MyObject.class类，在它的内部定义两个方法，并暴露给JavaScript，供其调用：
package com.xw.mywebview; import android.app.AlertDialog; import android.content.Context; import android.webkit.JavascriptInterface; import android.widget.Toast; public class MyObject { private Context mContext; public MyObject(Context context) { mContext = context; } //该方法将暴露给JavaScript脚本调用 @JavascriptInterface public void showToast(String name){ Toast.makeText(mContext,name+"你好！",Toast.LENGTH_SHORT).show(); } @JavascriptInterface public void showList(){ new AlertDialog.Builder(mContext).setTitle("图书列表") .setIcon(R.drawable.ic_launcher_background) .setItems(new String[]{"《天龙八部》","《神雕侠侣》","《明朝那些事儿》","《汉朝那些事儿》","《少年维特之烦恼》"},null) .setPositiveButton("确定",null) .create().show(); } }注意方法上注解@JavaScriptInterface的使用。在MainActivity中将Java对象暴露给JavaScript：
package com.xw.mywebview; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebSettings; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); WebView myWebView = findViewById(R.id.webview); myWebView.loadUrl("file:///android_asset/index.html"); WebSettings webSettings = myWebView.getSettings(); //开启JavaScript调用 webSettings.setJavaScriptEnabled(true); //将MyObject对象暴露给JavaScript，这样index.html页面中的JavaScript可以通过myObj来调用MyObject的方法 myWebView.addJavascriptInterface(new MyObject(this),"myObj"); } }这里需要注意一下loadUrl的地址的写法："file:///android_asset/index.html"
myWebView.loadUrl("file:///android_asset/index.html");这个" file:///android_asset/index.html "对应的目录与res同级，没有这个assets文件夹的话，右键main文件夹-->new-->Folder-->选择Assets Folder即可：
最后，我们再准备这个一个index.html页面，在页面中创建2个H5按钮，第一个按钮点击时调用Android的弹吐司方法，第二个按钮点击调用Android弹窗方法：
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>JavaScript调用Android代码</title> </head> <body> <!--注意此处的myObj是Android暴露出来的对象 --> <input type="button" value="打招呼" onclick="myObj.showToast('齐天大圣孙悟空');"> <input type="button" value="图书列表" onclick="myObj.showList();"> </body> </html>这个H5页面安装运行的效果如下：
