JS-bridge与IOS&Android的今生

JSbridge H5页面说明

 

git地址:https://github.com/wangjiaojiao77/JsBridge

参考学习链接:http://www.imooc.com/article/23258

IOS demo链接:http://demo.yichaowang.bevateachers.com/js_bridge/jsbridge/ios.html

Android demo链接:http://demo.yichaowang.bevateachers.com/js_bridge/jsbridge/android.html

TAPD 上的 wiki 文档链接:https://www.tapd.cn/21090001/markdown_wikis/#1121090001001000674

第一部分 Android

  • 在 Android 中,先把这段代码copy到你的JS中
function connectWebViewJavascriptBridge (callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}

【说明:这里的判断只是只是需要判断当前的jsbridge的环境,还需要加上一部分代码】

  • 下方是完整的 android 端代码需要copy到你的js中
var u = navigator.userAgent,
isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端

function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
if (!isAndroid) {
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)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function(event) {
callback(WebViewJavascriptBridge)
}, false)
}
}
}
  • 然后再初始化jsbridge和注册事件以及回调事件
// 初始化jsbridge 以及注册事件
connectWebViewJavascriptBridge(function(bridge) {
if (isAndroid == true) {
bridge.init(function(data, responseCallback) {
responseCallback(data)
})
bridge.registerHandler('bevaJSHandler', function(data, responseCallback) {
responseCallback(data)
})
}
});

// 获取用户信息
function getUserInfoFun() {
connectWebViewJavascriptBridge(function(bridge) {
// 提交给app的数据
var data = {
"method": "getUserInfo",
"param": {}
}
addLog('JS调用APP:' + JSON.stringify(data))
bridge.callHandler('bevaAppHandler', data, function(response) {
addLog('APP回调 返回数据======:' + JSON.stringify(response))
})
});
}

【备注】

1.可以查看jsbridge的 android demo链接,中间有详细的代码片段

2.可以查看wiki上的事件说明,了解调用app和js对象接口方法说明


第二部分 IOS

  • 在 IOS 中,要比安卓简单一些,下边代码直接 copy 到 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 = 'https://__bridge_loaded__';
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() {
document.documentElement.removeChild(WVJBIframe)
}, 0)

setupWebViewJavascriptBridge(function(bridge) {
//注册一个方法(方法名是“bevaJSHandler”)
bridge.registerHandler('bevaJSHandler', function(data, responseCallback) {
addLog('注册 一个名为“bevaJSHandler”的方法,客户端进行调用')
responseCallback(data)
})
})
}

【说明:这里要比Android少一步判断的操作,同时直接注册了方法】

  • 然后在 js 中直接进行回调操作即可
// 获取app的基本信息
function getAppInfoFun() {
var data = {
"method": "getAppInfo",
"param": {}
}
setupWebViewJavascriptBridge(function(bridge) {
//客户端已经注册好一个名为“ObjC Echo”的方法,H5直接进行调用(方法名也为“ObjC Echo”)就行,调用的时候可以传客户端需要的参数
bridge.callHandler('bevaAppHandler', data, function responseCallback(responseData) {
addLog('客户端已经注册好一个名为“bevaAppHandler”的方法,H5直接进行调用')
addLog(JSON.stringify(responseData))
})
})
}

【备注】

1.可以查看 JSbridge 的IOS demo链接,查看详细的代码片段

2.可以查看wiki上的事件说明,了解调用app和js对象接口方法说明