JS与原生互调指南-优快云博客

JS与原生互相调用

1.iOS的调用

第一步：pod 'WebViewJavascriptBridge'

第二步： #import "WebViewJavascriptBridge.h"

第三步：如图在页面中加载webview 和建立桥梁bridge
这里写图片描述

第四步：OC调用JS里的方法 ========
首先：在js文件里面注册方法如图所示
这里写图片描述

然后：具体实现方法写在下面，如图所示
这里写图片描述

最后：在iOS文件里面，调用js的方法如图所示
这里写图片描述

以上就可以实现OC调用JS

第五步：JS调用OC里的方法 ========
首先：OC文件里面注册方法如图所示
这里写图片描述

然后：在html文件里面写三个按钮去调用方法，如图所示
这里写图片描述

最后：在js里面实现按钮的点击事件，去调用OC的方法，如图所示
这里写图片描述

以上就是JS调用OC方法的详细步骤

2.安卓的调用

安卓调用js，js不用特意写，直接写function就可以了
js调用安卓就是 window.JSBridge.testJScallOC3(param); 具体安卓代码我也不懂

下面粘贴一下js里面必写的那段代码，其他我就不贴了

function setupWebViewJavascriptBridge(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)
}