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中的回调方法，可传参。

退出登录

完整代码

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：

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

tools:context=".MainActivity">

android:id="@+id/login_layout"

android:layout_width="wrap_content"

android:layout_height="wrap_content">

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"

/>

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"

/>

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"

/>

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"

/>

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"

/>

android:id="@+id/web_view"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:visibility="gone"

/>

index.html:

Home

#user {

font-size: 20px;

color: red

}

function login(userName) {

document.getElementById("user").innerHTML = userName;

}

当前用户为：

退出登录