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)
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章