Android和JavaScript交互

Android和JavaScript交互，属于Android使用HTML5移动端开发 (HTML5+CSS+JS)的内容。最终效果如下，点击（JS代码中定义的）Say hello界面按键 ，可以调用（Java中定义的）具体Java方法 实现效果。

具体实现

Android中 Java调用JavaScript总共用到4个文件：首先添加前2个最基础的交互工具，其中JS代码定义上述的Say hello界面按键 ，交互代码定义含具体交互方法 的实现类。

• JS代码(demo.html)
• 交互代码(WebAppInterface.java)

然后是进行交互的实现，利用布局添加WebView控件，利用MainActivity进行控制测试。

• 布局(.xml)
• MainActivity.java

1. JS代码: demo.html(位置: src/main/assets/demo.html(如果没有assets则新创1个))

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">
        function showAndroidToast(toast) {
            XX.showToast(toast);// XX的方法
        }
    </script>

2. 交互: WebAppInterface.java(位置: src/main/java/包名/WebAppInterface)

• 定义方法，方法上需要添加注释@JavascriptInterface !

public class WebAppInterface {
    Context mContext;

    /** Instantiate the interface and set the context */
    WebAppInterface(Context c) {
        mContext = c;
    }

    /** Show a toast from the web page */
    @JavascriptInterface
    public void showToast(String toast) {
        Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
    }
}

3. 布局: activity_main.xml(位置: res/layout/activity_main)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp" />
LinearLayout>

4.MainActivity.java

public class MainActivity extends AppCompatActivity {
    private WebView webView;

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

        init();//初始化WebView控件

        test();//控件和JS交互实验
    }

    private void init(){
        webView= (WebView) findViewById(R.id.webView);//控件
    }

    private void test(){
        webView.loadUrl("file:///android_asset/demo.html");
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);//设置WebView允许调用js
        webView.addJavascriptInterface(new WebAppInterface(this), "XX");//将WebAppInterface作为"XX", 传入到JavaScript中的XX中
    }
}

参考

• 官网说明
• 菜鸟教程