Android中与H5的交互

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：

index.html:

    
        
        

        

        
    

    
        
当前用户为：
        

        退出登录