当前位置:首页 > 安卓源码 > 技术博客 >

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

时间:2018-01-27 12:00 来源:互联网 作者:源码搜藏 浏览: 收藏 挑错 推荐 打印

一、概述 WebView:显示web页面的视图。作为Android与web互动的桥梁,无疑展示了它的强大。本文主要展示H5与Android进行数据交互的简单案例。效果就不展示了,不会的可以看看,然后自己写出效果来。 二、实现 1.登录(H5发送参数到客户端)。 (1)class Mai

一、概述

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

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

WebView myWebView =null;
WebSettings webSettings =null;
@Override
protected 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;//是否显示弹窗提示
        }
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

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

<WebView 
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:id="@+id/webView"
        />
  • 1
  • 2
  • 3
  • 4
  • 5

(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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22

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

private WebView myWebView = null;
private WebSettings webSettings = null;
private Button btn;
@Override
protected 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;
        }
    };
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35

(2)布局文件(activity_view_pager_main.xml)

<WebView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/webView1"
        />
  • 1
  • 2
  • 3
  • 4
  • 5

(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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

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

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

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

Android原生和H5数据交互, 安卓混合开发详细Demo 转载https://www.codesocang.com/appboke/38395.html

技术博客阅读排行

最新文章