Android与JS交互篇--JSBridge的使用

最新推荐文章于 2023-08-18 16:12:22 发布
最新推荐文章于 2023-08-18 16:12:22 发布
阅读量3.2k 收藏 6
点赞数
分类专栏： WebView

在android日常开发中，大家或多或少都会碰到原生嵌套web页面，大家可以使用传统的方式实现Native与JS的交互，这里就不多介绍了，现在我们简单介绍下网上目前比较流行的已经封装好的框架JsBridge。

可参考官网github地址：点击打开链接

先看下接下来将要实现的效果图：

一、JsBridge的基本概念
Android4.4以前，谷歌的webview存在安全漏洞，网站可以通过js注入就可以随便拿到客户端的重要信息，甚至轻而易举的调用本地代码进行流氓行为，谷歌在4.4以后增加了防御措施，如果用js调用本地代码，开发者必须在代码声明JavascriptInterface， 4.4之前我们要使得webView加载js只需如下代码：

mWebView.addJavascriptInterface(new JsToJava(), “myfunction”);
4.4之后使用时, 需要在调用Java方法加入@JavascriptInterface注解，如果代码无此声明，那么js就不生效，这样就可以避免恶意网页利用js对客户端的进行窃取和攻击。 但使用比较繁琐，要做一些判断和限制，在比较复杂的Hybrid模式下，需要js和native之间进行交互通讯，原生的JavascriptInterface 难以维护，基于JavascriptInterface 封装的WebViewJavascriptBridge框架，很好的解决了这一问题。

WebViewJavascriptBridge是移动UIView和Html交互通信的桥梁，用于替代WebView自带的JavascriptInterface接口，使开发者可以简单安全的实现js和native交互。

二、以上图为案例介绍JSBridge的使用方法
首先在Module的build.gradle里引入JSBridge所需要的包，也可以下载源码引入项目自定义库文件

repositories {
    maven { url "https://jitpack.io" }
}
 
dependencies {
    ...
    compile 'com.github.lzyzsd:jsbridge:1.0.4'
}

在xml文件中使用控件

<?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:orientation="vertical"
    android:gravity="center_horizontal"
    android:padding="20dp"
    android:background="#9f9f9f"
    tools:context="com.liuw.jsbridge.MainActivity">
 
    <EditText
        android:id="@+id/edit_view"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#ffffff"
        android:gravity="top"
        android:textSize="14sp"
        android:textColor="@color/colorAccent"
        android:text="来自于js将要展示的数据"/>
 
    <Button
        android:id="@+id/btn_send"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_marginTop="10dp"
        android:text="发送数据到webView"/>
 
    <Button
        android:id="@+id/btn_reset"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_marginTop="10dp"
        android:text="重置浏览器"/>
 
    <com.github.lzyzsd.jsbridge.BridgeWebView
        android:id="@+id/bridge_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="20dp">
 
    </com.github.lzyzsd.jsbridge.BridgeWebView>
</LinearLayout>

MainActivity主界面中使用

下面先简单介绍下重点几步操作:

1、加载网页地址
mBridgeWebview.loadUrl("file:///android_asset/web.html");
2、注册handler，接收来自js的数据data，并可通过onCallBack回传数据
mBridgeWebview.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                if (!TextUtils.isEmpty(data)) {
                    mEditText.setText("通过调用Native方法接收数据：\n" + data);
                }
                function.onCallBack("Native已经接收到数据：" + data + "，请确认！");
            }
        });
对应的js代码如下

function useClick() {
            var name = document.getElementById("uname").value;
            var pwd = document.getElementById("psw").value;
            var data = "name = " + name + ", password = " + pwd;
 
            window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb', {'info':data},//data发送给native
                function(responseData) {//接收onCallBack回传回来的数据
                    document.getElementById("show").innerHTML = responseData;
                }
            );
     }
上面这种方法是通过native和js定义相同的标识进行通信，还有种方法可直接在js中通过send方法发送，并在native中创建DefaultHandler接收

