前端使用WebViewJavascriptBridge实现JS与iOS、Android客户端交互

作者: 2018-05-14 10:38:12 (星期一)

JS 调用 native 的 handler(JS 发起请求)

window.WebViewJavascriptBridge.callHandler(

'handlerName', // 调用 native 的 handler

data, // 传数据给 native

function(res) {

// 接收 native 返回的数据 res

}

);

Native 调用 JS 的方法(提供 handler 给 native)

//注册事件监听

function connectWebViewJavascriptBridge(callback) {

// Android

if (window.WebViewJavascriptBridge) {

callback(WebViewJavascriptBridge)

} else {

document.addEventListener(

'WebViewJavascriptBridgeReady',

function() {

callback(WebViewJavascriptBridge)

},

false

);

}

// 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);

}

connectWebViewJavascriptBridge(function(bridge) {

// 注册一个 JavaScript Handler，native 调用时执行 H5 操作

bridge.registerHandler("handlerName", function(data, responseCallback) {

// 接收来自 native 的数据 data

console.log(data);

// 返回数据给 Native

var res = "Response Data";

responseCallback(res);

});

// Android初始化，必须

bridge.init(function(message, responseCallback) {

// 接收来自 native 的数据 message

console.log(message);

// 返回数据给 Native

var res = "Response Data";

responseCallback(res);

});

});

插播一个征婚广告~~

也是受朋友之托。

>_<

女，运营妹，23岁，未婚，身高167cm，体重48KG，山东青岛。

目前在阿里巴巴工作，负责支付宝相关业务，工号 519720401 支付宝搜索工号可见照片。

漂亮大方，爱好读书、健身、游泳、吃鸡。

青岛有房一套，有车。

父母退休，家庭不拜金、人务实，一直没有合适的男朋友。

她本人要求不高，只要对她真心好就行。

您的赞助将会鼓励作者技术文章创作以及支持本站运维。

Follow any responses to this post with its comments RSS feed.

You can post a comment or trackback from your blog.