Android日常開(kāi)發(fā)中烹困，常常會(huì)遇到加載H5頁(yè)面的情況玄妈，于是少不了與H5頁(yè)面的交互問(wèn)題。具體表現(xiàn)在Android調(diào)用H5代碼及H5中調(diào)用Android代碼兩種情況。
測(cè)試頁(yè)面
test.png
這里我們首先編寫(xiě)上圖所示的測(cè)試頁(yè)面拟蜻，在MainActivity中初始化各組件
private void initView() {
mLoginLayout = findViewById(R.id.login_layout);
mUserName = findViewById(R.id.edit_user_name);
mPassword = findViewById(R.id.edit_password);
mWebView = findViewById(R.id.web_view);
}
Android調(diào)用H5
要點(diǎn)：
WebView.loadUrl("javascript:method(" + "'" + param+ "'" + ")");
Android調(diào)用H5時(shí)绎签，首先創(chuàng)建WebView頁(yè)面，初始化完成后酝锅，調(diào)用loadUrl方法辜御，其參數(shù)有固定格式，以“javascript：”開(kāi)頭屈张，表示調(diào)用javasript代碼擒权，后面接在H5中自己定義的method方法，如有參數(shù)須像上面那樣前后再用單引號(hào)括起來(lái)阁谆。
初始化WebView
private void initWebView() {
WebSettings settings = mWebView.getSettings();
// 設(shè)置啟用JavaScript功能
settings.setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient());
mWebView.loadUrl("file:///android_asset/index.html");
}
將已經(jīng)寫(xiě)好的index.html文件放在assets目錄下碳抄，通過(guò)loadUrl方法加載進(jìn)來(lái)。
點(diǎn)擊登錄跳轉(zhuǎn)到H5頁(yè)面场绿，并在H5頁(yè)面中顯示輸入的用戶名剖效。
public void login(View view) {
String userName = mUserName.getText().toString().trim();
String password = mPassword.getText().toString().trim();
login(userName, password);
}
private void login(String userName, String password) {
if(!TextUtils.isEmpty(password) && TextUtils.equals("123456", password)) {
mWebView.loadUrl("javascript:login(" + "'" + userName + "'" + ")");
mWebView.setVisibility(View.VISIBLE);
mLoginLayout.setVisibility(View.GONE);
} else {
Toast.makeText(this, "密碼輸出錯(cuò)誤", Toast.LENGTH_SHORT).show();
}
}
效果如下：
H5.png
H5調(diào)用Android
要點(diǎn)：
Android中：WebView調(diào)用addaddJavascriptInterface方法，JsInterface為H5回調(diào)類焰盗，自定義名稱璧尸，tag與H5中js代碼window后的tag名稱一致即可。JsInterface中回到方法method()記得添加@JavascriptInterface標(biāo)記熬拒。
WebView.addJavascriptInterface(new JsInterface(), tag);
private class JsInterface {
@JavascriptInterface
public void method() {
}
}
H5中：onclick()方法中使用window開(kāi)頭爷光，表示調(diào)用Android方法，tag與前面保持一致澎粟，method為Android中的回調(diào)方法蛀序，可傳參。
<button type="button" onclick="window.tag.method()"/>退出登錄</button>
完整代碼
MainActivity：
public class MainActivity extends AppCompatActivity {
private View mLoginLayout;
private TextView mUserName;
private TextView mPassword;
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initWebView();
}
private void initView() {
mLoginLayout = findViewById(R.id.login_layout);
mUserName = findViewById(R.id.edit_user_name);
mPassword = findViewById(R.id.edit_password);
mWebView = findViewById(R.id.web_view);
}
private void initWebView() {
WebSettings settings = mWebView.getSettings();
// 設(shè)置啟用JavaScript功能
settings.setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient());
mWebView.addJavascriptInterface(new JsLogoutInterface(), "android");
mWebView.loadUrl("file:///android_asset/index.html");
}
public void login(View view) {
String userName = mUserName.getText().toString().trim();
String password = mPassword.getText().toString().trim();
login(userName, password);
}
private void login(String userName, String password) {
if(!TextUtils.isEmpty(password) && TextUtils.equals("123456", password)) {
mWebView.loadUrl("javascript:login(" + "'" + userName + "'" + ")");
mWebView.setVisibility(View.VISIBLE);
mLoginLayout.setVisibility(View.GONE);
} else {
Toast.makeText(this, "密碼輸出錯(cuò)誤", Toast.LENGTH_SHORT).show();
}
}
private class JsLogoutInterface {
@JavascriptInterface
public void logout() {
Toast.makeText(MainActivity.this, "退出成功", Toast.LENGTH_SHORT).show();
runOnUiThread(new Runnable() {
@Override
public void run() {
mWebView.setVisibility(View.GONE);
mLoginLayout.setVisibility(View.VISIBLE);
}
});
}
}
}
布局文件activity_main.xml：
<?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"
android:gravity="center"
tools:context=".MainActivity">
<RelativeLayout
android:id="@+id/login_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="用戶名："
android:textSize="16sp"
android:textColor="@android:color/black"
/>
<EditText
android:id="@+id/edit_user_name"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/user_name"
android:layout_toRightOf="@+id/user_name"
android:layout_marginBottom="-8dp"
/>
<TextView
android:id="@+id/password"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignRight="@+id/user_name"
android:layout_below="@+id/user_name"
android:layout_marginTop="15dp"
android:text="密碼："
android:textSize="16sp"
android:textColor="@android:color/black"
/>
<EditText
android:id="@+id/edit_password"
android:layout_width="80dp"
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/password"
android:layout_toRightOf="@+id/password"
android:layout_marginBottom="-8dp"
/>
<Button
android:id="@+id/login_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/password"
android:layout_marginTop="20dp"
android:layout_marginLeft="30dp"
android:text="登錄"
android:onClick="login"
/>
</RelativeLayout>
<WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:visibility="gone"
/>
</RelativeLayout>
index.html:
<html>
<head>
<title>Home</title>
<meta charset="UTF-8"/>
<style >
#user {
font-size: 20px;
color: red
}
</style>
<script>
function login(userName) {
document.getElementById("user").innerHTML = userName;
}
</script>
</head>
<body>
<p>當(dāng)前用戶為：</p>
<p id="user"></p>
<button type="button" onclick="window.android.logout()"/>退出登錄</button>
</body>
</html>
