H5和安卓原生进行交互的操作流程记录

本人只是一个前端，第一次接触和移动端的混合开发，遇到了一些问题，现在记录下，以免以后踩坑

1、首先，百度H5和安卓原生交互的方式很多，但是我觉得百度的都没讲清楚或者是我太小白没看懂，以及里面涉及一些安卓或java所以我不太看得懂

2、如果安卓比较厉害的话，大概安卓也会告诉你他用了什么库，或者什么方法，然后前端按那一套对应的东西来就可以了，特别要注意安卓使用的库不同的话，可能我以下的方法就会失效

3、前端框架是vue

// 1、vue引入jsbridge.js
// 2、在原型上绑定
// 3、调用时使用 this.$bridge进行调用

　jsbridge.js

let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Adr') > -1;
let isiOS = !!navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/);

//这是必须要写的，用来创建一些设置
function setupWebViewJavascriptBridge(callback) {
    //Android使用
    if (isAndroid) {
        if (window.WebViewJavascriptBridge) {
            callback(window.WebViewJavascriptBridge);
        } else {
            document.addEventListener(
                'WebViewJavascriptBridgeReady',
                () => {
                    callback(window.WebViewJavascriptBridge);
                },
                false
            );
        }
        console.log('tag', '安卓');
        sessionStorage.phoneType = 'android';
    }

    //iOS使用
    if (isiOS) {
        if (window.WebViewJavascriptBridge) {
            return callback(window.WebViewJavascriptBridge);
        }
        if (window.WVJBCallbacks) {
            return window.WVJBCallbacks.push(callback);
        }
        window.WVJBCallbacks = [callback];
        var WVJBIframe = document.createElement('iframe');
        WVJBIframe.style.display = 'none';
        WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
        document.documentElement.appendChild(WVJBIframe);
        setTimeout(() => {
            document.documentElement.removeChild(WVJBIframe);
        }, 0);
        console.log('tag', 'ios');
        sessionStorage.phoneType = 'ios';
    }
}
//注册回调函数，第一次连接时调用 初始化函数(android需要初始化,ios不用)
setupWebViewJavascriptBridge((bridge) => {
    if (isAndroid) {
        //初始化
        bridge.init((message, responseCallback) => {
            var data = {
                'Javascript Responds': 'Wee!'
            };
            responseCallback(data);
        });
    }
});

export default {
    // js调APP方法 （参数分别为:app提供的方法名  传给app的数据  回调）
    callHandler(name, data, callback) {
        setupWebViewJavascriptBridge((bridge) => {
            bridge.callHandler(name, data, callback);
        });
    },
    // APP调js方法 （参数分别为:js提供的方法名  回调）
    registerHandler(name, callback) {
        setupWebViewJavascriptBridge((bridge) => {
            bridge.registerHandler(name, (data, responseCallback) => {
                callback(data, responseCallback);
            });
        });
    }
};

调用：

// app调h5和h5调用app我都是用的callhandler方法
mounted() {
    // this.submit2()
    // this.getappData()
    let msg = 'go'
    this.$bridge.callHandler("getName", msg, data => {
      alert('传出数据:' + data)
    })
  },

其中：getName是跟安卓定义好的方法， msg是h5给安卓传的数据，data是安卓给h5传的数据，但要注意的是，无论是h5调安卓，还是安卓调用h5的方法，也都是安卓端显示，h5是什么都不显示，至于jsBridge.js的原理，还是得深入慢慢看看