安卓混合开发——Android原生和H5数据交互，详细Demo
Android 与 H5数据交互
二、实现
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>密 码:</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("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 = ');
$.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，赶紧试试吧
转载自:http://blog.csdn.net/H1101370034/article/details/77162245