本文展示了Android APP与js交互的代码,大部分来源于网路。DEMO地址:https://download.csdn.net/download/a872822645/10892939
首先是js界面:
<!DOCTYPE html> <html lang="en"> <head> <meta content="text/html" charset="UTF-8" http-equiv="content-type"> <title>这里是一个H5页面</title> </head> <body> <p id="ptext" >点击按键0 执行android中的 public void click0(){} 方法</p> <Button id="buttonId0" class="buttonClass" onclick="showinfo()">按键0</Button> <p>点击按键1 执行android中的 public void click0(String data1,String data2){}方法</p> <Button id="buttonId1" class="buttonClass" onclick="javascript:android.click0('参数1','参数2')">按键1</Button> <script> function setRed(){ //这个方法设置 id 为 ptext 的元素的背景色为红色 var a = document.getElementById('ptext'); a.style.backgroundColor="#F00"; } function setColor(color,text){ //这个方法设置 id 为 ptext 的元素的背景色为指定颜色 //设置 id 为 ptext 的元素的内容为text var a = document.getElementById('ptext'); a.style.backgroundColor=color; a.innerHTML = text; } function showinfo() { console.log("孙磊"); android.click0(); } </script> </body> </html>
然后是:Andorid 界面
Activity:
package com.picc.greendao; import android.app.Activity; import android.os.Bundle; import android.os.Handler; import android.support.annotation.Nullable; import android.util.Log; import android.view.View; import android.webkit.JavascriptInterface; import android.webkit.WebSettings; import android.webkit.WebView; import android.widget.Button; import android.widget.Toast; /** * <p>create by sunlei on 2019/1/3 * <p>[email protected] * <p>Describe : */ public class HtmlDemoActivity extends Activity implements View.OnClickListener { private WebView webView; private Button redButton, colorButton; Handler myHandler; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_html); webView = (WebView) findViewById(R.id.webview); redButton = (Button) findViewById(R.id.red); myHandler=new Handler(); colorButton = (Button) findViewById(R.id.color); redButton.setOnClickListener(this); colorButton.setOnClickListener(this); initWebView(); webView.loadUrl("file:///android_asset/mutual.html");//加载assets文件中的H5页面 } @Override public void onClick(View v) { switch (v.getId()) { case R.id.red: webView.loadUrl("javascript:setRed()"); break; case R.id.color: webView.loadUrl("javascript:setColor('#00f','这是android 原生调用JS代码的触发事件')"); break; } } private void initWebView() { WebSettings settings = webView.getSettings(); settings.setJavaScriptEnabled(true);//设置运行使用JS ButtonClick click = new ButtonClick(); //这里添加JS的交互事件,这样H5就可以调用原生的代码 webView.addJavascriptInterface(click, "android"); } public class ButtonClick { @JavascriptInterface public void click0() { show("title", ""); } @JavascriptInterface public void click0(String data1, String data2) { show(data1, data2); } private void show(final String title, String data) { Toast.makeText(getApplication(),"测试",Toast.LENGTH_LONG).show(); Log.d("result","sunlei1"); myHandler.post(new Runnable() { @Override public void run() { redButton.setText(title); } }); Log.d("result","sunlei2"); } } }
xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" xmlns:android="http://schemas.android.com/apk/res/android"> <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent"> </WebView> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_alignParentBottom="true" > <Button android:id="@+id/red" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="1" android:text="背景变成红色"/> <Button android:id="@+id/color" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_weight="1" android:text="背景色可以自定义"/> </LinearLayout> </RelativeLayout>