mBridgeWebview.setDefaultHandler(new DefaultHandler(){
            @Override
            public void handler(String data, CallBackFunction function) {
                function.onCallBack("Native已收到消息！");
            }
        });
对应js代码如下：

//h5直接通过send向Native发送消息，在DefaultHandler的handler方法里接收，并可通过onCallBack方法回传
    function sendClick() {
        var name = document.getElementById("uname").value;
        var pwd = document.getElementById("psw").value;
        var data = "name = " + name + ", password = " + pwd;
 
        window.WebViewJavascriptBridge.send(
            data,
            function(responseData) {
                document.getElementById("show").innerHTML = responseData
            }
        );
    }
3、定义callHandler，多用于在初始化界面时native向js发送数据渲染界面，同时也可获取来自js的数据
mBridgeWebview.callHandler("functionInJs", new Gson().toJson(new UserInfo("liuw", "123456")), new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                mEditText.setText("向h5发送初始化数据成功，接收h5返回值为：\n" + data);
            }
        });
对应的js代码如下

function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }
 
// 第一连接时初始化bridage
connectWebViewJavascriptBridge(function(bridge) {
            //注册handler等待java代码调用
            //初始化时获取数据是调用此处代码
            //参数：标识，要传递到JAVA的数据，回调方法。
            //JAVA代码响应的方法：mBridgeWebview.callHandler("functionInJs", new Gson().toJson(实体类对象), new CallBackFunction(){onCallBack(String data)}
            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                var responseData = "I am javascript, Data reception success!";
                responseCallback(responseData);
            });
})
4、Native中send方法的使用
这里需要注意下，该方法对应js中的bridge.init处理，此处需加CallBackFunction方法,如果只使用mBridgeWebview.send("")；如：mBridgeWebview.send("hello");，会导致js中只收到通知，接收不到值
mBridgeWebview.send("来自java的发送消息！！！", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                Toast.makeText(MainActivity.this, "bridge.init初始化数据成功" + data, Toast.LENGTH_SHORT).show();
            }
        });
对应的js代码如下

function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }
 
    // 第一连接时初始化bridage
    connectWebViewJavascriptBridge(function(bridge) {
            //也注册默认的Handler，用来接收java调用的send(string,CallBackFunction)方法
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };
                console.log('JS responding with', data);
                responseCallback(data);
            });
    })
5、再介绍一种常规的Native直接向js传递数据的方法
//直接调用nativeFunction方法向H5发送数据
mBridgeWebview.loadUrl("javascript:nativeFunction('" + data + "')");
对应的js代码如下

    function nativeFunction(data) {
        document.getElementById("show").innerHTML = data;
    }
只需通过方法名直接调用即可，是不是很简单啊~

三、下面上完整代码
package com.liuw.jsbridge;
 
import android.annotation.TargetApi;
import android.app.Activity;
import android.content.ClipData;
import android.content.Intent;
import android.net.Uri;
import android.os.Build;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.util.Log;
import android.view.KeyEvent;
import android.view.View;
import android.webkit.ValueCallback;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.Toast;
 
import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.CallBackFunction;
import com.github.lzyzsd.jsbridge.DefaultHandler;
import com.google.gson.Gson;
import com.liuw.jsbridge.bean.UserInfo;
 
import butterknife.ButterKnife;
import butterknife.InjectView;
 
public class MainActivity extends AppCompatActivity {
 
    @InjectView(R.id.edit_view)
    EditText mEditText;
    @InjectView(R.id.btn_send)
    Button btnSend;
    @InjectView(R.id.bridge_webview)
    BridgeWebView mBridgeWebview;
    @InjectView(R.id.btn_reset)
    Button btnReset;
 
    private String TAG = "MainActivity";
    private MyHandlerCallBack.OnSendDataListener mOnSendDataListener;
    private ValueCallback<Uri> mUploadMessage;
    ;
    private ValueCallback<Uri[]> mUploadCallbackAboveL;
    private final static int FILECHOOSER_RESULTCODE = 1;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.inject(this);
 
