h5与安卓联调使用的jsBridge

参考地址:   https://github.com/lzyzsd/JsBridge

使用：

1. 在utils目录下新建bridge.js (utils文件夹与views同级)

//判断机型
// let u = navigator.userAgent;
//
// // function setupWebViewJavascriptBridge(callback) {
// //     //var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
// //     //判断ios 还是Android
// //     if (/(iPhone|iPad|iPod|iOS)/i.test(u)) {
// //         if (window.WebViewJavascriptBridge) {
// //             return callback(window.WebViewJavascriptBridge)
// //         }
// //         if (window.WVJBCallbacks) {
// //             return window.WVJBCallbacks.push(callback)
// //         }
// //         window.WVJBCallbacks = [callback]
// //         let WVJBIframe = document.createElement('iframe')
// //         WVJBIframe.style.display = 'none'
// //         WVJBIframe.src = 'https://__bridge_loaded__'
// //         document.documentElement.appendChild(WVJBIframe)
// //         setTimeout(() => {
// //             document.documentElement.removeChild(WVJBIframe)
// //         }, 0)
// //     }
// // }
//
// //安卓注册事件监听
// function connectWebViewJavascriptBridge(callback) {
//     if (window.WebViewJavascriptBridge) {
//         callback(WebViewJavascriptBridge)
//     } else {
//         document.addEventListener(
//             'WebViewJavascriptBridgeReady',
//             function () {
//                 callback(WebViewJavascriptBridge)
//             },
//             false
//         );
//     }
// }
//
// connectWebViewJavascriptBridge(function (bridge) {
//     //初始化
//     if (!/(iPhone|iPad|iPod|iOS)/i.test(u)) {
//         console.log("初始化")
//         bridge.init(function (message, responseCallback) {
//             //var data = {'Javascript Responds': 'Wee!'};
//             responseCallback(data);
//         });
//     }
// });

//自定义JS注册事件监听 connectWebViewJavascriptBridge 方法名可改
function connectWebViewJavascriptBridge(callback) {
    if (window.WebViewJavascriptBridge) {
        // alert("21");
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                callback(WebViewJavascriptBridge)
            },
            false
        );
    }
}
//注册回调函数，第一次连接时调用 初始化函数 connectWebViewJavascriptBridge和上面一致
connectWebViewJavascriptBridge(function(bridge) {

    //初始化 必须有 Android 通过 JSBridge 调用 默认JS bridge.init bridgeWebView.send调用
    bridge.init(function(message, responseCallback) {
        var data = {
            'Javascript Responds': 'Android调用JS初始化方法!'
        };
        responseCallback(data);
    });
})



export default {
    callHandler(name, data, callback) {
        connectWebViewJavascriptBridge(function (bridge) {
            bridge.callHandler(name, data, callback)
        })
    },
    registerhandler(name, callback) {
        connectWebViewJavascriptBridge(function (bridge) {
            bridge.registerHandler(name, function (data, responseCallback) {
                callback(data, responseCallback)
            })
            // //Android调用js方法：functionInJs方法名称需要保持一致 ，并返回给Android通知
            // bridge.registerHandler("functionInJs", function(data, responseCallback) {
            //     alert("JS接收到Android数据弹JS对话框："+data);
            //     // var data2 = document.getElementById("text1").value;
            //     // var responseData =data2;
            //     responseCallback(responseData);
            // });
        })
    }
}

 

 

2.  在main.js 中挂载

import Bridge from './utils/bridge.js'
Vue.prototype.$bridge = Bridge

 

3. 使用 在具体事件中

  let currProjectData = {     project_id: localStorage.getItem('project_id'),     project_type_id: localStorage.getItem('project_type_id'),     space_id: localStorage.getItem('space_id') } // 1. TODO 跳转到首页调控界面   // 2. 调用安卓注册的方法toSmartScreen ,并传 currProjectData 给安卓 this.$bridge.callHandler('toSmartScreen',     currProjectData,     (data) => {         // 处理返回数据     });