現在的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頁面安裝運行的效果如下：