        initListener();
        initWebView();
    }
 
    private void initWebView() {
        //辅助WebView设置处理关于页面跳转，页面请求等操作
        mBridgeWebview.setWebViewClient(new MyWebViewClient(mBridgeWebview, MainActivity.this));
        //Handler做为通信桥梁的作用，接收处理来自H5数据及回传Native数据的处理，当h5调用send()发送消息的时候，调用MyHandlerCallBack
        mBridgeWebview.setDefaultHandler(new MyHandlerCallBack(mOnSendDataListener));
        //WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等比等，不过它还能处理文件上传操作
        mBridgeWebview.setWebChromeClient(new MyChromeWebClient());
        // 如果不加这一行，当点击界面链接，跳转到外部时，会出现net::ERR_CACHE_MISS错误
        // 需要在androidManifest.xml文件中声明联网权限
        // <uses-permission android:name="android.permission.INTERNET"/>
        if (Build.VERSION.SDK_INT >= 19) {
            mBridgeWebview.getSettings().setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        }
 
        //加载网页地址
        mBridgeWebview.loadUrl("file:///android_asset/web.html");
 
        //有方法名的都需要注册Handler后使用
        mBridgeWebview.registerHandler("submitFromWeb", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Log.i("liuw", "html返回数据为:" + data);
                if (!TextUtils.isEmpty(data)) {
                    mEditText.setText("通过调用Native方法接收数据：\n" + data);
                }
                function.onCallBack("Native已经接收到数据：" + data + "，请确认！");
            }
        });
 
        mBridgeWebview.registerHandler("functionOpen", new BridgeHandler() {
            @Override
            public void handler(String data, CallBackFunction function) {
                Toast.makeText(MainActivity.this, "网页在打开你的文件预览", Toast.LENGTH_SHORT).show();
            }
        });
 
        //应用启动后初始化数据调用，js处理方法connectWebViewJavascriptBridge(function(bridge)
        mBridgeWebview.callHandler("functionInJs", new Gson().toJson(new UserInfo("liuw", "123456")), new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                mEditText.setText("向h5发送初始化数据成功，接收h5返回值为：\n" + data);
            }
        });
 
        //对应js中的bridge.init处理，此处需加CallBackFunction,如果只使用mBridgeWebview.send("")；会导致js中只收到通知，接收不到值
        mBridgeWebview.send("来自java的发送消息！！！", new CallBackFunction() {
            @Override
            public void onCallBack(String data) {
                Toast.makeText(MainActivity.this, "bridge.init初始化数据成功" + data, Toast.LENGTH_SHORT).show();
            }
        });
 
    }
 
    private void initListener() {
        btnSend.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                String data = mEditText.getText().toString();
                //直接调用nativeFunction方法向H5发送数据
                mBridgeWebview.loadUrl("javascript:nativeFunction('" + data + "')");
            }
        });
 
        btnReset.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mBridgeWebview.loadUrl("file:///android_asset/web.html");
            }
        });
 
        mOnSendDataListener = new MyHandlerCallBack.OnSendDataListener() {
            @Override
            public void sendData(String data) {
                mEditText.setText("通过webview发消息接收到数据：\n" + data);
            }
        };
    }
 
    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        if (requestCode == FILECHOOSER_RESULTCODE) {
            if (null == mUploadMessage && null == mUploadCallbackAboveL) {
                return;
            }
            Uri result = data == null || resultCode != RESULT_OK ? null : data.getData();
            if (mUploadCallbackAboveL != null) {
                onActivityResultAboveL(requestCode, resultCode, data);
            } else if (mUploadMessage != null) {
                mUploadMessage.onReceiveValue(result);
                mUploadMessage = null;
            }
        }
    }
 
    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    private void onActivityResultAboveL(int requestCode, int resultCode, Intent data) {
        if (requestCode != FILECHOOSER_RESULTCODE
                || mUploadCallbackAboveL == null) {
            return;
        }
 
        Uri[] results = null;
        if (resultCode == Activity.RESULT_OK) {
            if (data == null) {
 
            } else {
                String dataString = data.getDataString();
                ClipData clipData = data.getClipData();
 
                if (clipData != null) {
                    results = new Uri[clipData.getItemCount()];
                    for (int i = 0; i < clipData.getItemCount(); i++) {
                        ClipData.Item item = clipData.getItemAt(i);
                        results[i] = item.getUri();
                    }
                }
 
                if (dataString != null) {
                    results = new Uri[]{Uri.parse(dataString)};
                }
            }
        }
        mUploadCallbackAboveL.onReceiveValue(results);
        mUploadCallbackAboveL = null;
    }
 
    //自定义 WebChromeClient 辅助WebView处理图片上传操作【<input type=file> 文件上传标签,点击会自动调用】
    public class MyChromeWebClient extends WebChromeClient {
        // For Android 3.0-
        public void openFileChooser(ValueCallback<Uri> uploadMsg) {
            Log.d(TAG, "openFileChoose(ValueCallback<Uri> uploadMsg)");
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            MainActivity.this.startActivityForResult(Intent.createChooser(i, "File Chooser"), FILECHOOSER_RESULTCODE);
        }
 
        // For Android 3.0+
        public void openFileChooser(ValueCallback uploadMsg, String acceptType) {
            Log.d(TAG, "openFileChoose( ValueCallback uploadMsg, String acceptType )");
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            MainActivity.this.startActivityForResult(
                    Intent.createChooser(i, "File Browser"),
                    FILECHOOSER_RESULTCODE);
        }
 
        //For Android 4.1
        public void openFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture) {
            Log.d(TAG, "openFileChoose(ValueCallback<Uri> uploadMsg, String acceptType, String capture)");
            mUploadMessage = uploadMsg;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            MainActivity.this.startActivityForResult(Intent.createChooser(i, "File Browser"), FILECHOOSER_RESULTCODE);
        }
 
        // For Android 5.0+会调用此方法
        @Override
        public boolean onShowFileChooser(WebView webView, ValueCallback<Uri[]> filePathCallback, FileChooserParams fileChooserParams) {
            Log.d(TAG, "onShowFileChooser(ValueCallback<Uri> uploadMsg, String acceptType, String capture)");
            mUploadCallbackAboveL = filePathCallback;
            Intent i = new Intent(Intent.ACTION_GET_CONTENT);
            i.addCategory(Intent.CATEGORY_OPENABLE);
            i.setType("*/*");
            MainActivity.this.startActivityForResult(
                    Intent.createChooser(i, "File Browser"),
                    FILECHOOSER_RESULTCODE);
            return true;
        }
    }
 
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        // 处理返回键，在webview界面，按下返回键，不退出程序
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (mBridgeWebview != null && mBridgeWebview.canGoBack()) {
                mBridgeWebview.goBack();
                return true;
            }else {
                System.exit(0);
            }
        }
        return super.onKeyDown(keyCode, event);
    }
}

