现在的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页面安装运行的效果如下：
