失眠网 > android_jsbridge 让你和前端愉快的交互

android_jsbridge 让你和前端愉快的交互

时间：2022-01-29 07:35:10

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);}});}});复制代码

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

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

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()三者之间的比较

2.3.2 总结

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

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

附：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><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的回调方法。复制代码