WabView详解二:Android与JS交互的实现过程
2016-11-23 11:40
351 查看
相关文章:
《WebView详解 一:打造优雅的WebView》
在类似于电商平台的APP中,有时候涉及到复杂的逻辑,我们有必要来在我们的APP中内嵌一些H5页面,但是内嵌并不是代表我们什么也不管了,有时候我们需要在H5中来调起Android原生控件,这就需要使用Android与JS交互进行数据通信。
先看一下效果图:
底部为白色的是WebView,页面上只写了一个Button用来和Android端通信,点击页面上的Button,Android端会接受到数据并创建一个Alert对话框将接收到的数据展示出来。
相反,点击Activity上的Button,相对应的数据也会展示在Html页面上,这就完成了Android和JS交互的过程,下面看那一下代码吧
首先别忘了先加上网络权限:
一、XML布局文件:
二、Activity文件:
mWebView.addJavascriptInterface(new JsInterface(), "AndroidWebView");
AndroidWebView是一个别名,用来区分Android走的是哪一个interface
mWebView.loadUrl("javascript:world('" + name + "')");
world是js中执行的方法
name是传过去的数据
三、服务器的HTML代码:
window.AndroidWebView.showToast(text);
window:浏览器的内置对象
AndroidWebView:Android端接口的别名
showToast:Android端执行的方法
text:android端需要接收的数据
代码写的很详细了,想实现交互需要注意的就是方法的定义。
只要弄清楚双端到底应该走哪一个方法,你就基本成功了。
《WebView详解 一:打造优雅的WebView》
在类似于电商平台的APP中,有时候涉及到复杂的逻辑,我们有必要来在我们的APP中内嵌一些H5页面,但是内嵌并不是代表我们什么也不管了,有时候我们需要在H5中来调起Android原生控件,这就需要使用Android与JS交互进行数据通信。
先看一下效果图:
底部为白色的是WebView,页面上只写了一个Button用来和Android端通信,点击页面上的Button,Android端会接受到数据并创建一个Alert对话框将接收到的数据展示出来。
相反,点击Activity上的Button,相对应的数据也会展示在Html页面上,这就完成了Android和JS交互的过程,下面看那一下代码吧
首先别忘了先加上网络权限:
<uses-permission android:name="android.permission.INTERNET"/>
一、XML布局文件:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout android:id="@+id/activity_main" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:orientation="vertical" android:background="#f7f5f5" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:padding="10dp" android:layout_height="wrap_content"> <Button android:id="@+id/button" android:text="传的参数是:你好,小伙儿,我是Android!" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:padding="20dp" android:orientation="vertical" android:layout_height="match_parent"> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout> </LinearLayout>
二、Activity文件:
import android.app.AlertDialog; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.KeyEvent; import android.view.View; import android.webkit.JavascriptInterface; import android.webkit.WebView; public class MainActivity extends AppCompatActivity { private WebView mWebView; private String url = "http://10.10.10.10/index.html"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mWebView = (WebView) findViewById(R.id.webView); //设置WebView支持JavaScript mWebView.getSettings().setJavaScriptEnabled(true); //在js中调用本地java方法 mWebView.addJavascriptInterface(new JsInterface(), "AndroidWebView"); //加载网页url mWebView.loadUrl(url); findViewById(R.id.button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { //在java中调用js代码 sendInfoToJs("你好,小伙儿,我是Android!"); } }); } /** * Android ---传值---> JS * 调用js中的函数:world(msg) * * @param name world方法中的响应参数 */ public void sendInfoToJs(String name) { mWebView.loadUrl("javascript:world('" + name + "')"); } /** * Android和JS交互接口 */ private class JsInterface { /** * JS ---传值---> Android * 在js中调用window.AndroidWebView.showToast(name),便会触发showToast方法。 * * @param text showToast方法中的响应参数 */ @JavascriptInterface public void showToast(String text) { AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this); builder.setTitle("Android与JS交互信息对话框"); builder.setMessage(text); builder.setPositiveButton("确定", null); builder.setNegativeButton("取消", null); builder.create().show(); } } /** * 控制WebView的返回栈 */ public boolean onKeyDown(int keyCode, KeyEvent event) { if ((keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack())) { mWebView.goBack(); return true; } return super.onKeyDown(keyCode, event); }
mWebView.addJavascriptInterface(new JsInterface(), "AndroidWebView");
AndroidWebView是一个别名,用来区分Android走的是哪一个interface
mWebView.loadUrl("javascript:world('" + name + "')");
world是js中执行的方法
name是传过去的数据
三、服务器的HTML代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #btn{ width: 50px; height: 50px; } </style> </head> <body> <div id="main"></div><br/> <input id="btn" type="button" value="click" onclick="hello('Hello,我是JS!');"> <script type="text/javascript"> function hello(text){ window.AndroidWebView.showToast(text); return; } function world(text){ document.getElementById('main').innerHTML = text; } </script> </body> </html>
window.AndroidWebView.showToast(text);
window:浏览器的内置对象
AndroidWebView:Android端接口的别名
showToast:Android端执行的方法
text:android端需要接收的数据
代码写的很详细了,想实现交互需要注意的就是方法的定义。
只要弄清楚双端到底应该走哪一个方法,你就基本成功了。
相关文章推荐
- Android WebView实现原生与JS的交互
- Android WebView使用方法详解 附js交互调用方法
- 【Android】Android中WebView实现Java与JS交互
- Android 利用WebViewJavascriptBridge 实现js和java的交互
- Android中webview与JS交互、互调方法实例详解
- Android开发之WebView和JS交互详解
- WebView详解:Android和Js交互
- Android实现js及webview交互之在html页面中调用系统摄像头
- android 基于jsBridge实现js交互时对webview监听onPageStarted及onPageFinished
- android webview和js交互实现
- android之通过webview实现与js方法相互调用,数据交互
- Android 利用WebViewJavascriptBridge 实现js和java的交互
- Android 中利用WebViewJavascriptBridge 实现js和java的交互
- Android 利用WebViewJavascriptBridge 实现js和java的交互(一)
- Android中WebView与Js交互的实现方法
- Android实现js及webview交互之在html页面中调用系统摄像头
- Android 中 WebView 与 js 简单交互实现图文混排效果,解决图片自适应屏幕与查看大图问题
- Android在webview中实现js交互
- Android混合开发之WebViewJavascriptBridge实现JS与java安全交互
- Android demo-->webview实现js交互