Android与Js相互调用基础篇

随着H5的使用越来越广泛，逐渐替换App原生的页面。有的商城类App甚至1/4或1/3都是用网页做的，所以有的App会有频繁的与网页交互。我曾经有个做Android的同事，项目经理说给一个月的期限不会写H5就走人，可见H5的重要性了。

按照国际惯例贴出github代码

效果请看大屏幕：

image

如上四个按钮操作分别为：

• Android调用Js方法
• Android调用Js方法并传参
• Js调用Android方法
• Js调用Android方法并传参

功能实现步骤：

1. 主界面布局

截取预览图为：

image

2. 在main下创建assets资源文件，并创建html.html文件，项目路径如下图：

image

3. 给Webview写最最简单的html页面，body里面2个按钮,javascript里面有2个插入文本的function

    
        

        

    

    
        
Web模块

        
调用js显示结果

        

        
    

在浏览器中预览一下：

image

image

4. 给WebView加入设置：

        WebSettings webSettings = webview.getSettings();
        //与js交互必须设置
        webSettings.setJavaScriptEnabled(true);
        webview.loadUrl("file:///android_asset/html.html");
        webview.addJavascriptInterface(MainActivity.this,"android");

理解：

• webSettings.setJavaScriptEnabled(true) 表示让WebView支持调用Js；
• webview.loadUrl("file:///android_asset/html.html") 表示加载assets文件下的html.html文件（因为没有网络地址所以加载的本地文件）
• webview.addJavascriptInterface(MainActivity.this,"android") 给webview添加Js调用接口，第一个参数为类对象，第二个参数为自定义别名，Js通过这个别名来调用Java的方法，我这里自定义为android。
  html中用到：

5. Android调用Js代码，javacalljs()为javascript代码中的一个方法。

        tvJs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:javacalljs()");
            }
        });

如上html中代码，向id为showmsg的h3大小标题中写入字符串

function javacalljs(){
                 document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
            }

同理，Android调用Js代并传参数

webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");

6. Js调用Android方法和传参数

点击html按钮，通过onclick="window.android.jsCallAndroid()事件，通过android别名调用Java文件的jsCallAndroid()方法。曾经Js可直接调用Java代码窃取App信息，为安全起见，在Android4.4以上并且必须加入@JavascriptInterface才有响应。

    @JavascriptInterface
    public void jsCallAndroid(){
        tvShowmsg.setText("Js调用Android方法");
    }

    @JavascriptInterface
    public void jsCallAndroidArgs(String args){
        tvShowmsg.setText(args);
    }

MainActivity完整代码：

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private WebView webview;
    private TextView tvJs;
    private TextView tvJsArgs;
    private TextView tvShowmsg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        setWebview();
        initView();
    }

    private void initView() {
        tvJs = (TextView) findViewById(R.id.tv_androidcalljs);
        tvJsArgs = (TextView) findViewById(R.id.tv_androidcalljsargs);
        tvShowmsg = (TextView) findViewById(R.id.tv_showmsg);

        tvJs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:javacalljs()");
            }
        });

        tvJsArgs.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                webview.loadUrl("javascript:javacalljswith(" + "'Android传过来的参数'" + ")");
            }
        });
    }

    private void setWebview() {
        webview = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = webview.getSettings();
        webSettings.setBuiltInZoomControls(true);
        webSettings.setSupportZoom(true);
        //与js交互必须设置
        webSettings.setJavaScriptEnabled(true);
        webview.loadUrl("file:///android_asset/html.html");
        webview.addJavascriptInterface(MainActivity.this,"android");
    }

    @JavascriptInterface
    public void jsCallAndroid(){
        tvShowmsg.setText("Js调用Android方法");
    }

    @JavascriptInterface
    public void jsCallAndroidArgs(String args){
        tvShowmsg.setText(args);
    }
}

打完收工，还不太明白的童鞋可以下载代码来看并运行测试。

转载：Android与Js相互调用基础篇