通过JsBridge进行app与webview通信（Vue版）

通过JsBridge进行app与webview通信（Android版）

现在很多app都是嵌套h5页面的混合型app，实现方式就是app加一个webview，webview加入h5的项目地址，那么有时候我们需要获取设备id、获取定位等等信息，都是h5获取不了的，这时候就需要app与h5建立一个通信，实现信息传输，我们可以使用JsBridge来实现这个需求。

通过JsBridge，Web端可以调用Native端的Java接口，同样Native端也可以通过JsBridge调用Web端的Javascript接口，实现彼此的相互调用。
了解JsBridge-https://github.com/lzyzsd/JsBridge

JsBridge.js

//自定义JS注册事件监听 connectWebViewJavascriptBridge 方法名可改
function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(window.WebViewJavascriptBridge)
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , ()=> {
                callback(window.WebViewJavascriptBridge)
            },
            false
        );
    }
}

//注册回调函数，第一次连接时调用 初始化函数 connectWebViewJavascriptBridge和上面一致
connectWebViewJavascriptBridge(function(jsbridge) {
    //初始化 必须有 Android 通过 JSBridge 调用 默认JS bridge.init bridgeWebView.send调用
   jsbridge.init(function(message, callback) {
       callback({'Javascript Responds': 'Android调用JS初始化方法!'});
   });
})

export default  {
    registerHandler: function(name, fun) {
        connectWebViewJavascriptBridge(function(jsbridge){
            //Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知
           jsbridge.registerHandler(name, function(data, responseCallback) {
                responseCallback(fun(data));
            });
        })
    },
    callHandler: function(name, data, fun) {
        connectWebViewJavascriptBridge(function(jsbridge){
            //JS调用Android方法：接收Android传递过来的数据，并做处理
           jsbridge.callHandler(name, data, function(data) {
                fun(data);
            });
        })
    }
}

import JsBridge from "./utils/JsBridge"

Vue.prototype.$jsbridge = JsBridge;

通过JsBridge进行app与webview通信（Android版）
运行出来的界面

JS 通过 JSBridge 调用 Android

Android 通过 JSBridge 调用 JS