自定义MyHandlerCallBack类

package com.liuw.jsbridge;
 
import android.text.TextUtils;
import android.util.Log;
 
import com.github.lzyzsd.jsbridge.BridgeHandler;
import com.github.lzyzsd.jsbridge.CallBackFunction;
 
/**
 * Created by liuw on 2018/3/6.
 * 自定义Handler回调
 */
 
class MyHandlerCallBack implements BridgeHandler {
    private OnSendDataListener mSendDataListener;
 
    public MyHandlerCallBack(OnSendDataListener mSendDataListener){
        this.mSendDataListener = mSendDataListener;
    }
 
    @Override
    public void handler(String data, CallBackFunction function) {
        Log.e("liuw","接收数据为：" + data);
        if (!TextUtils.isEmpty(data) && mSendDataListener != null) {
            mSendDataListener.sendData(data);
        }
        function.onCallBack("Native已收到消息！");
    }
 
    public interface OnSendDataListener {
        void sendData(String data);
    }
}

自定义MyWebViewClient类

package com.liuw.jsbridge;
 
import android.content.Context;
import android.content.Intent;
import android.net.Uri;
import android.util.Log;
import android.webkit.WebView;
 
import com.github.lzyzsd.jsbridge.BridgeWebView;
import com.github.lzyzsd.jsbridge.BridgeWebViewClient;
 
