Android和js互相调用的一些初步认识

Android和JS的互相调用

Android 调用JS

权限声明

Android调用JS的话一般通过webview进行。在一开始，我们需要在AndroidMainfest.xml文件中声明一下权限：

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

导入资源文件

在main文件夹下新建assets文件夹，并将html文件放入文件夹中。
在学习开发的时候因为html文件一般数量较少，所以可以直接放在assets文件夹下。

Android组件和设置

在Android中把组件设置好

<?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:padding="10dp"
        android:orientation="vertical">

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

        <Button
            android:id="@+id/tv_androidcalljs"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android调用Js"
            android:gravity="center"
            />

        <Button
            android:id="@+id/tv_androidcalljsargs"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Android调用Js并传参数"
            android:gravity="center"
            />

        <TextView
            android:id="@+id/tv_showmsg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="调用Android显示结果"
            android:textColor="#000"/>
    </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>

JAVA部分

 	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();
    }

其中setWebview()函数是webview初始化函数，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()");
                //这里的loadUrl()括号里面是调用的JS方法
            }
        });
        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");
      //这里的loadUrl()括号内是html文件地址
        webview.addJavascriptInterface(MainActivity.this,"android");
    }

然后声明两个函数提供给JS使用

@JavascriptInterface //Android中的方法如果要让JS调用，需要添加@JavascriptInterface
    public void jsCallAndroid(){
        tvShowmsg.setText("Js调用Android方法");
    }
    @JavascriptInterface
    public void jsCallAndroidArgs(String args){
        tvShowmsg.setText(args);
    }

Android程序如果要调用JS的函数，可以通过两种方法。

webview.loadUrl();
webview.evaluateJavascript()

通过后种方法，我们不光可以实现调用，还可以拿到JS方法实现的返回值。
但是webview.evaluateJavascript()只能在Android4.4及以上的版本使用，所以在没有做系统适配的情况下，还是使用webview.loadUrl()更符合需要一些。

JAVA调用JS的函数

在Java中，可以通过webview.loadUrl()来执行。
在上例的html文件中，有两个方法分别为

JavaCallJs();
JavaCallJsWithArgs(args);

两个函数的功能大致相同，后者比前者多一个传递参数的功能。

实际执行过程

首先，Android通过webview.loadUrl("file:///android_assest/html.html")来打开html文件。
当按钮被点击的时候，根据按钮的不同分别执行不同函数。执行的方法和打开html文件一样：

webview.loadUrl("javascript:JavaCallJs()")
webview.loadUrl("javascript:JavaCallJsWithArgs(args)")

假如我们要传递的args为"Android called Js with args",

webview.loadUrl("javascript:JavaVallJsWithArgs("+'Android called Js with args'+")");

在html文件中的函数如下:

<script type="text/javascript">
            function JavaCallJs(){
                 document.getElementById("showmsg").innerHTML = "Android调用了JS的无参函数";//无参调用
            }
            function JavaCallJsWithArgs(args){
                 document.getElementById("showmsg").innerHTML = (args);//传递参数调用
            }
        </script>

JS调用Android函数

Js调用Android函数相对简单，因为我们在Android的JAVA文件中已经给Js提供了函数，在调用的时候通过

window.android.jsCallAndroid();
window.android.jsCallAndroidArgs("Js传递过来的参数");

即可实现调用Android内的函数。

个人遇到的问题

我在拿成功的案例学习的过程中，始终无法将Java的参数传递到Js，检查多次之后才发现是没有给网络权限。因为之前在看demo和写demo的时候都是只调用了Js本地的方法，所以在做基于实际上线项目的学习时产生了疏漏，因予以注意。