Andorid APP與JS互動
阿新 • • 發佈：2019-01-05
本文展示了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>
總結：本專案本人親測有效。如果您複製粘貼出現異常。請檢查程式碼格式問題。
上面專案用Handler 是一個需要注意的地方。。如果不使用Handler是會報錯的。。注意。