import java.io.UnsupportedEncodingException;
import java.net.URLDecoder;
 
/**
 * Created by liuw on 2018/3/6.
 * 自定义WebViewClient
 */
 
class MyWebViewClient extends BridgeWebViewClient {
    private Context mContext;
    public MyWebViewClient(BridgeWebView mBridgeWebview, Context context) {
        super(mBridgeWebview);
        mContext = context;
    }
 
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        Log.i("liuw", "url地址为：" + url);
        try {
            url = URLDecoder.decode(url, "UTF-8");
        } catch (UnsupportedEncodingException e) {
            e.printStackTrace();
        }
        //默认操作url地址yy://__QUEUE_MESSAGE__/
        if (url.trim().startsWith("yy:")) {
            return super.shouldOverrideUrlLoading(view, url);
        }
        //特殊情况tel，调用系统的拨号软件拨号【<a href="tel:110">拨打电话110</a>】
        if(url.trim().startsWith("tel")){
            Intent i = new Intent(Intent.ACTION_VIEW);
            i.setData(Uri.parse(url));
            mContext.startActivity(i);
        }else {
            //特殊情况【调用系统浏览器打开】<a href="https://www.csdn.net">调用系统浏览器</a>
            if(url.contains("csdn")){
                Intent i = new Intent(Intent.ACTION_VIEW);
                i.setData(Uri.parse(url));
                mContext.startActivity(i);
            } else {//其它非特殊情况全部放行
                view.loadUrl(url);
            }
        }
        return true;
    }
}
创建web.html并放入assets资源文件夹下，同时将WebViewJavascriptBridge.js也拷入

<html>
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <title>
        js调用java
    </title>
</head>
 
<body>
<p>
    <xmp id="show">Native将要回传回来的数据展示</xmp>
</p>
 
<p>
    <input type="text" id="uname" value="用户名"/>
</p>
 
<p>
    <input type="text" id="psw" value="密码"/>
</p>
 
<p>
    <input type="button" id="send" value="发消息给Native" οnclick="sendClick();"
    />
</p>
 
<p>
    <input type="button" id="use" value="调用Native方法" οnclick="useClick();"
    />
</p>
 
<p>
    <input type="file" id="open" value="打开文件" οnclick="onOpen();"/>
</p>
 
<p>
    <a href="tel:110">拨打电话110</a>
</p>
 
<p>
    <a href="http://www.baidu.com">webview浏览器</a>
</p>
 
<p>
    <a href="https://www.csdn.net">调用系统浏览器</a>
</p>
</body>
 
<script>
 
    //Native方法直接调用，示例代码：mBridgeWebview.loadUrl("javascript:nativeFunction('" + data + "')");
    function nativeFunction(data) {
        document.getElementById("show").innerHTML = data;
    }
 
    //h5直接通过send向Native发送消息，在MyHandlerCallBack的Handler里接收，并可通过onCallBack方法回传
    function sendClick() {
        var name = document.getElementById("uname").value;
        var pwd = document.getElementById("psw").value;
        var data = "name = " + name + ", password = " + pwd;
 
        window.WebViewJavascriptBridge.send(
            data,
            function(responseData) {
                document.getElementById("show").innerHTML = responseData
            }
        );
    }
 
    //h5通过和Native统一命名方法名，如submitFromWeb来调取java代码，如mBridgeWebview.registerHandler("submitFromWeb", new BridgeHandler() {...});
    function useClick() {
            var name = document.getElementById("uname").value;
            var pwd = document.getElementById("psw").value;
            var data = "name = " + name + ", password = " + pwd;
 
            window.WebViewJavascriptBridge.callHandler(
                'submitFromWeb', {'info':data},
                function(responseData) {
                    document.getElementById("show").innerHTML = responseData;
                }
            );
     }
 
    function onOpen() {
            var data = "调用文件";
            //call native method
            window.WebViewJavascriptBridge.callHandler(
                'functionOpen'
                , {'param': data }
                , function(responseData) {
                    document.getElementById("open").innerHTML = responseData;
                }
            );
    }
 
