您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • jquery手册
  • 当前位置:首页 > 安卓源码 > 技术博客 >

    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转载http://www.codesocang.com/appboke/38395.html
    标签:网站源码