Android日常开发中，常常会遇到加载H5页面的情况，于是少不了与H5页面的交互问题。具体表现在Android调用H5代码及H5中调用Android代码两种情况。
测试页面
test.png
这里我们首先编写上图所示的测试页面，在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调用H5
要点：
WebView.loadUrl("javascript:method(" + "'" + param+ "'" + ")");
Android调用H5时，首先创建WebView页面，初始化完成后，调用loadUrl方法，其参数有固定格式，以“javascript：”开头，表示调用javasript代码，后面接在H5中自己定义的method方法，如有参数须像上面那样前后再用单引号括起来。
初始化WebView
private void initWebView() {
WebSettings settings = mWebView.getSettings();
// 设置启用JavaScript功能
settings.setJavaScriptEnabled(true);
mWebView.setWebViewClient(new WebViewClient());
mWebView.loadUrl("file:///android_asset/index.html");
}
将已经写好的index.html文件放在assets目录下，通过loadUrl方法加载进来。
点击登录跳转到H5页面，并在H5页面中显示输入的用户名。
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, "密码输出错误", Toast.LENGTH_SHORT).show();
}
}
效果如下：
H5.png
H5调用Android
要点：
Android中：WebView调用addaddJavascriptInterface方法，JsInterface为H5回调类，自定义名称，tag与H5中js代码window后的tag名称一致即可。JsInterface中回到方法method()记得添加@JavascriptInterface标记。
WebView.addJavascriptInterface(new JsInterface(), tag);
private class JsInterface {
@JavascriptInterface
public void method() {
}
}
H5中：onclick()方法中使用window开头，表示调用Android方法，tag与前面保持一致，method为Android中的回调方法，可传参。
<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();
// 设置启用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, "密码输出错误", 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>当前用户为：</p>
<p id="user"></p>
<button type="button" onclick="window.android.logout()"/>退出登录</button>
</body>
</html>