/****************************************************************/
    function connectWebViewJavascriptBridge(callback) {
            if (window.WebViewJavascriptBridge) {
                callback(WebViewJavascriptBridge)
            } else {
                document.addEventListener(
                    'WebViewJavascriptBridgeReady'
                    , function() {
                        callback(WebViewJavascriptBridge)
                    },
                    false
                );
            }
        }
 
    // 第一连接时初始化bridage
    connectWebViewJavascriptBridge(function(bridge) {
            //也注册默认的Handler，用来接收java调用的send(string,CallBackFunction)方法
            bridge.init(function(message, responseCallback) {
                console.log('JS got a message', message);
                var data = {
                    'Javascript Responds': '测试中文!'
                };
                console.log('JS responding with', data);
                responseCallback(data);
            });
            //注册handler等待java代码调用
            //初始化时获取数据是调用此处代码
            //参数：标识，要传递到JAVA的数据，回调方法。
            //JAVA代码响应的方法：mBridgeWebview.callHandler("functionInJs", new Gson().toJson(实体类对象), new CallBackFunction(){onCallBack(String data)}
            bridge.registerHandler("functionInJs", function(data, responseCallback) {
                document.getElementById("show").innerHTML = ("data from Java: = " + data);
                var responseData = "I am javascript, Data reception success!";
                responseCallback(responseData);
            });
    })
/****************************************************************/
</script>
</html>

最后不要忘了加网络权限哦
<uses-permission android:name="android.permission.INTERNET"/>
四、总结
1、如果使用registerHandler，那么native和js中定义的标识必须一致

2、大家如果有出现上传文件图片失败，可能是适配原因，安卓系统5.0以上需要在WebChromeClient中实现onShowFileChooser()方法，详情请看代码示例

以上总结不完全，代码中如有错误欢迎指正。

完整代码已上传至GitHub：jsbridge地址

