安卓混合开发——Android原生和H5数据交互，详细Demo

Android 与 H5数据交互

一、概述

WebView：显示web页面的视图。作为Android与web互动的桥梁，无疑展示了它的强大。本文主要展示H5与Android进行数据交互的简单案例。效果就不展示了，不会的可以看看，然后自己写出效果来。

二、实现
1.登录（H5发送参数到客户端）。
（1）class MainActivity——客户端

WebView myWebView =null;WebSettings webSettings =null;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    myWebView = (WebView) findViewById(R.id.webView);    webSettings = myWebView.getSettings();    webSettings.setJavaScriptEnabled(true);    myWebView.addJavascriptInterface(this, "Login");    myWebView.setWebChromeClient(new MyWebChromeClient());    myWebView.loadUrl("file:///android_asset/assess.html");}/*这个其实可要可不要，在此并不影响，添加此类后，当H5页面报错时，在Eclipse ADT（或者AS）的LogCat里面输出报错/警告Log*/class MyWebChromeClient extends WebChromeClient {        @Override        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {            result.confirm();//H5页面的弹窗提示            return false;//是否显示弹窗提示        }    }

（2）activity_main.xml(布局文件)

<WebView        android:layout_width="match_parent"       android:layout_height="match_parent"       android:id="@+id/webView"        />

（3）H5页面（assess.html）主要代码，css样式自己写

<script type="text/javascript">   function login(){    var userId = document.getElementById("username").value;    var pwd = document.getElementById("passward").value;    alert("userId"+userId);    Login.loginAccount(userId,pwd); } </script> <div id="userInfo">    <ul>     <li id="user_title"><span>用户名:</span></li>     <li id="user_input"><input type="text" id="username" alt="请输入用户名" placeholder="请输入用户名" /></li>    </ul>    <ul>     <li id="user_title"><span>密&nbsp;&nbsp;&nbsp;&nbsp;码:</span></li>     <li id="user_input"><input type="text" id="passward" alt="请输入密码" placeholder="请输入密码" /></li>    </ul><div id="buttonGroup">    <ul>      <li id="first_btn"><input type="button" value="登录" onclick="login()"/></li>  </ul></div>

2.主页（客户端发送数据到H5页面）
（1）Android客户端代码（class ViewPagerMain）

private WebView myWebView = null;private WebSettings webSettings = null;private Button btn;@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_view_pager_main);    btn = (Button) findViewById(R.id.btn);    myWebView = (WebView) findViewById(R.id.webView1);    webSettings = myWebView.getSettings();    webSettings.setJavaScriptEnabled(true);    myWebView.setWebChromeClient(client);    myWebView.loadUrl("file:///android_asset/mainui.html");    HashMap<String, String> map = null;    ArrayList<HashMap<String, String>> list = new ArrayList<HashMap<String,String>>();    for (int i = 0; i < 3; i++) {            map = new HashMap<String, String>();            map.put("name", "张"+(i+1));            map.put("sex", "男");            map.put("age", 18+i);            map.put("nick", "张老"+(i+1));            map.put("work", (i+1)+"乞丐");            list.add(map);        }        Gson gson = new Gson();        String json = gson.toJson(list);        myWebView.loadUrl("javascript:save('"+json+"')");}WebChromeClient client = new WebChromeClient(){    @Override    public boolean onJsAlert(WebView view, String url, String message,JsResult result) {            result.confirm();            return false;        }    };

（2）布局文件（activity_view_pager_main.xml）

<WebView         android:layout_width="match_parent"        android:layout_height="match_parent"        android:id="@+id/webView1"        />

（3）mainui.html

<script type="text/javascript">        function save(data){            alert(data);            var person = eval('('+data+')');            $.each(person,function(i,v1){                var li1=$("<li>"+v1.name+"</li>");                var li2=$("<li>"+v1.sex+"</li>");                var li3=$("<li>"+v1.age+"</li>");                var li4=$("<li>"+v1.nick+"</li>");                var li5=$("<li>"+v1.work+"</li>");                $("#title2").append(li1).append(li2).append(li3).append(li4).append(li5);            });        } </script> <div id="userInfo">        <ul id="title1">            <li id="user_title"><span>姓名</span></li>            <li id="user_title"><span>性别</span></li>            <li id="user_title"><span>年纪</span></li>            <li id="user_title"><span>昵称</span></li>            <li id="user_title"><span>工作</span></li>        </ul>        <ul id="title2">        </ul>  </div>

作为嵌入网页，不要忘了权限

<uses-permission android:name="android.permission.INTERNET" />

作为混合开发的一种方式，结合强大的H5,,,代码中”$.”是引入Jquery，你还可以做出有非常好视觉体验的App，赶紧试试吧