最近北京好冷呀！冻到哭泣。
最近正在做Android原生与h5界面交互的工作。记录一下学习的收获。
首先Android原生与js互相调用是在webview中完成的，在webview中可以加载html网页，但是根据html的位置不同加载方式也不太相同。

webview加载网页

加载网络上的网页

webView.loadUrl("https://www.baidu.com/");

注意：在使用的时候一定要加上网络权限

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

效果如下：

示例图片

加载本地的资源文件中的网页，也就是asset目录下的本地资源

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

示例图片

这样就可以将网页加载出来。
在初始化webview的时候还要设置一些属性才可以使Android原生和Js相互调用

WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);

只有设置这条属相为true，Android原生和JS才可以相互调用。

JS调用Android原生方法

先介绍一下h5网页中js语句调用Android原声的方法，在进行开发之前Android开发人员一定要和h5开发人员约定好互相调用的方法的名字，以及别名是什么。
这里我在h5网页中写了两个调用的方法

 <input type="button" value="Js调用Java代码" onclick="window.android.jsCallAndroid()"/>
 <input type="button" value="Js调用Java代码并传参数" onclick="window.android.jsCallAndroidArgs('Js传过来的参数')"/>

这里我定义了两个button，并通过window.android.方法名，来调用Android中的方法，其中android就是我定义的别名。
我需要的Android代码中也要设置别名

webView.addJavascriptInterface(new JsInterface(),"android");

其中JsInterface()是在Android中定义的一个内部类，“android”是和h5约定的别名。

public class JsInterface {
    
    @JavascriptInterface
    public void jsCallAndroid() {
       textView.setText("没有参数的js方法");
    }
    @JavascriptInterface
    public void jsCallAndroidArgs(String args) {
        textView.setText(args);
    }
}

点击h5中的button就可以调用这些方法，其中 @JavascriptInterface必须在每个方法的上面加上，否则无法调用方法。
h5中通过window.android.jsCallAndroid()，来调用无参数的方法，通过window.android.jsCallAndroidArgs('Js传过来的参数')，调用有参数的方法。调用后改变textview中的值。
当点击了一个按钮时，TextView中的值改变：

示例图片

当点击了第二个按钮时，TextView的值改变：

示例图片
这样就完成了h5的方法调用Android原生方法。

Android原生调用H5方法

先看一下H5中的方法

<script type="text/javascript">
        function javacalljs(){
             document.getElementById("showmsg").innerHTML = "JAVA调用了JS的无参函数";
         }

        function javacalljswith(arg){
             document.getElementById("showmsg").innerHTML = (arg);
        }
</script>

方法的作用很明确，通过这个方法来改变id为“showmsg”的值。并且第一个方法没有参数，第二个方法有参数。
在Android原生中的调用：

button.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //通过此方式来调用无参方法
            webView.loadUrl("javascript:javacalljs()");
        }
    });
button1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //通过此方式来调用有参方法
            webView.loadUrl("javascript:javacalljswith('啦啦啦啦')");
        }
    });

代码就很简单了,直接调用就可以了。

webView.loadUrl("javascript:方法名(参数))");

当点击了“点击我一下”后，h5中的内容发生改变

示例图片

当点击了“点第二个”按钮的时候

示例图片
ok，这里在webview里Android和h5交互就完成了，贴一下完整代码

public class MainActivity extends AppCompatActivity {
     private WebView webView;
     private Button button,button1;
     private TextView textView;

    @SuppressLint("JavascriptInterface")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        button = findViewById(R.id.button);
        button1 = findViewById(R.id.button1);
        textView = findViewById(R.id.text);
        WebSettings settings = webView.getSettings();
        settings.setJavaScriptEnabled(true);
        webView.loadUrl("file:///android_asset/test.html");
        //webView.loadUrl("https://www.jianshu.com/u/2021d79d4a28");
        button.setOnClickListener(new View.OnClickListener() {
            @Override
             public void onClick(View v) {
                webView.loadUrl("javascript:javacalljs()");
             }
        });
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
               webView.loadUrl("javascript:javacalljswith('啦啦啦啦')");
            }
       });
        webView.addJavascriptInterface(new JsInterface(),"android");
    }


   public class JsInterface {

       @JavascriptInterface
       public void jsCallAndroid() {
          textView.setText("没有参数的js方法");
       }
       @JavascriptInterface
       public void jsCallAndroidArgs(String args) {
          textView.setText(args);
      }
  }
}

布局文件：

<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"
   tools:context=".MainActivity"
   android:orientation="vertical">

   <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="0.5">
    </WebView>
    <TextView
         android:id="@+id/text"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_weight="1"
         android:text="测试"/>
   <RelativeLayout
        android:id="@+id/relayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1">
       <Button
           android:id="@+id/button"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="点击我一下"/>

      <Button
           android:id="@+id/button1"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_alignParentTop="true"
           android:layout_toEndOf="@+id/button"
           android:layout_toRightOf="@+id/button"
           android:text="点第二个"/>

   </RelativeLayout>

</LinearLayout>

h5代码：

<html>
  <head>
     <meta http-equiv="Content-Type" content="text/html" charset="utf-8" />

       <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>

打完收工！