Html5与android通信

原创 2016年08月29日 18:41:30

我是一个喜欢干货的程序员。

当下HybridApp比较流行。在开发HybridApp中,h5页面如何与android本地数据通信呢?

h5网页的数据如何传递给原生android。android原生数据如何在h5网页上显示获取呢?

下面通过一个小例子,帮助那些被卡在Hybrid门槛之外的同学(曾经的我也是其中的一名)。

这个例子思路大致是这样的:使用webView加载h5登录界面,然后在把在网页上登录的用户名信息传递到原生andorid端。从android传递数据到h5原理也是一样的

首先,搭建一个Web端的服务器,并编写hybrid.html界面(不懂的请自行补习相关知识)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<input type="text" id="usernameId" ;/>
	<script type="text/javascript">
		function setUsername() {
			var input = document.getElementById("usernameId").value;
			//input = eval(input);
			if (input == "") {
				alert("内容不能为空!");
				return;
			} else {
				alert(input);
				//与android端交互 将数据input提交到android端 --->user是将android本地的对象传递过来的,调用andorid端定义的方法<span style="font-family: Arial, Helvetica, sans-serif;">setUsername()</span>

				window.user.setUsername(input);

			}
		}
	</script>
	<a onclick="setUsername()">登录</a>

</body>
</html>


andorid端:注意:请在配置文件中声明网络权限

package com.example.android_test03;



import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.ConsoleMessage;
import android.webkit.CookieManager;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;

public class MainActivity extends Activity {

	private WebView webView;
	private User mUser;
	private Handler handler;
	@SuppressLint("JavascriptInterface") 
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		webView = (WebView) findViewById(R.id.myWebView);
		//handler = new Handler();

		//设置支持JavaScript语言,让WebView支持javascript的动作
		webView.getSettings().setJavaScriptEnabled(true);
		//交互对象的添加,传入对象在html5界面的javascript中获取,该对象用于两者之间的交互。question,给JavaScript添加一个与之交互的接口,传入一个对象和该对象的名字,在html5端根据这个名字得到对象
		//提供一个供h5交互的对象,并给对象标记个名字供js识别
		webView.addJavascriptInterface( mUser= new User(), "user");
		//自定义实现alert
		webView.setWebChromeClient(new MyWebChromClient());
		//要加载的页面
		webView.loadUrl("http://192.168.8.227:8080/manyiApp/hybird.html"); 
		webView.setWebViewClient(new MyWebViewClient());

	}

	public class User {
		private String username;
		@JavascriptInterface
		public String getUsername() {
			return username;
		}
		@JavascriptInterface
		public void setUsername(String username) {
			this.username = username;
			Toast.makeText(MainActivity.this, username, Toast.LENGTH_SHORT).show();
			Log.i("TAG", username);
		}


	}
	class MyWebViewClient extends WebViewClient{  
		//不重新打开系统的浏览器加载网页
		@Override  
		public boolean shouldOverrideUrlLoading(WebView view, String url) {  
			view.loadUrl(url);
			return true;  
		}  

	}  
	private class MyWebChromClient extends WebChromeClient{
		//捕获html5 js中的alert事件, 将alert事件转换为Toast形式显示,但是不道为啥我的能toast,但是toast之后输入框的焦点就没有了,不能再输入第二次了,我用的是魅族手机
		//		@Override
		//		public boolean onJsAlert(WebView view, String url, String message,
		//				JsResult result) {
		//			// TODO Auto-generated method stub
		//			Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
		//			Log.i("TAG", message);
		//			return true;
		//		}

	}


}


有的同学可能,运行不成功。请注意以下几点:

1.提供给js调用的andorid方法必须加@JavascriptInterface才能调用成功

2.android端配置网络访问权限:   <uses-permission android:name="android.permission.INTERNET" />

3.服务器端运行启动服务

4.这一点我也不太确定:修改h5javascript内容后,请卸载重新安装app.不然默认会使用老的js文件(WebView在加载界面后会把js文件下载到本地,如果不重新卸载安装,默认使用老版本的js,)

原理:给JavaScript添加一个与之交互的接口,传入一个对象和该对象的名字,在html5端根据这个名字得到对象。通过这个接口实现交互,从对象中获取数据和信息




版权声明:本文为博主原创文章,转载请注明出处。

HTML5下服务器与客户端的4种通信方式

目前客户端(浏览器)和服务端交互大致有以下几种方式: 1)form表单提交方式,适合访问量不大,对用户体验要求不高的web系统开发,或者页面整体刷新无伤大雅的场合,通信方向是客户端提交给服务...
  • qq_30979185
  • qq_30979185
  • 2017年04月20日 19:53
  • 1498

HTML5之窗口间通信

准备工作:虚拟主机相关配置     同域下窗口间通信的二种方式:1.iframe  2 window.open   同域下的窗口通信 方式一:iframe 1.    iframe....
  • u013267266
  • u013267266
  • 2016年06月25日 19:37
  • 3171

基于HTML5 WebSocket的Web实时通信机制的研究与实现

随着互联网技术的高速发展,人们对Web应用的实时性要求越来越高,传统的Web实时通信方案已经无法满足一些现实应用的需求。在长期的Web应用过程中该传统方案逐渐露出资源浪费、实时性不高等问题,这些问题的...
  • carzyer
  • carzyer
  • 2016年06月03日 13:39
  • 2786

HTML5 WebSocket:下一次Web通信革命揭幕

让我们一起来了解HTML 5对当前Web通信的改变。HTML 5 Web Socket通过在Web上的一个单一Socket定义了一个全双工通信信道为Web通信带来了显著的改善。 HTML5 ...
  • zfrong
  • zfrong
  • 2010年06月29日 13:10
  • 5673

HTML5下服务器与客户端的4种通信方式

目前客户端(浏览器)和服务端交互大致有以下几种方式: 1)form表单提交方式,适合访问量不大,对用户体验要求不高的web系统开发,或者页面整体刷新无伤大雅的场合,通信方向是客户端提交给服务端,...
  • trekerz
  • trekerz
  • 2016年08月10日 10:50
  • 2075

html5通信方式

现有的通信方式主要有,ajax轮询、comet长轮询和comet流方式。 Ajax(轮询): 这是一种最为简单的用以实现信息推送的方式。所谓轮询,指的是逐次向服务器确认是否有发送请求的方法。具体来...
  • zhongyuan_1990
  • zhongyuan_1990
  • 2014年03月11日 15:06
  • 942

android与html5交互

现在app中嵌套html5的用法相当的普及,但是对于她们之间的交互却又感到很模糊,接下来从两方面讲解一下,自己动手写就会明白很多。一、点击html5页面中的按钮,调用android中的方法1、andr...
  • hello_1s
  • hello_1s
  • 2016年10月14日 18:46
  • 2566

Android和H5之间的交互

Android和H5之间的交互 hybrid App开发也不是什么新鲜事了,其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的? 1、webView加载页面 ...
  • cs15229216584
  • cs15229216584
  • 2016年11月24日 16:20
  • 5408

原生和 h5 的通信问题

原生和 h5 的通信问题h5 到原生,原生返回 h5 的时候需要给 h5 传值。有两种方式: 1. 直接调用js的方法 2. 通过一个 CDVPluginResult 的对象来唤醒回调方法直接调用...
  • u011644318
  • u011644318
  • 2017年01月10日 16:46
  • 762

web请求和socket通信

详谈socket请求Web服务器过程 最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的...
  • liu_qiqi
  • liu_qiqi
  • 2015年05月16日 10:15
  • 4303
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html5与android通信
举报原因:
原因补充:

(最多只允许输入30个字)