Android与Js相互调用

【1】 android 与 js 调用的配置

   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添加Js调用接口 (看 js:方法调用)
    webview.addJavascriptInterface(AndroidJSCallActivity.this, "android");

【情景1】Android 调用JS

 (1)  Android调用Js方法
 (2)  Android调用Js方法并传参

【html布局】

  
  
  
  
 
 
Web模块
调用js显示结果

  
 
 

【xml布局】

【方法】 webview.loadUrl( " javascript: xxx（）" ); // xxx() 为js中某一个方法）

【核心代码】

    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传过来的参数'" + ")");
        }
    });

【情景2】JS调用Android

（1） Js调用Android方法
（2） Js调用Android方法并传参

【方法】（A）自定义别名，Js通过这个别名来调用Java的方法，我这里自定义为android。

图片1.png

（B）在android 代码中提供供js调用的方法：（注意：需要添加注解）

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

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

（C）方法调用

图片2.png

【完整代码】

public class AndroidJSCallActivity extends AppCompatActivity {

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

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

    setWebview();
    initView();
}

private void initView() {

    tvJs = (TextView) findViewById(R.id.tv_androidcalljs);   // Android调用Js
    tvJsArgs = (TextView) findViewById(R.id.tv_androidcalljsargs);  //  Android调用Js并传参数
    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添加Js调用接口 (看 js:方法调用)
    webview.addJavascriptInterface(AndroidJSCallActivity.this, "android");

}

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

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

}