文章内容
一、安装JsBridge
第三方库下载地址：JsBridge
maven安装：
1 2 3 4 5 6 7 8 | repositories { // ... maven { url "https://jitpack.io" }}dependencies { compile 'com.github.lzyzsd:jsbridge:1.0.4'} |
二、初始化代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | // JS初始化代码/** * 初始化jsbridge * @param readyCallback 初始化完成后的回调 */ function initJsBridge(readyCallback) { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 // 注册jsbridge function connectWebViewJavascriptBridge(callback) { if (isAndroid) { if (window.WebViewJavascriptBridge) { callback(WebViewJavascriptBridge) } else { document.addEventListener( 'WebViewJavascriptBridgeReady' , function () { callback(WebViewJavascriptBridge) }, false ); } return; } if (isiOS) { if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); } if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); } window.WVJBCallbacks = [callback]; var WVJBIframe = document.createElement('iframe'); WVJBIframe.style.display = 'none'; document.documentElement.appendChild(WVJBIframe); setTimeout(function () { document.documentElement.removeChild(WVJBIframe) }, 0) } } // 调用注册方法 connectWebViewJavascriptBridge(function (bridge) { if (isAndroid) { bridge.init(function (message, responseCallback) { console.log('JS got a message', message); responseCallback(data); }); } // 只有在这里注册过的方法，在原声代码里才能用callHandler的方式调用 bridge.registerHandler('jsbridge_showMessage', function (data, responseCallback) { showResponse(data); }); bridge.registerHandler('jsbridge_getJsMessage', function (data, responseCallback) { showResponse(data); responseCallback('native 传过来的是：' + data); }); readyCallback(); }); } |
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | // Android初始化代码mWeb.registerHandler("getOS", new BridgeHandler() { @Override public void handler(String data, CallBackFunction function) { HashMap response = new HashMap(){{ put("error", 0); put("message", ""); put("data", new HashMap(){{ put("os", "android"); }}); }}; function.onCallBack(response.toString()); }});mWeb.registerHandler("login", new BridgeHandler() { @Override public void handler(String data, CallBackFunction function) { Gson gson = new Gson(); final User user = gson.fromJson(data, User.class); HashMap response = new HashMap(){{ put("error", 0); put("message", ""); put("data", String.format("执行登录操作，账号为：%s、密码为：%s", user.getAccount(), user.getPassword())); }}; function.onCallBack(response.toString()); }}); |
三、原生调用JS
1 2 3 4 5 6 7 | // 使用callHandler的方式调用JS中已经注册过的方法mWeb.callHandler("jsbridge_getJsMessage", message, new CallBackFunction() { @Override public void onCallBack(String data) { showNativeMessage(String.format("原生调用JsBridge方法后，Js方法的返回值为：【%s】", data)); }}); |
四、JS调用原生
1 2 3 4 5 6 7 8 9 | // 首先调用JSBridge初始化代码，完成后再设置其他initJsBridge(function () { $("#getOS").click(function () { // 通过JsBridge调用原生方法，写法固定，第一个参数时方法名，第二个参数时传入参数，第三个参数时响应回调 window.WebViewJavascriptBridge.callHandler('getOS', null, function (response) { showResponse(response); }); }); }); |