混合开发之webView加载html,android 和 html之间进行数据交互

来源：互联网发布：网络摄像头用户名密码编辑：程序博客网时间：2024/06/04 23:23

现在混合开发比较普遍了，其实早就该学学了，只限于自己对html不是很熟，搭的界面太丑了，哈哈…

今天写Demo的需求是这样的
1、在一个界面里，半面html,半面android原生控件。
2、点击html发送html的数据给android ，android原生控件接收并显示。
3、点击原生控件，html接收并显示.

界面是这样的这里写图片描述

半边html 半边android 原生控件，进行数据交互

我的html是自己写的，很丑别介意

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <script type="text/javascript"  src="js/jQuery.js"></script>    <title>这是一个网页 </title></head>    <input id="input"  />    <br/>    <button id = "button1" type="button" onclick="WebToAndroid()"> （这是html按钮）传递给android </button>    <br/>    <br/>    <br/>    <br/>    获取从android 传递过来的值为:    <br/>    <br/>    <label id = "label"/><body></body></html>

JS中有两个方法

// JavaScript Document（点击html控件时，向android 传递数据的方法）function WebToAndroid() {    var ss = document.getElementById("input").value;    demo.toAndroid(ss)}//接收android传递的数据，并显示在html上function AndroidToWeb(str){    document.getElementById("label").innerHTML = str;}

下面的代码
android中通过这句代码和html进行交互
主要是将html的关键字绑定android的一个方法，
之后接收html的传递数据，并显示出来

@SuppressLint("AddJavascriptInterface")    private void initData() {        webView.getSettings().setJavaScriptEnabled(true);//设置支持js        webView.requestFocus();        webView.setScrollBarStyle(SCROLLBARS_OUTSIDE_OVERLAY);        webView.addJavascriptInterface(new JavascriptInterface(), "demo");        webView.loadUrl("file:///android_asset/index.html");//设置加载网页    }    class JavascriptInterface{        @android.webkit.JavascriptInterface        public void toAndroid(final String order){            Log.e("Logs","-----------------------"+order);            webView.post(new Runnable() {                @Override                public void run() {                    android_text.setText(order);                    android_text.setTextColor(Color.RED);                }            });        }    }

发送android原生控件数据到html

button.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                webView.post(new Runnable(){                    @Override                    public void run(){                        String str = edit.getText().toString();//这一句很容易出错，有单引号和双引号                        webView.loadUrl("javascript:AndroidToWeb('" + str + "')");  );                    }                });            }        });

里面的一句代码，用了我很长的时间才找到正确的书写方式，很多人都调用不带参数的传递方法，肯定没问题，可是很少看到带参数的传递方式，大部分还是错的（~~ 我的是正确的哦）。

String str = "sssssssss"; webView.loadUrl("javascript:AndroidToWeb('" + str + "')");

最后实现的过程如下图

这里写图片描述

过两天写一个EventBu

下载Demo

0 0