Android与H5互调

Android与H5互调

WebView基本用法

当然，访问网页需要权限

<uses-permission android:name="android.permission.INTERNET"/>

private void initWebView() {
    //1.加载网页-H5,html,自定义浏览器，直接在webview中播放视频
    WebView webView = new WebView(this);
    WebSettings webSettings = webView.getSettings();
    //设置支持javascript(js)
    webSettings.setJavaScriptEnabled(true);
    //不调用浏览器-自定义浏览器
    webView.setWebViewClient(new WebViewClient());
    //加载网络的网页-本地的网页
    webView.loadUrl("https://blog.csdn.net/Erin_jwx");
    //加载本地的html页面
  //webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");
    setContentView(webView);
}

java调用js

这里用的是本地的html代码

1.要在Moudle的main文件夹下(就是有java和res的文件夹)创建一个assets的目录(directory)，然后将这个html文件复制进去

2.使用上面webview的相关代码。修改url

webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");

这里还没有调用，只是测试本地html的加载

这里用了尚硅谷的进行测试（图片没有加载出来，但是不影响互调

我们想要让登陆账号的名称显示在上图谷粉的位置（网页是登录后加载的）

因为html中已经有了名称替换的实现

function javaCallJs(arg){
		 document.getElementById("content").innerHTML =
	         ("欢迎："+arg );
	}

所以java中调用这个，就可以完成实现想要的功能，这就是java调用H5（调用H5本质上是调用js）

1.在运行时就初始化WebView（即在onCreate方法中调用），但是这个时候还不能setContentView

2.登录时不是调用initWebView了，而是调用重新写login(number)方法，传入的参数就是用户名

3.在login(number)方法中调用js代码，以及setContentView

private void login(String number) {
        webView.loadUrl("javascript:javaCallJs("+ "'"+ number+"'" +")");
        setContentView(webView);
    }

这个时候重新运行，可以看到调用成功！

js调用java

既然叫做互调，那么除了java可以调用js外，js也可以调用java

1.在初始化WebView时添加JavascriptInterface

这个时候参数还不完善

webView.addJavascriptInterface();

2.创建一个类 AndroidAndJsInterface，这里面写的方法是可以被js调用的

在给出的html代码里已经有写调用java的代码

<input type="button" value="点击Android被调用" onclick="window.Android.showToast()" />

它调用的是showToast()，那么我们要有这个方法才能让js调用

所以在这个类里面写上这个方法

class AndroidAndJsInterface{

        @JavascriptInterface
        public void showToast()
        {
            Toast.makeText(JavaAndJsCallActivity.this, "我是Android代码，我被js调用了", Toast.LENGTH_SHORT).show();
        }
    }

注意这个方法上面有一个注解@JavascriptInterface

这是为了解决WebView.addJavascriptInterface接口不起作用而处理的

3.我们第一步的参数还没填好，现在可以填了

一个参数填的是AndroidAndJsInterface类的对象，第二个参数就是方法前面的字段，可以看到html代码里showToast前面有个字段Android，这里的参数一定要和这个字段匹配

webView.addJavascriptInterface(new AndroidAndJsInterface(),"Android");

这样就可以实现js调用java
结果如下

完整代码

public class JavaAndJsCallActivity extends Activity implements View.OnClickListener {

    private EditText etNumber;
    private EditText etPassword;
    private Button btnLogin;
    private WebView webView;

    /**
     * Find the Views in the layout<br />
     * <br />
     * Auto-created on 2021-07-04 10:16:32 by Android Layout Finder
     * (http://www.buzzingandroid.com/tools/android-layout-finder)
     */
    private void findViews() {
        etNumber = (EditText)findViewById( R.id.et_number );
        etPassword = (EditText)findViewById( R.id.et_password );
        btnLogin = (Button)findViewById( R.id.btn_login );

        btnLogin.setOnClickListener( this );
    }

    /**
     * Handle button click events<br />
     * <br />
     * Auto-created on 2021-07-04 10:16:32 by Android Layout Finder
     * (http://www.buzzingandroid.com/tools/android-layout-finder)
     */
    @Override
    public void onClick(View v) {
        if ( v == btnLogin ) {
            // Handle clicks for btnLogin
            String number = etNumber.getText().toString().trim();
            String password = etPassword.getText().toString().trim();
            if(TextUtils.isEmpty(number)||TextUtils.isEmpty(password))
            {
                //账号和密码有空
                Toast.makeText(this,"账号或密码不能为空",Toast.LENGTH_SHORT).show();
            }
            else
            {
                Toast.makeText(this,"登录",Toast.LENGTH_SHORT).show();
                //initWebView();
                login(number);
            }
        }
    }

    private void login(String number) {
        webView.loadUrl("javascript:javaCallJs("+ "'"+ number+"'" +")");
        setContentView(webView);
    }

    private void initWebView() {
        //1.加载网页-H5,html,自定义浏览器，直接在webview中播放视频
        webView = new WebView(this);
        WebSettings webSettings = webView.getSettings();
        //设置支持javascript(js)
        webSettings.setJavaScriptEnabled(true);
        //不调用浏览器-自定义浏览器
        webView.setWebViewClient(new WebViewClient());
        //加载网络的网页-本地的网页
        //webView.loadUrl("https://blog.csdn.net/Erin_jwx");

        //添加JavascriptInterface
        //以后js通过Android字段调用AndroidJsInterface中的任何方法
        webView.addJavascriptInterface(new AndroidAndJsInterface(),"Android");

        //加载本地的html页面
        webView.loadUrl("file:///android_asset/JavaAndJavaScriptCall.html");
        //setContentView(webView);
    }

    class AndroidAndJsInterface{

        @JavascriptInterface
        public void showToast()
        {
            Toast.makeText(JavaAndJsCallActivity.this, "我是Android代码，我被js调用了", Toast.LENGTH_SHORT).show();
        }
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_java_and_js);
        findViews();
        initWebView();
    }

    @Override
    public void onPointerCaptureChanged(boolean hasCapture) {

    }
}

附加

html文件下载地址：
链接：https://pan.baidu.com/s/1AyGHqEMSB0XFCREo5aZ1Ww
提取码：vpq8