關於Android與JS網頁端的交互,網上有很多教程,剛做這功能,參考了多方資料,最終出來后覺得簡單,但是為實現的話有諸多小問題,最終效果如下:

現在簡單整理一下:(直接貼代碼,注釋詳細,應該能懂的):
一、首先是網頁端,這個就是一些簡單的標簽語言和JS函數:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>H5 And Android</title>
<script>
//定義本地方法 效果提供給Android端調用 被調用后將獲得參數值
function callH5(data){
document.getElementById("result").innerHTML="result success for Android to:"+data;
}
//定義本地點擊事件 效果調用Android方法 傳遞參數給Android客服端
function myOnclick(){
document.getElementById("result").innerHTML="按鈕被點擊了"
//調用android本地方法 調用對象由Android定義實例化,調用方法由Android提供 (具體對象名和方法待定,可變更)
myObj.callAndroid("彈窗顯示回調成功了~~~");
}
</script>
</head>
<body>
<button id="button" onclick="myOnclick()">點擊調用Android方法</button>
<p/>
<div id="result">效果展示</div>
</body>
</html>
該代碼已經放於個人服務器上,提供地址,有需要的童鞋可以直接使用:http://lvyerose.com/h5andAndroid.html
二、接下來就是Android中加載web網頁,並且設置完成交互了,直接上代碼,也有詳細注釋:
1 package com.lvyerose.h5andandroid;
2
3 import android.annotation.SuppressLint;
4 import android.os.Bundle;
5 import android.support.v7.app.AppCompatActivity;
6 import android.support.v7.widget.Toolbar;
7 import android.view.View;
8 import android.webkit.JavascriptInterface;
9 import android.webkit.WebView;
10 import android.widget.Toast;
11
12 public class MainActivity extends AppCompatActivity {
13 private WebView mWebView;
14 public void onCreate(Bundle savedInstanceState) {
15 super.onCreate(savedInstanceState);
16 setContentView(R.layout.activity_main);
17 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
18 setSupportActionBar(toolbar);
19
20 mWebView = (WebView) findViewById(R.id.webView);
21 initWeb();
22
23 }
24
25 @SuppressLint({"JavascriptInterface", "SetJavaScriptEnabled"})
26 void initWeb(){
27 //設置編碼
28 mWebView.getSettings().setDefaultTextEncodingName("utf-8");
29 //支持js
30 mWebView.getSettings().setJavaScriptEnabled(true);
31
32 //設置本地調用對象及其接口
33 //第一個參數為實例化自定義的接口對象 第二個參數為提供給JS端調用使用的對象名
34 mWebView.addJavascriptInterface(new Contact() {
35
36 @JavascriptInterface //必須加的注解
37 @Override
38 public void callAndroid(String phone) {
39 Toast.makeText(MainActivity.this, phone, Toast.LENGTH_LONG).show();
40 }
41 }, "myObj");
42 //載入js
43 mWebView.loadUrl("http://lvyerose.com/h5andAndroid.html");
44
45 findViewById(R.id.button).setOnClickListener(new View.OnClickListener() {
46 @Override
47 public void onClick(View v) {
48 //Android調用Js方法,其中參數 'Android OK !!!' 可傳入變量 效果如下:
49 // mWebView.loadUrl("javascript:callH5('"+str+"')");
50 mWebView.loadUrl("javascript:callH5('Android OK !!!')");
51
52 }
53 });
54 }
55 //定義接口,提供給JS調用
56 interface Contact {
57 @JavascriptInterface
58 void callAndroid(String phone);
59
60 }
61
62
63
64 }
由此2步,即可完成交互效果~~~如有疑問,歡迎FQ~~~
來自蜀漢玫瑰編輯!


