JSbridge使用 说明

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对象接口方法说明

---