android_js

前言

作为开发人员都知道，客户端的版本更新对于用户来说代价是很大的。为了满足客户端能够快速更新迭代的要求，许多app都内嵌入了H5，比如很多电商平台，淘宝、京东、
聚划算等等。这类技术的关键就是在于Android客户与Web前端之间的交互。很多大型项目的接口为了防止Spammer的侵入，都是要求只能由客户端发起请求的。所以本项目
就封装了一个module，实现客户端接收前端的调用，然后由客户端发起Http请求的功能。
复制代码

开始介绍项目之前，先来快速回顾一下Android客户端与Web前端之间交互的几种方式。
复制代码

1. Android调用JS方法

1.1 通过WebView的loadUrl()

android客户端代码：

 private void initWebView() {WebSettings webSettings = webView.getSettings();webSettings.setJavaScriptEnabled(true); // 设置与Js交互的权限webSettings.setJavaScriptCanOpenWindowsAutomatically(true); // 设置允许JS弹窗webView.loadUrl("file:///android_asset/javascript.html");webView.setWebChromeClient(new WebChromeClient() {@Overridepublic boolean onJsAlert(WebView view, String url, String message, final JsResult result) {AlertDialog.Builder b = new AlertDialog.Builder(SimpleWebViewActivity.this);b.setTitle("Alert");b.setMessage(message);b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {result.confirm();}});b.setCancelable(false);b.create().show();return true;}});
}private void setListener() {btnLoadUrl.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {webView.post(new Runnable() {@Overridepublic void run() {// 此处的callJS方法名与JS中的function方法名必须要一致webView.loadUrl("javascript:callJS()");}});}});
}
复制代码

javascript前端代码：

  <!DOCTYPE html><html><head><meta charset="utf-8"><title>Carson_Ho</title>// JS代码<script>// Android需要调用的方法function callJS() {alert("Android调用了JS的callJS方法");}</script></head></html>
复制代码

运行结果如图
复制代码

android客户端代码：

 btnEvaluateJavascript.setOnClickListener(new View.OnClickListener() {@TargetApi(19)@Overridepublic void onClick(final View v) {webView.evaluateJavascript("javascript:callJS()", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {//此处为 js 返回的结果Log.d(TAG, "value---" + value);}});}});
复制代码

运行结果跟上图是一样的。
复制代码

两种交互方式的比较
复制代码

调用方式	优点	缺点	使用场景
使用loadUrl()	方便简洁	效率低；获取返回值麻烦	不需要使用返回值，对性能要求较低
使用evaluateJavascript()	效率高	向下兼容性差（仅Android 4.4以上可用）	Android 4.4及以上

1.3 使用建议

// Android版本变量
final int version = Build.VERSION.SDK_INT;
// 因为该方法在 Android 4.4 版本才可使用，所以使用时需进行版本判断
if (version < 18) {webView.loadUrl("javascript:callJS()");
} else {webView.evaluateJavascript（"javascript:callJS()", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {//此处为 js 返回的结果}});
}
复制代码

2. JS调用Android方法

2.1 通过WebView的addJavascriptInterface()进行对象映射

代码不再贴出，详细代码请参见：代码地址运行结果如下：

2.2 通过 WebViewClient 的方法shouldOverrideUrlLoading()回调拦截 url

代码不再贴出，详细代码请参见：代码地址运行结果如下：

2.3 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息

代码不再贴出，详细代码请参见：代码地址运行结果如下：

2.3.1 onJsAlert()、onJsConfirm()、onJsPrompt()三者之间的比较

方法	作用	返回值
alert()	弹出警告框	没有
confirm()	弹出确认框	两个返回值（true或false）
prompt()	弹出输入框	任意设置返回值

2.3.2 总结

常用的拦截是：拦截 JS的输入框（即prompt()方法），因为只有prompt()可以返回任意类型的值，操作最全面方便、更加灵活，
而alert()对话框没有返回值，confirm()对话框只能返回两种状态（确定 / 取消）两个值。
复制代码

2.4 三种Android Call Js 方式的对比以及使用场景

调用方式	优点	缺点	使用场景
通过WebView的addJavascriptInterface() 进行对象映射	方便简洁	Android 4.2以下存在漏洞问题	Android 4.2以上相对简单的互调场景
通过 WebViewClient 的方法shouldOverrideUrlLoading() 回调拦截 url	不存在漏洞问题	有协议约束，客户端向前端传值繁琐	不需要返回值的互调场景
通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息	不存在漏洞问题	有协议约束	能满足大多数情况下的互调场景

附：WebView的addJavascriptInterface()方法在Android 4.2以下存在的漏洞

以上都是对基础知识的回顾，下面的才是本项目的解释说明。注意了，以下才是本项目的解释说明！！

先来看一下项目运行的效果图：
复制代码

大家会说，这个不是跟拦截JS的prompt()方法一样么，没错，js和android之间的交互，也无非上面提到的几种方法，这里做的封装采用的是：
js调android：通过WebView的addJavascriptInterface()进行对象映射
android回调js:android 4.4以上采用WebView的evaluateJavascript()方法，android 4.4以下采用loadUrl()方法
复制代码

android端代码：
复制代码

JsBridgeWebView 这是一个继承WebView的类，它里面向JS注入了一个对象供JS调用，JS可以通过这个对象调用Native的方法，调哪个方法，传哪些参数，完全由JS决定，方法名必须两端协议，Native通过反射找到对应的方法。传递过来的参数重包含了JS回调方法的方法名，客户端执行完相应的操作之后再去执行JS的方法。

js代码：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Carson</title><script>function callAndroid(){// 由于对象映射，所以调用jsCallback对象等于调用Android映射的对象var json = "{\"name\": \"zlove\", \"_dscbstub\": \"callback\"}"_jsbridge.call("testAsync", json);}function callback(result) {alert("客户端返回的结果是：" + result)}</script>
</head>
<body>
<!-- 点击按钮则调用callAndroid函数 -->
<button type="button" id="button1" style="font-size:30px" onclick="callAndroid()">Call Android</button>
</body>
</html>
复制代码

var json = "{\"name\": \"zlove\", \"_dscbstub\": \"callback\"}"
_jsbridge.call("testAsync", json);
_jsbridge表示客户端注入的对象，testAsync是方法名，json是参数，而_dscbstub对应的callback是js的回调方法。
复制代码

end

本来以为要写很多，事实上其实把基础原理写清楚了，也就这么多???。
I hope this will help you!
复制代码

附：源码地址

android_jsbridge，让你和前端愉快的交互相关推荐

笔记：前端与后台交互
前端与后台交互由于最近和大牛聊天,所得一些感悟,写下来,以勉励自己交互方式 http请求(问答模式) 通过传统的发送请求接收相应,一问一答的模式获得数据,主要负责传递参数,接收数据模版,渲染数据, ...
JAVA前端与后端交互面试题
1.前端与后端交互面试题 1.1. 描述Servlet调用过程? 答案: (1)在浏览器输入地址,浏览器先去查找hosts文件,将主机名翻译为ip地址,如果找不到就再去查询dns服务器将主机名翻译成i ...
前端该懂交互设计吗？
前端该懂交互设计吗? 接到一个前端动效任务:设计一个点击展开的动效效果如下: (在产品看来这个交互是没必要存在,根据公司需求这也成了唯一的方法(在移动端页面右边添加一个控件,这种控件会将用户的注意力 ...
Esp8266 进阶之路21 【高级篇】浅谈 esp8266 如何在本地局域网网络情况下实现最大效率地和前端实现数据交互。（附带Demo）
本系列博客学习由非官方人员半颗心脏潜心所力所写,不做开发板.仅仅做个人技术交流分享,不做任何商业用途.如有不对之处,请留言,本人及时更改. 序号 SDK版本内容链接 1 nonos2.0 搭建 ...
Ajax 前端后端数据交互
Ajax 前端/后端数据交互一概述同步: 一请求一响应,全局刷新异步: 多请求多响应,局部刷新 (默认为异步,效率高) 场景: 浏览网页时,未全局刷新,能更新数据的页面基本都使用了 ...
后端php和前端的联系,前端和后端交互详解
本篇文章讲述了前端和后端交互,大家对前端和后端交互不了解的话或者对前端和后端交互感兴趣的话那么我们就一起来看看本篇文章吧, 好了废话少说进入正题吧! 什么是web服务器? 服务器: 通俗理解,一台24 ...
前端和后端交互的一些原规范问题
最近自己做后台,跟前端的一些有交集的问题总是工作内容划分不清楚,找了下网上搜了搜相关管理的资料应,总结了下供大家参考,有好的意见求交流== 该怎么去规避一些不该属于自己的任务而被后台强加于自己?等等 ...
对于Json前端和后端交互的数据格式设置
这里需要区分一个概念,Json对象和Json字符串的区别:https://blog.csdn.net/u010865136/article/details/78591765 一般前端向后端发送请求是通 ...
前端和后端交互的一些认识
一开始我以为后端的接口只能是C++中那种常规的函数调用,今天算是有了新的认识. 最近项目组要进行B/S框架的开发,自己今天搜了下领导说的前端和后端定义接口指的到底是什么,原来就是url地址(一开始我一 ...

android_jsbridge，让你和前端愉快的交互

android_js

前言

1. Android调用JS方法

1.1 通过WebView的loadUrl()

1.3 使用建议

2. JS调用Android方法

2.1 通过WebView的addJavascriptInterface()进行对象映射

2.2 通过 WebViewClient 的方法shouldOverrideUrlLoading()回调拦截 url

2.3 通过 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt()方法回调拦截JS对话框alert()、confirm()、prompt()消息

2.3.1 onJsAlert()、onJsConfirm()、onJsPrompt()三者之间的比较

2.3.2 总结

2.4 三种Android Call Js 方式的对比以及使用场景

以上都是对基础知识的回顾，下面的才是本项目的解释说明。注意了，以下才是本项目的解释说明！！

end

android_jsbridge，让你和前端愉快的交互相关推荐

最新文章

热门文章