Android与Js相互调用

2018-02-27 本文已影响3人 zhengLH

【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布局】

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" charset="GB2312"/>
  <script type="text/javascript">
     function javacalljs(){
         document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";

         }

      function javacalljswith(arg){
              document.getElementById("showmsg").innerHTML = (arg);
       }

</script>
  </head>
 <body>
 <h3>Web模块</h3>
<h3 id="showmsg">调用js显示结果</h3>
<input type="button" value="Js调用Java代码"      onclick="window.android.jsCallAndroid()"/>
  <input type="button" value="Js调用Java代码并传参数"
    onclick="window.android.jsCallAndroidArgs('Js传过来的参数')"/>
 </body>
 </html>

【xml布局】

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
          xmlns:tools="http://schemas.android.com/tools"
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:orientation="vertical">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:orientation="vertical"
    android:padding="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android模块"
        android:textColor="#000"
        android:textSize="18sp"
        android:textStyle="bold"/>

    <TextView
        android:id="@+id/tv_androidcalljs"
        android:layout_width="170dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/bg_darkorange_round"
        android:gravity="center"
        android:text="Android调用Js"
        android:textColor="@color/colorWhite"/>

    <TextView
        android:id="@+id/tv_androidcalljsargs"
        android:layout_width="170dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:background="@drawable/bg_darkorange_round"
        android:gravity="center"
        android:text="Android调用Js并传参数"
        android:textColor="@color/colorWhite"/>

    <TextView
        android:id="@+id/tv_showmsg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="调用Android显示结果"
        android:textColor="#000"
        android:textSize="20sp"/>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

    <WebView
        android:id="@+id/webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

</LinearLayout>

【方法】 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);
}

}

Android与Js相互调用

猜你喜欢

热点阅读