Html5与android通信
来源:互联网 发布:怎么回复淘宝手机提问 编辑:程序博客网 时间:2024/05/29 04:57
我是一个喜欢干货的程序员。
当下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") @Overrideprotected 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");//自定义实现alertwebView.setWebChromeClient(new MyWebChromClient());//要加载的页面webView.loadUrl("http://192.168.8.227:8080/manyiApp/hybird.html"); webView.setWebViewClient(new MyWebViewClient());}public class User {private String username;@JavascriptInterfacepublic String getUsername() {return username;}@JavascriptInterfacepublic 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端根据这个名字得到对象。通过这个接口实现交互,从对象中获取数据和信息
1 0
- Html5与android通信
- HTML5,js与Android native通信
- ReactNative WebView与html5通信
- Android与Html5交互
- android与html5交互
- Android与Html5互掉
- Android与Html5交互
- JS与ANDROID通信
- android与Socket通信
- android与servlet通信
- unity与android通信
- Unity与Android通信
- Android 与 Html5 、JS交互
- Android--Native与html5交互
- Android与HTML5交互模版
- Android与服务器通信之socket通信
- HTTP通信--Android客户端与Servlet通信
- Android与服务器通信之socket通信
- MQTT
- 在应用中 添加自己的字体
- Oracle ---Goldengate单项复制步骤详解
- JSON数据格式详解
- IME 消息 函数 常量
- Html5与android通信
- 导航栏设置透明磨砂效果
- android 平台集成 第三方jar包 报错--个人解决方案
- Sublime Text 2的Lua编译环境搭建
- 再次认识mysql(二)
- 动态材质的创建:使用C++与材质编辑器进行通信
- Stamps_usaco3.1_dp
- swift 调用第三方库中的c++ 注意
- SQL语言分类