Android和JavaScript交互

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

具体实现

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

参考

  • 官网说明
  • 菜鸟教程

你可能感兴趣的:(android,javascript,交互)