webview下的H5与原生APP（ios/安卓）交互

说在一开始的废话：
一直以来我在公司负责的项目都有一个看似比较完善也基本没出过毛病的交互插件，但最近就是出了问题。
由于项目着急上线，Leader发话不用改了直接上，并在不影响大局和前端逻辑的情况下上线了。
虽然上线几天没出什么问题，可还是一块心病。
于是利用周末的时间好好看了一下这方面的知识，一些见解和网上参考的资料记录下来。

正文：
OK，你现在可能要实现一个功能，app使用webview打开网页，然后通过页面上的元素触发返回，并返回到app。
OK，你也可能在网上搜索了一些资料，看了也不太懂。

无论对错，要先有一个“安卓是安卓，ios是ios的想法”，那么现在先用一个方法来判断是安卓还是ios。

var checkPlatform = function () {
    var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1;
    var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isAndroid) {
        return 'android'
    } else if (isIOS) {
        return 'ios'
    }
}

然后要引入两段代码分别对ios机型和安卓机型做交互，代码来自WebViewJavascriptBridge，可github搜索，下简称“桥”。

//IOS
var setupWebViewJavascriptBridge = function(callback) {
    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';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

//安卓

var connectWebViewJavascriptBridge = function(callback) {
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                callback(WebViewJavascriptBridge)
            },
            false
        );
    }
}

上面这两端代码不用去理解它的含义，你只要知道没有他就做不了交互就行了，直接复制。

接着，要理解一个内容，
ios打开一个webview并加载你的网页，而之后你要返回到app，实际上是你在网页上通过js来调用了ios事先定义的"返回方法"，并不是你通过js让它返回的，而是你告诉app我现在要调你的返回方法，我通过 ***方法来调用。

那么就需要ios或者安卓事先在app段引入这个WebViewJavascriptBridge框架，
安卓：https://github.com/gch116620/JsBridge
ios：https://github.com/gch116620/WebViewJavascriptBridge

ok现在要在web端定义方法了。
先通过一个方法初始化，根据判断不同平台来初始化不同的桥。

function initBridge() {
    if(checkPlatform() === 'android'){
        return connectWebViewJavascriptBridge()
    }
    if(checkPlatform() === 'ios'){
        return setupWebViewJavascriptBridge()
    }
}
initBridge()

初始化完成，现在要定义方法，这里注意，你要定义的方法名称，必须已经和app端约定好，例如你要定义一个back方法用于页面返回app，那么app端定义的也是back方法。

var bridgeObj = {
    back: function (obj) {
        WebViewJavascriptBridge.callHandler('back', obj, function (response) {
            console.log(response)
        })
    }
};

这样就定义了一个back方法。

如何调用？
举个例子，你还记得点击事件吗？

document.getElementById('id').onclick = function(){
  bridgeObj.back()
}

是不是还挺简单？
ok，如果在执行完back方法后，还要调用另一个交互方法怎么办？我的方法是用callback
代码如下:

var bridgeObj = {
    back: function (obj) {
        WebViewJavascriptBridge.callHandler('back', obj, function (response) {
            console.log(response)

        })
    },
    test1:function (obj,callback) {
        WebViewJavascriptBridge.callHandler('test1', obj, function (response) {
            callback(response)
        })
    },
    test2:function (obj,callback) {
        WebViewJavascriptBridge.callHandler('test2', obj, function (response) {
            callback(response)
        })
    }
};

我定义了两个方法test1 和test2，调用时可以这样：

('#id').on('click',function () {
        //调用test1
        bridgeObj.test1(null,function (response) {
            //test1的返回值赋值给test2的参数
            //调用test2
            bridgeObj.test2({a:response},function () {        
            })
        })
    })

官方还提供了registerHandler用于注册一个方法供原生app调用，大家可以通过前文提到的github看相关介绍。

完整代码：

/**
 * 判断用户手机系统
 * @date 28th Jan 2019 ver.1
 * @return {string}
 */
var checkPlatform = function () {
    var isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator.userAgent.indexOf('Linux') > -1;
    var isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
    if (isAndroid) {
        return 'android'
    } else if (isIOS) {
        return 'ios'
    }
}


/**
 * 苹果端处理
 * @date 28th Jan 2019 ver.1
 * @param callback
 * @return {*}
 */
var setupWebViewJavascriptBridge = function(callback) {
    // ios处理
    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';
    WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

/**
 * 安卓端处理
 * @date 28th Jan 2019 ver.1
 * @param callback
 */
var connectWebViewJavascriptBridge = function(callback) {
    //web调提供方法给app调用
    if (window.WebViewJavascriptBridge) {
        callback(WebViewJavascriptBridge)
    } else {
        document.addEventListener(
            'WebViewJavascriptBridgeReady'
            , function() {
                callback(WebViewJavascriptBridge)
            },
            false
        );
    }
}

/**
 * 根据用户系统判断使用哪个桥
 * @returns {*}
 */
function initBridge() {
    /**
     * 这里开始请勿修改
     */
    if(checkPlatform() === 'android'){
        return connectWebViewJavascriptBridge()
    }
    if(checkPlatform() === 'ios'){
        return setupWebViewJavascriptBridge()
    }
}
initBridge()

/**
 * 桥方法列表
 * @type Object
 */
var bridgeObj = {
    back: function (obj) {
        WebViewJavascriptBridge.callHandler('back', obj, function (response) {
            console.log(response)

        })
    },
    test1:function (obj,callback) {
        WebViewJavascriptBridge.callHandler('test1', obj, function (response) {
            callback(response)
        })
    },
    test2:function (obj,callback) {
        WebViewJavascriptBridge.callHandler('test2', obj, function (response) {
            callback(response)
        })
    }
};

webview下的H5与原生APP（ios/安卓）交互

推荐阅读更多精彩内容