Luckie stone
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android JSBridge 详解（背景和原理、特性和挑战、应用场景和实现方法）
半夏微凉科技
06-05 523
JSBridge（JavaScript Bridge）是一种用于在 JavaScript 和 Native 代码之间进行通信的技术，常用于在 Web 应用中调用 Native 功能或在 Native 应用中嵌入 Web 页面。在 Android 平台上，JSBridge 可以实现通过 WebView 控件在 JavaScript 和 Java 代码之间进行双向通信，从而实现跨平台的功能交互~~~
android和js的交互之jsbridge使用教程
08-27
Android 和 JS 的交互之 JSBridge 使用教程 Android 和 JS 的交互是移动应用开发中非常重要的一部分，特别是在 Hybrid 应用开发中。JSBridge 是一个流行的库，能够帮助开发者轻松实现 Android 和 JS 之间的交互。在...
Android 混合开发之JsBridge
happylishang的专栏
11-18 1517
电商或者内容类APP中，H5通常都会占据一席之地,Native跟H5通信会必不可少，比如某些场景H5通知native去分享，native通知H5局部刷新等，Android本身也提供这样的接口，比如addJavascriptInterface、loadUrl(“javascript:…”），而需要支持的能力也要是双工的。 1：H5通知Native(可能需要处理回调)， 2：Native通知H5（也...
Android-jsbridge基本使用（H5&uniappVue端 双向通信Android&IOS）
m0_59482482的博客
09-27 5026
其中hybrid、react native等方案对前端很友好，毕竟是用我们熟悉的JavaScript开发，但JavaScript无法直接调用native本身提供的能力，比如获取相册信息。所以就需要通过一种方式将native能力提供给JavaScript，同时native也可能需要调用JavaScript的一些功能，而JSBridge就是JavaScript和native之间的桥梁，提供两者相互调用的能力。二、使用 BridgeWebView对象，内部是对webview的封装直接使用就可以。
使用JSBridge框架来实现Android与H5（JS）交互
UrasakiNakajima的博客
05-28 3563
在开发中，为了追求开发的效率以及移植的便利性，一些展示性强的页面我们会偏向于使用h5来完成，功能性强的页面我们会偏向于使用native来完成，而一旦使用了h5，为了在h5中尽可能的得到native的体验，我们native层需要暴露一些方法给js调用，比如，弹Toast提醒，弹Dialog，分享等等，有时候甚至把h5的网络请求放到native去完成。JSBridge做得好的一个典型就是微信，微信给开发者提供了JS SDK，该SDK中暴露了很多微信native层的方法，比如支付，定位等。
03-Java的面向对象
qq_45632660的博客
09-23 462
1、什么是面向对象 https://www.jianshu.com/p/7a5b0043b035 2、类和对象 面向对象的思想概述 **类(Class)和对象(Object)**是面向对象的核心概念。 类是对一类事物的描述，是抽象的、概念上的定义 对象是实际存在的该类事物的每个个体，因而也称为实例 万物皆对象 2.1、类的属性 一、设计类、其实就是设计类的成员 属性 = 成员变量 = field = 域 、字段 方法 = 成员方法 = 函数 = method 创建类的对象 = 类的实例化 =
初识JSBridge：从原理到使用（android、ios、js三端互通的工具）
qq_26780317的博客
08-12 4657
初识JSBridge：从原理到使用
JSBridge实现Android和JS交互
09-24
**JSBridge实现Android和JS交互** 在现代移动应用开发中，JavaScript和...在实际项目中，结合标签"android js"，开发者可以将这种技术运用到各种需要Android与JavaScript交互的场景中，提高应用的功能性和用户体验。
android-jsbridge
04-20
在移动应用开发中，Android与JavaScript的交互是不可或缺的一部分，尤其在混合开发模式下，Android JSBridge扮演着桥梁的角色，使得原生Android代码能够与Web页面中的JavaScript进行高效通信。本文将深入探讨Android...
JsBridge demo及android与js交互
03-18
JavaScript Bridge（JsBridge）是一种技术，它允许JavaScript与原生移动平台（如Android）进行通信，使得Web应用能够调用手机设备的特定功能，如访问硬件、存储数据、发送推送通知等，从而提升Web应用的功能性和用户...
Android JSBridge的原理与实现
热门推荐
区长的专栏
02-28 4万+
在Android中，JSBridge已经不是什么新鲜的事物了，各家的实现方式也略有差异。大多数人都知道WebView存在一个漏洞，见WebView中接口隐患与手机挂马利用，虽然该漏洞已经在Android 4.2上修复了，即使用@JavascriptInterface代替addJavascriptInterface，但是由于兼容性和安全性问题，基本上我们不会再利用Android系统为我们提供的
关于安卓jsbridge的使用
怎么可以吃恐龙呢
06-22 3124
JSBridge是JS和Native之间的一种通信方式，也就是定义Native和JS的通信，其中Native只通过一个固定的桥对象调用JS，而JS也只通过固定的桥对象调用Native。
WebViewJavascriptBridge和Cordova原理比较解析
Asia_ZhangQQ的博客
11-26 2571
WebViewJavascriptBridge是一个开源的Native和Web App的轻量级的交互框架。实现实现之前方法互调，传值等操作。我们的WebViewJavascriptBridge的webview容器由两个部分组成，H5相关的JS（H5里jssetupWebViewJavascriptBridge 初始化，js调原生方法等），Native这块的WebViewJavas...
Android——JsBridge实战（一）
小欣儿的专栏
04-07 4467
Android开发目前现状来说，开发者大部分时间花在UI的屏幕适配上，使用原生控件开发成本已不是那么的理想，鉴于很多项目保持和iOS一致的UI界面风格，至使移动UI开发成本花费更大的代价，因此目前结合H5和原生控件混合开发是解决UI适配的一种很好的选择， 因此基于网页形式的插件更新业务功能出现了，处于APP性能的考虑，Android也会使用java和native层（C，C++）进行结合。无论是哪种结
Android中JSBridge的原理与实现
android开发笔记
02-10 1633
Android中的JSBridge是H5与Native通信的桥梁，其作用是实现H5与Native间的双向通信。要实现H5与Native的双向通信，解决如下四个问题即可： 1、Java如何调用JavaScript 2、JavaScript如何调用Java 3、方法参数以及回调如何处理 4、通信的数据格式是怎么样的 下面从以上问题依次开始讨论: 1、Java如何调用JavaScript 在And...
android 与js 交互调用js方法,Jsbridge实现Android与js交互
weixin_42501161的博客
05-25 625
### 前言在`Android`开发过程中，经常会遇到 `Android`与` js `交互的问题。但是由于原始的`Android`与` js `交互存在很多安全性问题，今天给大家介绍一个第三方的库[JsBridge](https://github.com/lzyzsd/JsBridge)在`Android`与` js `交互的使用。鉴于原库在介绍使用的时候十分简略，对于一个`js`本来就不怎么熟...
AI问答：JSBridge / WebView 与 Native 通信
最新发布
snowball的博客
08-18 502
具体来讲，Web技术通过JS调用JSBridge提供的API来调用原生应用的功能，而原生应用通过JSBridge提供的回调函数来响应Web技术的请求并返回数据。JSBridge是一种连接JavaScript和Native代码的桥梁，它提供了一种方法，使得JavaScript可以直接调用Native的代码，同时使得Native的代码也能直接调用JavaScript的方法，从而实现了JavaScript和Native之间的相互调用和传递数据。然后在JavaScript中直接调用Native的接口来实现通信。
js与ios和android交互,使用jsBridge和原生IOS、Android交互
05-26
是的，为了实现在Web页面中与iOS和Android原生应用程序之间的交互，可以使用JSBridge。JSBridge是一个桥接工具，可以将JavaScript与原生应用程序之间的通信连接起来。 在iOS中，可以使用JavaScriptCore框架和WKWebView来实现JSBridge。在Android中，可以使用WebView和JavaScriptInterface来实现JSBridge。 具体来说，需要在原生应用程序中创建一个JavaScriptInterface类，该类可以实现JavaScript与原生代码之间的通信。然后在Web页面中，可以通过JavaScript调用原生应用程序中的方法。 例如，在iOS中，可以使用以下代码创建一个JavaScriptInterface类： ``` @objc class JSInterface: NSObject { weak var webView: WKWebView? init(webView: WKWebView) { self.webView = webView super.init() } @objc func showToast(_ message: String) { let alertController = UIAlertController(title: "Toast", message: message, preferredStyle: .alert) let okAction = UIAlertAction(title: "OK", style: .default, handler: nil) alertController.addAction(okAction) self.webView?.viewController?.present(alertController, animated: true, completion: nil) } } ``` 然后在Web页面中，可以通过以下代码调用原生应用程序中的showToast方法： ``` window.webkit.messageHandlers.jsInterface.postMessage({action: 'showToast', message: 'Hello world!'}); ``` 在Android中，可以使用以下代码创建一个JavaScriptInterface类： ``` public class JSInterface { private Context context; public JSInterface(Context context) { this.context = context; } @JavascriptInterface public void showToast(String message) { Toast.makeText(context, message, Toast.LENGTH_SHORT).show(); } } ``` 然后在Web页面中，可以通过以下代码调用原生应用程序中的showToast方法： ``` window.jsInterface.showToast('Hello world!'); ``` 通过这种方式，可以实现JavaScript与iOS和Android原生应用程序之间的交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值