Android与Js互调之 / 开普饭

1. 说明在开发项目过程中，可能或多或少会有这样的需求，就是有时候需要Android 调用 Js中的方法然后获取Js返回的String类型的数据或者Json数据，然后在客户端来显示、或者说点击Html中的某个onClick点击事件，那么这篇文章就简单的给大家来介绍下Android 调用Js的方法的2种方式，以及点击WebBView中的onClick点击事件（即就是点击Html中的onClick点击事件）的方法，效果图如下：

image2. Android 调用 Js 概念？就是在手机App中点击某个 button按钮，来调用 Html网页中的一个方法，有两种实现方式，就是图中的方法1、方法2；方法1：首先给webview设置// 给 WebView 添加 JavaScript接口参数1：；参数2：JS中的变量名web_view.addJavascriptInterface(new JsInterface() , "obj");然后写一个 JsInterface类，然后写Js中对应的方法public class JsInterface{ // Android 调用 Js 方法1 中的返回值 @JavascriptInterface public void onSum(int result){ Toast.makeText(MainActivity.this , "Android调用Js方法有返回值，返回结果是 -> " + result , Toast.LENGTH_SHORT).show(); } }方法2：在Android 4.4 之后，直接调用evaluateJavascript()方法即可，就自带返回值，具体代码如下：/** * Android 调用 Js 第二种方法 * Android4.4 之后直接调用evaluateJavascript方法即可 */ public void btn_2(View view){ web_view.evaluateJavascript("sumn(6,11)", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { Toast.makeText(MainActivity.this, "返回值" + value, Toast.LENGTH_SHORT).show(); } }); }3. 点击WebView中对onClick点击事件，即就是点击Html中的 onClick点击事件：首先先给webview设置// 给 WebView 添加 JavaScript接口参数1：；参数2：JS中的变量名web_view.addJavascriptInterface(new JsInterface() , "obj");然后在 JsInterface类中，写Html中需要调用的方法即可：public class JsInterface{ /** * 点击 WebView中的（即就是 Html中的）点击事件 * <input type="button" value="结算" onclick="showToast('12')"> */ @JavascriptInterface public void showToast(String toast){ Toast.makeText(MainActivity.this , "你的商品价格是：￥" + toast , Toast.LENGTH_SHORT).show(); } }4. 其他还有两种，就是Android调用Js方法，另一种是Js不带有参数，一种是Js带有参数，可以直接调用 webview.loadUrl()即可，不过这两种在开发过程中不太常用；/** * Android 调用 Js方法，无参数 */ public void btn_3(View view){ web_view.loadUrl("javascript:funFromjs()"); } /** * Android 调用 Js 方法，有参数 */ public void btn_4(View view){ web_view.loadUrl("javascript:funJs('Android端传入的信息，div标签中显示,含参数')"); }具体代码如下：html具体代码如下：<!DOCTYPE html><html><head> <title></title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> /** 结算方法 */ function showToast(toast) { var money=toast*3; javascript:obj.showToast(money); } function funFromjs(){ document.getElementById("helloweb").innerHTML="div显示数据,无参数"; } function funJs(msg){ document.getElementById("hello2").innerHTML=msg; } function sum(i,m){ var result = i*m; document.getElementById("h").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; javascript:obj.onSum(result) } function sumn(i,m){ var result = i*m; document.getElementById("hh").innerHTML= "Android调用JS方法且有返回值--计算结果="+result; return result; } </script> <style type="text/css"> input{ width: 100px; height: 100px; margin: 20px; } </style></head><body> <input type="button" value="结算" onclick="showToast('12')"> <div id="helloweb"> </div> <div id="hello2"> </div> <div id="h"> </div> <div id="hh"> </div></body></html>MainActivity代码如下：/** * Email: 2185134304@qq.com * Created by JackChen 2018/3/27 16:19 * Version 1.0 * Params: * Description: Android调用Js方法的2种方式、点击Html中某个 onClick点击事件 */public class MainActivity extends AppCompatActivity { private WebView web_view; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView() ; } private void initView() { web_view = (WebView) findViewById(R.id.web_view); // 获取WebView的设置 WebSettings webSettings = web_view.getSettings(); //设置编码 webSettings.setDefaultTextEncodingName("utf-8"); //设置背景颜色透明 web_view.setBackgroundColor(Color.argb(0, 0, 0, 0)); // 将JavaScript设置为可用，这一句话是必须的，不然所做一切都是徒劳的 webSettings.setJavaScriptEnabled(true); // 通过webview加载html页面 web_view.loadUrl("file:///android_asset/ll.html"); // Android 调用 Js 第一种方法：使用下边方式来写 // 给 WebView 添加 JavaScript接口参数1：；参数2：JS中的变量名 web_view.addJavascriptInterface(new JsInterface() , "obj"); } public class JsInterface{ // Android 调用 Js 方法1 中的返回值 @JavascriptInterface public void onSum(int result){ Toast.makeText(MainActivity.this , "Android调用Js方法有返回值，返回结果是 -> " + result , Toast.LENGTH_SHORT).show(); } /** * 点击 WebView中的（即就是 Html中的）点击事件 * <input type="button" value="结算" onclick="showToast('12')"> */ @JavascriptInterface public void showToast(String toast){ Toast.makeText(MainActivity.this , "你的商品价格是：￥" + toast , Toast.LENGTH_SHORT).show(); } } public void btn_1(View view){ web_view.loadUrl("javascript:sum(6,6)"); } /** * Android 调用 Js 第二种方法 * Android4.4 之后直接调用evaluateJavascript方法即可 */ public void btn_2(View view){ web_view.evaluateJavascript("sumn(6,11)", new ValueCallback<String>() { @Override public void onReceiveValue(String value) { Toast.makeText(MainActivity.this, "返回值" + value, Toast.LENGTH_SHORT).show(); } }); } /** * Android 调用 Js方法，无参数 */ public void btn_3(View view){ web_view.loadUrl("javascript:funFromjs()"); } /** * Android 调用 Js 方法，有参数 */ public void btn_4(View view){ web_view.loadUrl("javascript:funJs('Android端传入的信息，div标签中显示,含参数')"); }}activity_main布局文件如下：<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:orientation="vertical" tools:context="com.jackchen.webview.MainActivity"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android调用Js有返回值 —— 方法1" android:onClick="btn_1" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android调用Js有返回值 —— 方法二" android:onClick="btn_2" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android调用Js方法，无参数" android:onClick="btn_3" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Android调用Js方法，有参数" android:onClick="btn_4" /> <WebView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/web_view" ></WebView></LinearLayout>具体代码已上传至github：https://github.com/shuai999/WebViewJsDemo.git转载：Android与Js互调之 - 使用addJavascriptInterface()

Android与Js互调之

相关推荐